TypeScript：大规模JavaScript开发

需积分: 9 177 浏览量更新于2024-07-18 收藏 3.54MB PDF 举报

"Pro TypeScript 2018 2版由Steve Fenton撰写，专注于大型JavaScript应用程序开发。TypeScript是微软开发并维护的开源语言，采用Apache 2.0许可证。它通过提供更好的设计时工具、编译时检查和运行时动态模块加载，解决了大规模JavaScript编程问题。微软自身使用TypeScript编写了Azure Management Portal和Visual Studio Code。TypeScript是一种有类型的JavaScript超集，可编译为各种JavaScript版本，确保高度可移植性。它与多个开发工具（如VS Code、WebStorm、Eclipse等）兼容，并且可以与许多JavaScript库和框架（如Angular、jQuery、React等）一起使用。TypeScript的语言特性分为三类：基于ECMAScript 262规范的特性、后续版本的特性预览，以及不打算纳入ECMAScript标准的额外特性，如泛型和类型注解。TypeScript的源代码可以通过源映射在浏览器调试工具中显示，方便调试。" 在这本书中，作者Steve Fenton详细介绍了TypeScript的各种语言特性： 1. **JavaScript是有效的TypeScript**：这意味着任何符合ECMAScript标准的JavaScript代码都是合法的TypeScript代码。 2. **变量**：TypeScript支持变量声明，同时可以指定变量的类型。 3. **常量**：与变量类似，但一旦赋值后不能更改。 4. **类型**：TypeScript引入了类型系统，允许开发者明确指定变量、函数参数和返回值的类型。 5. **类型注解**：通过类型注解，开发者可以为变量、函数参数和对象属性指定类型。 6. **原始类型**：包括布尔、数字、字符串、空、null、undefined等。 7. **对象和动态类型**：TypeScript允许创建对象类型，并支持动态类型，但鼓励静态类型使用。 8. **枚举**：用于定义一组命名的整数值。 9. **联合类型**：表示一个值可以是几种类型之一。 10. **字面量类型**：表示特定值的类型，如字符串字面量或数字字面量。 11. **交集类型**：表示一个类型可以是多个类型的一个组合。 12. **数组**：可以指定数组元素的类型。 13. **元组类型**：固定长度的有序元素集合，每个元素可以有不同的类型。 14. **字典类型**：使用键值对来表示动态对象。 15. **映射类型**：允许根据现有类型创建新的类型。 16. **类型断言**：当编译器无法确定类型时，开发者可以手动指定类型。 17. **类型守卫**：在运行时检查值的类型，以影响控制流。 18. **歧视联合**：一种处理多个可能类型的方式，通过在类型中添加共享的、可识别的属性来区分它们。这本书还涵盖了TypeScript与其他JavaScript库和框架的集成，以及如何利用TypeScript的这些特性构建大规模应用。TypeScript的这些特性提升了代码质量和可维护性，使其成为开发大型JavaScript项目的重要选择。

Despite its popularity, it hasn't received much respect from developers — possibly because it contains

many snares and traps that can entangle a large program much like the tar pit pulling the mammoth to

its death, as described by Fred Brooks (1975). If you are a professional programmer working with large

applications written in JavaScript, you will almost certainly have rubbed up against problems once your

program chalked up a few thousand lines. You may have experienced naming conflicts, substandard

programming tools, complex modularization, unfamiliar prototypal inheritance that makes it hard to reuse

common design patterns easily, and difficulty keeping a readable and maintainable code base. TypeScript

solves problems such as these.

Because JavaScript has a C-like syntax, it looks familiar to most programmers. This is one of JavaScript's

key strengths, but it is also the cause of many surprises, especially in the following areas:

• Prototypal inheritance

• Equality and type juggling

• Management of modules

• Scope

• Lack of types

Typescript solves or eases these problems in several ways. Each of these topics is discussed in this

introduction.

Prototypal Inheritance

Prototype-based programming is a style of object-oriented programming that is mainly found in interpreted

dynamic languages. It was first used in a language called Self, created by David Ungar and Randall Smith in

1986, but it has been used in a selection of languages since then. Of these prototypal languages, JavaScript

is by far the most widely known, although this has done little to bring prototypal inheritance into the

mainstream. Despite its validity, prototype-based programming is somewhat esoteric; class-based object

orientation is far more commonplace and will be familiar to most programmers.

TypeScript solves this problem by adding classes, namespaces, modules, and interfaces. This allows

programmers to transfer their existing knowledge of objects and code structure from other languages,

including implementing interfaces, inheritance, and code organization. Classes and modules are an early

preview of JavaScript proposals and because TypeScript can compile to earlier versions of JavaScript, it

allows you to use these features independent of support for the newer ECMAScript specifications. All these

features are described in detail in Chapter 1.

Equality and Type Juggling

JavaScript has always supported dynamically typed variables, and as a result it expends effort at runtime

working out types and coercing them into other types on the fly to make statements work that in a statically

typed language would cause an error.

The most common type coercions involve strings, numbers, and Boolean target types. Whenever

you attempt to concatenate a value with a string, the value will be converted to a string, if you perform a

mathematical operation an attempt will be made to turn the value into a number, and if you use any value

in a logical operation there are special rules that determine whether the result will be true or false. When an

automatic type conversion occurs, it is commonly referred to as type juggling.

In some cases, type juggling can be a useful feature, in particular in creating shorthand logical

expressions. In other cases, type juggling hides an accidental use of different types and causes unintended

behavior as discussed in Chapter 1. A common JavaScript example is shown in Listing 1.

Listing 1. Type juggling

const num = 1;

const str = '0';

// result is '10' not 1

const strTen = num + str;

// result is 20

const result = strTen * 2;

TypeScript gracefully solves this problem by introducing type checking, which can provide warnings

at design and compile time to pick up potential unintended juggling. Even in cases where it allows implicit

type coercion, the result will be assigned the correct type. This prevents dangerous assumptions from going

undetected. This feature is covered in detail in Chapter 3.

The introduction of types in TypeScript does not preclude the use of dynamic types. You can choose

when to use types, and when to go without them. TypeScript does not force you to do anything, it is just

there to help.

Management of Modules

If you have worked with JavaScript, it is likely that you will have come across a dependency problem. Some

of the common problems include the following:

• Forgetting to add a script tag to a web page

• Adding scripts to a web page in the wrong order

• Finding out you have added scripts that aren't used

There is also a series of issues you may have come across if you are using tools to combine your scripts

into a single file to reduce network requests or if you minify your scripts to lower bandwidth usage.

• Combining scripts into a single script in the wrong order

• Finding out that your chosen minification tool doesn't understand single-line

comments

• Trying to debug combined and minified scripts

You may have already solved some of these issues using module loading, as the pattern is gaining

traction in the JavaScript community. However, TypeScript makes module loaders the default way of

working and allows your modules to be compiled to suit the most prevalent module loading styles without

requiring changes to your code. The details of module loading in web browsers are covered in Chapter 6 and

on the server in Chapter 7.

Scope

In most modern C-like languages, the curly braces create a new context for scope. A variable declared inside a

set of curly braces cannot be seen outside of that block. JavaScript has bucked this trend traditionally by being

functionally scoped, which means blocks defined by curly braces have no effect on scope. Instead, variables are

scoped to the function they are declared in, or the global scope if they are not declared within a function. There

can be further complications caused by the accidental omission of the var keyword within a function, thus

promoting the variable into the global scope. More complications are caused by variable hoisting, resulting in

all variables within a function behaving as if they were declared at the top of the function.

The introduction of the const and let variable declarations have gone some way to solving this

problem, and if you are starting from a clean sheet you can avoid the older var variable declaration

altogether.

Despite some tricky surprises with scope, JavaScript does provide a powerful mechanism that wraps

the current lexical scope around a function declaration to keep values to hand when the function is later

executed. These closures are one of the most powerful features in JavaScript.

TypeScript eases scope problems by warning you about implicit global variables, provided you avoid

adding variables to the global scope. This safety net is demonstrated in Listing 2.

Listing 2. Accidental global scope error

function process() {

// Error! Cannot find name 'accidentalGlobal;

accidentalGlobal = 5;

}

Lack of Types

The problem with JavaScript isn't that it has no types, because each variable does have a type; it is just that

the type can be changed by each assignment. A variable may start off as a string, but an assignment can

change it to a number, an object, or even a function. The real problem here is that the development tools

cannot be improved beyond a reasonable guess about the type of a variable. If the development tools don’t

know the types, the autocompletion and type hinting is often too general to be useful.

By formalizing type information, TypeScript allows development tools to supply specific contextual

help that otherwise would not be possible.

Which Problems Are Not Solved?

TypeScript is not a crutch any more than JSLint is a crutch. It doesn’t hide JavaScript (as

CoffeeScript tends to do).

—Ward Bell

TypeScript remains largely faithful to JavaScript. The TypeScript specification adds many language features,

but it doesn't attempt to change the ultimate style and behavior of the JavaScript language. It is just as

important for TypeScript programmers to embrace the idiosyncrasies of the runtime as it is for JavaScript

programmers. The aim of the TypeScript language is to make large-scale JavaScript programs manageable

and maintainable. No attempt has been made to twist JavaScript development into the style of C#, Java,

Ruby, Python, or any other language (although it has taken inspiration from many languages).

Prerequisites

To benefit from the features of TypeScript, you'll need access to an integrated development environment that

supports the syntax and compiler. The examples in this book were written using Visual Studio 2017, but you

can use VS Code, WebStorm/PHPStorm, Eclipse, Sublime Text, Vi, Emacs, or any other development tools

that support the language; you can even try many of the simpler examples on the TypeScript Playground

provided by Microsoft. I often use the TypeScript Playground when answering questions on the language.

From the Visual Studio 2013 Spring Update (Update 2), TypeScript is a first-class language in Visual

Studio. Prior to this, an additional extension needed to be installed. Although the examples in this book are

shown in Visual Studio, you can use any of the development tools that were listed above. In particular, Visual

Studio Code is a free cross-platform editor with native TypeScript support - so you can write your TypeScript

code on any machine you have on hand, regardless of the operating system.

It is also worth downloading and installing Node (which is required to follow many of the examples) as

it will allow you to access the Node Package Manager and the thousands of modules and utilities available

through it. For example, you can use task runners such as Grunt and Gulp to watch your TypeScript files and

compile them automatically each time you change them if your development tools don't do this for you.

Node is free and can be downloaded for multiple platforms from the official Node website.

https://nodejs.org/

To avoid being greatly sidetracked, I have avoided using any task runners to perform additional

operations outside of Visual Studio, but once you have mastered TypeScript you will almost certainly want

to add a task runner, such as Gulp or Grunt, to your development workflow. I have referenced some web

dependencies from the node_modules folder in the examples in this book; but on a real-world project I

would use a task runner to lift and shift the website dependencies into a different folder that I would be

happy to deploy to a web server. The node_modules folder often contains a great deal of files that I would not

deploy to a web server.

TypeScript Alternatives

TypeScript is not the only alternative to writing to plain JavaScript.

The strongest TypeScript alternative is Babel, a compiler that exposes the latest ECMAScript features

with plugins for down-level compilation and polyfills to make your program work in current browsers. The

aim of the Babel project is to make the latest features available much sooner than they otherwise would be,

but Babel doesn't introduce compile-time type checking. Babel also features in many TypeScript workflows,

where Babel is executed after the TypeScript compiler, rather than using TypeScript to perform the down-

level compilation. You can read about Babel on the official website:

https://babeljs.io/

For a number of years, CoffeeScript was a popular alternative with a terse syntax that compiles to

sensible JavaScript code. CoffeeScript doesn't offer many of the additional features that TypeScript offers,

such as static type checking. It is also a very different language to JavaScript, which means you need to

translate snippets of code you find online into CoffeeScript to use them. In 2017, however, CoffeeScript

reached the top three "most dreaded languages" in the Stack Overflow developer survey (next to VBA, and

Visual Basic 6). In the same survey, TypeScript landed in the top three most loved languages. You can find

out more about CoffeeScript on the official website:

http://coffeescript.org/

Another alternative is Google's Dart language. Dart has much in common with TypeScript. It is class-

based, object oriented, and offers optional types that can be checked by a static checker. Dart was originally

conceived as a replacement for JavaScript, and was only intended to be compiled to JavaScript to provide

wide support in the short term while native support for Dart was added to browsers.

It seems unlikely at this stage that Dart will get the kind of browser support that JavaScript has won,

so the compile-to-JavaScript mechanism will likely remain core to Dart's future in the web browser. The

decision by Google to adopt TypeScript for the Angular project may be indicative of their commitment to

Dart, although it is still described as a long-term project. You can read about Dart on the official website for

the language:

https://www.dartlang.org/

剩余299页未读，继续阅读

智瑞君

粉丝: 1
资源: 10

TypeScript：大规模JavaScript开发

TypeScript精要：Steve Fenton著

Pro TypeScript 2nd Edition: 应用级JavaScript开发

深入探索TypeScript：超越基础

Pro TypeScript

TypeScript.2.x.By.Example TypeScript2开发范例2018年7月最新版

Pro TypeScript, 2nd Edition

Pro TypeScript Application-Scale JavaScript Development(2nd) epub

Getting started with TypeScript with intro Angular

Pro TypeScript Application-Scale JavaScript Development(2nd) 无水印原版pdf

Angular 2 Development with TypeScript

最新资源