深入探索TypeScript：超越基础

需积分: 10 142 浏览量更新于2024-07-18 收藏 3.94MB PDF 举报

"Pro Typescript" 《Pro TypeScript》是一本针对TypeScript高级开发者的书籍，旨在深入探讨TypeScript语言特性及其应用。如果你是初学者，作者建议先学习《Learning Angular 2》来掌握基础。该书内容涵盖了从TypeScript的基础语言特性和类型系统，到面向对象编程、运行时环境，以及在浏览器和服务器上运行TypeScript的方法。此外，书中还涉及异常处理、内存管理、性能优化、使用JavaScript库、自动化测试等多个重要主题。在内容概览中，我们可以看到书的章节分布： 1. 第1章介绍了TypeScript的语言特性，包括语法结构、类型注解等基础内容。 2. 第2章深入讲解TypeScript的类型系统，这是理解TypeScript的关键，它比JavaScript的动态类型更为严谨和强大。 3. 第3章讨论了TypeScript中的面向对象编程概念，如类、接口和继承。 4. 第4章解析了TypeScript在运行时的行为，帮助开发者理解类型系统如何在实际环境中工作。 5. 第5章和第6章分别介绍了如何在浏览器和服务器环境下运行TypeScript代码，涵盖编译和部署策略。 6. 第7章关注异常处理、内存管理和性能优化，这些都是编写高效、健壮代码的重要方面。 7. 第8章教导读者如何利用TypeScript与现有的JavaScript库进行集成，增强已有项目的类型安全性。 8. 第9章介绍了自动化测试，这对于大型项目来说是不可或缺的质量保证手段。 9. 后续的附录提供了JavaScript快速参考、TypeScript编译器的详细信息、位运算符的用法，以及编程练习（Coding Katas），供读者巩固所学知识。《Pro TypeScript》不仅适合已经熟悉JavaScript并希望提升至专业级别的开发者，也适合对强类型语言有需求的团队和项目。通过本书，读者将能全面了解TypeScript，并能有效地将其应用于实际的Web开发项目中，提高代码质量和维护性。

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.

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'

});

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.

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.allitebooks.com

剩余232页未读，继续阅读

李治明

粉丝: 1
资源: 10

深入探索TypeScript：超越基础

Pro TypeScript, 2nd Edition

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

Pro TypeScript

Pro TypeScript with Steve Fenton 2018 2版

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

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

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

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

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

typescript protable 勾选框隐藏

最新资源