深入探索TypeScript

5星 · 超过95%的资源需积分: 9 162 浏览量更新于2024-07-22 7 收藏 4.15MB PDF 举报

"Pro TypeScript" 本书深入探讨了TypeScript这一由微软开发的静态类型语言，它是JavaScript的一个超集，包含了ECMAScript 6的一些特性，如类、模块等。这本书旨在帮助读者理解并掌握TypeScript的强大功能，提升JavaScript开发的效率和代码质量。章节概览： 1. TypeScript语言特性：这部分将介绍TypeScript的基本语法和特性，包括类型注解、接口、枚举、装饰器等，这些都是TypeScript与JavaScript相比增强的部分。 2. 类型系统：深入讲解TypeScript的类型系统，如何定义和使用各种类型的变量，以及类型推断机制，使开发者能更好地控制代码的类型安全。 3. 对象导向编程：详细阐述TypeScript中的类、继承、多态等面向对象编程概念，以及如何在实际项目中应用这些概念。 4. 理解运行时：讨论TypeScript编译后的JavaScript代码在运行时的行为，以及类型检查如何转化为运行时的检查和优化。 5. 在浏览器中运行TypeScript：介绍如何配置和使用TypeScript编译器，以及将编译后的代码部署到浏览器中，实现前端应用的开发。 6. 在服务器上运行TypeScript：探讨Node.js环境下的TypeScript应用，包括模块系统、异步处理等，展示如何构建后端服务。 7. 异常、内存和性能：讲解TypeScript中的异常处理机制，内存管理以及如何优化代码以提高性能。 8. 使用JavaScript库：解释如何将现有的JavaScript库集成到TypeScript项目中，利用类型定义文件（d.ts）来确保类型安全。 9. 自动化测试：介绍如何利用TypeScript进行单元测试和集成测试，包括常用的测试框架和实践策略。 10. 附录：提供了JavaScript快速参考、TypeScript编译器选项、位运算符的使用，以及编码练习，帮助读者巩固所学知识。通过本书，读者不仅能学习到TypeScript的基本用法，还能深入了解其在实际开发中的应用，提升开发效率和代码质量。无论你是JavaScript新手还是经验丰富的开发者，都能从这本书中获益。

CHAPTER 1 ■ TYPESCRIPT LANGUAGE FEATURES

Type Annotations

Although the TypeScript language service is expert at inferring types automatically, there are times when it isn’t

able to determine the type. There will also be times where you will wish to make a type explicit either for safety or

readability. In all of these cases, you can use a type annotation to specify the type.

For a variable, the type annotation comes after the identifier and is preceded by a colon. Figure 1-3 shows the

combinations that result in a typed variable. The most verbose style is to add a type annotation and assign the value.

Although this is the style shown in many examples in this chapter, in practice this is the one you will use the least.

The second variation shows a type annotation with no value assignment; the type annotation here is required because

TypeScript cannot infer the type when there is no value present. The final example is just like plain JavaScript; a

variable is declared and initialized on the same line. In TypeScript the type of the variable is inferred from the value

assigned.

Figure 1-2. TypeScript autocompletion

Figure 1-3. Typed variable combinations

To demonstrate type annotations in code, Listing 1-4 shows an example of a variable that has an explicit type

annotation that marks the variable as a string. Primitive types are the simplest form of type annotation, but you are

not restricted to such simple types.

Listing 1-4. Explicit type annotation

var name: string = 'Steve';

The type used to specify an annotation can be a primitive type, an array type, a function signature, or any

complex structure you want to represent including the names of classes and interfaces you create. If you want to opt

out of static type checking, you can use the special any type, which marks a variable’s type as dynamic. No checks are

made on dynamic types. Listing 1-5 shows a range of type annotations that cover some of these different scenarios.

www.it-ebooks.info

CHAPTER 1 ■ TYPESCRIPT LANGUAGE FEATURES

Primitive Types

Although the primitive types seem limited in TypeScript, they directly represent the underlying JavaScript types and

follow the standards set for those types. String variables can contain a sequence of UTF-16 code units. A Boolean

type can be assigned only the true or false literals. Number variables can contain a double-precision 64-bit floating

point value. There are no special types to represent integers or other specific variations on a number as it wouldn’t be

practical to perform static analysis to ensure all possible values assigned are valid.

The any type is exclusive to TypeScript and denotes a dynamic type. This type is used whenever TypeScript is

unable to infer a type, or when you explicitly want to make a type dynamic. Using the any type is equivalent to opting

out of type checking for the life of the variable.

Caution ■ Before version 0.9 of TypeScript, the Boolean type was described using the bool keyword. There was a

breaking change in the 0.9 TypeScript language specifications, which changed the keyword to boolean.

The type system also contains three types that are not intended to be used as type annotations but instead refer to

the absence of values.

The • undefined type is the value of a variable that has not been assigned a value.

The • null type can be used to represent an intentional absence of an object value. For example,

if you had a method that searched an array of objects to find a match, it could return null to

indicate that no match was found.

The • void type is used only on function return types to represent functions that do not return a

value or as a type argument for a generic class or function.

Arrays

TypeScript arrays have precise typing for their contents. To specify an array type, you simply add square brackets

after the type name. This works for all types whether they are primitive or custom types. When you add an item to the

array its type will be checked to ensure it is compatible. When you access elements in the array, you will get quality

autocompletion because the type of each item is known. Listing 1-7 demonstrates each of these type checks.

Listing 1-7. Typed arrays

interface Monument {

heightInMeters: number;

}

// The array is typed using the Monument interface

var monuments: Monument[] = [];

// Each item added to the array is checked for type compatibility

monuments.push({

heightInMeters: 46,

location: 'USA'

});

www.it-ebooks.info

CHAPTER 1 ■ TYPESCRIPT LANGUAGE FEATURES

monuments.push({

heightInMeters: 96

});

monuments.push({

heightInMeters: 20

});

function compareMonumentHeights(a: Monument, b: Monument) {

if (a.heightInMeters > b.heightInMeters) {

return -1;

}

if (a.heightInMeters < b.heightInMeters) {

return 1;

}

return 0;

}

// The array.sort method expects a comparer that accepts two Monuments

var monumentsOrderedByHeight = monuments.sort(compareMonumentHeights);

// Get the first element from the array, which is the tallest

var tallestMonument = monumentsOrderedByHeight[0];

console.log(tallestMonument.name); // Peter the Great

There are some interesting observations to be made in Listing 1-7. When the monuments variable is declared,

the type annotation for an array of Monument objects can either be the shorthand: Monument[] or the longhand:

Array<Monument>—there is no difference in meaning between these two styles. Therefore, you should opt for

whichever you feel is more readable. Note that the array is instantiated after the equals sign using the empty array

literal ([]). You can also instantiate it with values, by adding them within the brackets, separated by commas.

The objects being added to the array using monuments.push(...) are not explicitly Monument objects. This is

allowed because they are compatible with the Monument interface. This is even the case for the Statue of Liberty object,

which has a location property that isn’t part of the Monument interface. This is an example of structural typing, which

is explained in more detail in Chapter 2.

The array is sorted using monuments.sort(...), which takes in a function to compare values. When the

comparison is numeric, the comparer function can simply return a - b, in other cases you can write custom code to

perform the comparison and return a positive or negative number to be used for sorting (or a zero if the values are

the same).

The elements in an array are accessed using an index. The index is zero based, so the first element in the

monumentsOrderedByHeight array is monumentsOrderedByHeight[0]. When an element is accessed from the array,

autocompletion is supplied for the name and heightInMeters properties. The location property that appears on the

Statue of Liberty object is not supplied in the autocompletion list as it isn’t part of the Monument interface.

To find out more about using arrays and loops, refer to Appendix 1.

www.it-ebooks.info

CHAPTER 1 ■ TYPESCRIPT LANGUAGE FEATURES

Enumerations

Enumerations represent a collection of named elements that you can use to avoid littering your program with hard-coded

values. By default, enumerations are zero based although you can change this by specifying the first value, in which

case numbers will increment from the specified value. You can opt to specify values for all identifiers if you wish

to. In Listing 1-8 the VehicleType enumeration can be used to describe vehicle types using well-named identifiers

throughout your program. The value passed when an identifier name is specified is the number that represents the

identifier, for example in Listing 1-8 the use of the VehicleType.Lorry identifier results in the number 5 being stored

in the type variable. It is also possible to get the identifier name from the enumeration by treating the enumeration

like an array.

Listing 1-8. Enumerations

enum VehicleType {

PedalCycle,

MotorCycle,

Car,

Van,

Bus,

Lorry

}

var type = VehicleType.Lorry;

var typeName = VehicleType[type]; // 'Lorry'

In TypeScript enumerations are open ended. This means all declarations with the same name inside a common

root will contribute toward a single type. When defining an enumeration across multiple blocks, subsequent blocks

after the first declaration must specify the numeric value to be used to continue the sequence, as shown in Listing 1-9.

This is a useful technique for extending code from third parties, in ambient declarations and from the standard library.

Listing 1-9. Enumeration split across multiple blocks

enum BoxSize {

Small,

Medium

}

//...

enum BoxSize {

Large = 2,

XLarge,

XXLarge

}

Note ■ The term common root comes from graph theory. In TypeScript this term relates to a particular location in the

tree of modules within your program. Whenever declarations are considered for merging, they must have the same

fully qualified name, which means the same name at the same level in the tree.

www.it-ebooks.info

剩余232页未读，继续阅读

zj254584096

粉丝: 2
资源: 13

深入探索TypeScript

TypeScript

TypeScript中文版

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

Pro TypeScript, 2nd Edition

Pro TypeScript with Steve Fenton 2018 2版

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

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

ts-pro:TypeScript的高级实用程序类型

基于ant-design-pro的TypeScript中台前端设计源码

ant-design-pro-ts:typescript版本ant desingn pro

最新资源