原始数据类型

JavaScript类型分为两种，原始数据类型和对象类型。

原始类型包括：布尔值，数值，字符串，null，undefined,以及ES6中的新类型Symbol和ES10中的新类型BigInt

布尔值

布尔值是最基础的数据类型，使用boolean定义布尔值类型

  1. let isDone: boolean = false

需要注意的是，使用构造函数Boolean创造的对象不是布尔值

  1. let createdByNewBoolean: boolean = new Boolean(1);
  3. // Type 'Boolean' is not assignable to type 'boolean'.
  4. //   'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.

new Boolean()返回的是一个Boolean对象

  1. let createdByNewBoolean: Boolean = new Boolean(1);

直接调用Boolean返回的是一个Boolean对象

  1. let createdByBoolean: boolean = Boolean(1);

在 TypeScript 中，boolean 是 JavaScript 中的基本类型，而 Boolean 是 JavaScript 中的构造函数。其他基本类型（除了 null 和 undefined）一样，不再赘述。

数值

使用number定义数值类型

  1. let decLiteral: number = 6;
  2. let hexLiteral: number = 0xf00d;
  3. // ES6 中的二进制表示法
  4. let binaryLiteral: number = 0b1010;
  5. // ES6 中的八进制表示法
  6. let octalLiteral: number = 0o744;
  7. let notANumber: number = NaN;
  8. let infinityNumber: number = Infinity;

编译结果

  1. var decLiteral = 6;
  2. var hexLiteral = 0xf00d;
  3. // ES6 中的二进制表示法
  4. var binaryLiteral = 10;
  5. // ES6 中的八进制表示法
  6. var octalLiteral = 484;
  7. var notANumber = NaN;
  8. var infinityNumber = Infinity;

字符串

使用string来定义字符串类型

  1. let myName: string = "Tom"
  2. let myAge: number = 25

编译结果

  1. var myName = "Tom";
  2. var myAge = 25;

空值

在 TypeScript 中，可以用 void 表示没有任何返回值的函数

  1. function alertname(): void {
  2.     alert('my name is Tom')
  3. }

编译结果

  1. function alertname() {
  2.     alert('my name is Tom');
  3. }

声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null（只在 —strictNullChecks 未指定时）

  1. let unusable_null: void = null;
  2. let unusable_unde: void = undefined;
  3. //会报错
  4. let unusable_numb: void = 123;

Null和undefined

在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：

  1. let u: undefined = undefined;
  2. let n: null = null;

与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：

  1. // 这样不会报错
  2. let num: number = undefined;
  1. // 这样也不会报错
  2. let u: undefined;
  3. let num: number = u;

而 void 类型的变量不能赋值给 number 类型的变量：

  1. let u: void;
  2. let num: number = u;
  3. // Type 'void' is not assignable to type 'number'.

任意值

任意值（Any）用来表示允许赋值为任意类型。

什么是任意值类型？

  • 如果是一个普通类型，在赋值过程中改变类型是不被允许的
  1. let myFavoriteNumber: string = 'seven';
  2. myFavoriteNumber = 7;
  4. // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'

但是如果是any类型，则允许被赋值为任意类型

  1. let myFavoriteNumber: any = 'seven';
  2. myFavoriteNumber = 7;

任意值的属性和方法

  • 在任意值上访问任何属性都是允许的
  1. let anyThing: any = 'hello';
  2. console.log(anyThing.myName);
  3. console.log(anyThing.myName.firstName);
  • 也可以调用任何方法
  1. let anyThing: any = 'Tom';
  2. anyThing.setName('Jerry');
  3. anyThing.setName('Jerry').sayHello();
  4. anyThing.myName.setFirstName('Cat');

可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

变量如果在声明的时候，未指明其类习惯，那么他会被识别为任意类型

  1. let something;
  2. something = 'seven';
  3. something = 7;
  5. something.setName('Tom');

类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

  1. let myFavoriteNumber = 'seven';
  2. myFavoriteNumber = 7;
  4. // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string

事实上，他等价于

  1. let myFavoriteNumber: string = 'seven';
  2. myFavoriteNumber = 7;
  4. // index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

和上文所述的any的推断区别是

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：

  1. let myFavoriteNumber; //这个时候识别出来的是any类型
  2. myFavoriteNumber = 'seven';
  3. myFavoriteNumber = 7;

联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

  1. let myFavoriteNumber: string | number;
  2. myFavoriteNumber = 'seven';
  3. myFavoriteNumber = 7;
  1. let myFavoriteNumber: string | number;
  2. myFavoriteNumber = true;
  4. // index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.
  5. //   Type 'boolean' is not assignable to type 'number'.

联合类型使用 | 分隔每个类型。

这里的 let myFavoriteNumber: string | number 的含义是，允许 myFavoriteNumber 的类型是 string 或者 number，但是不能是其他类型。

访问联合类型的属性或方法

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

  1. function getLength(something: string | number): number {
  2.     return something.length;
  3. }
  5. // index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
  6. //   Property 'length' does not exist on type 'number'.

上例中，length 不是 string 和 number 的共有属性，所以会报错。

访问 string 和 number 的共有属性是没问题的：

  1. function getString(something: string | number): string {
  2.     return something.toString();
  3. }

联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型，也就是说最后会确定一个类型的：

  1. let myFavoriteNumber: string | number;
  2. myFavoriteNumber = 'seven'; //在赋值的时候就会确定这个类型为string
  3. console.log(myFavoriteNumber.length); // 5
  4. myFavoriteNumber = 7; //在赋值的时候就会确定这个类型为number
  5. console.log(myFavoriteNumber.length); // 编译时报错
  7. // index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

对象的类型-接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

什么是接口

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述

  1. interface Person {
  2.     name: string;
  3.     age: number
  4. }
  5. let tom: Person = { name: "Tom", age: 25 }

上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person。这样，我们就约束了 tom 的形状必须和接口 Person 一致。

接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。

定义的变量比接口少了一些属性是不允许的：

  1. interface Person {
  2.     name: string;
  3.     age: number;
  4. }
  6. let tom: Person = {
  7.     name: 'Tom'
  8. };
  10. // index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
  11. //   Property 'age' is missing in type '{ name: string; }'.

多一些属性也是不允许的

  1. interface Person {
  2.     name: string;
  3.     age: number;
  4. }
  6. let tom: Person = {
  7.     name: 'Tom',
  8.     age: 25,
  9.     gender: 'male'
  10. };
  12. // index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
  13. //   Ob

可见，赋值的时候，变量的形状必须和接口的形状保持一致。

可选属性

有时我们希望不要完全匹配一个形状，那么可以用可选属性：

  1. interface Person {
  2.     name: string;
  3.     age?: number;
  4. }
  6. let tom: Person = {
  7.     name: 'Tom'
  8. };

可选属性的含义是该属性可以不存在。

这时仍然不允许添加未定义的属性：

  1. interface Person {
  2.     name: string;
  3.     age?: number;
  4. }
  6. let tom: Person = {
  7.     name: 'Tom',
  8.     age: 25,
  9.     gender: 'male'
  10. };
  12. // examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
  13. //

任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

  1. interface Person {
  2.     name: string;
  3.     age?: number;
  4.     [propName: string]: any;
  5. }
  7. let tom: Person = {
  8.     name: 'Tom',
  9.     gender: 'male'
  10. };

使用 [propName: string] 定义了任意属性取 string 类型的值。

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

  1. interface Person {
  2.     name: string;
  3.     age: number;
  4.     [propName: string]: string;
  5. }
  6. let tom: Person = {
  7.     name: 'Tom',
  8.     age: 25,
  9.     gender: 'male'
  10. };

以上代码是会报错的。因为age的属性值类型为number，我们希望是string 类型

上例中，任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了。

另外，在报错信息中可以看出，此时 { name: 'Tom', age: 25, gender: 'male' } 的类型被推断成了 { [x: string]: string | number; name: string; age: number; gender: string; }，这是联合类型和接口的结合。

一个接口中只能定义一个任意属性。如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：

  1. interface Person {
  2.     name: string;
  3.     age: number;
  4.     [propName: string]: string | number;
  5. }
  6. let tom: Person = {
  7.     name: 'Tom',
  8.     age: 25,
  9.     gender: 'male'
  10. };

只读属性

某些属性只能在第一次创建对象时才能修改。您可以通过将readonly其放在属性名称之前来指定：

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

  1. interface Person {
  2.     readonly id: number;
  3.     name: string;
  4.     age?: number;
  5.     [propName: string]: any;
  6. }
  8. let tom: Person = {
  9.     id: 89757,
  10.     name: 'Tom',
  11.     gender: 'male'
  12. };
  14. tom.id = 9527;
  16. // index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.无法分配到"id"，因为他是只读属性

上例中，使用 readonly 定义的属性 id 初始化后，又被赋值了，所以报错了。

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候：

  1. interface Person {
  2.     readonly id: number;
  3.     name: string;
  4.     age?: number;
  5.     [propName: string]: any;
  6. }
  8. let tom: Person = {
  9.     name: 'Tom',
  10.     gender: 'male'
  11. };
  13. tom.id = 89757;
  15. // index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'.
  16. //   Property 'id' is missing in type '{ name: string; gender: string; }'.
  18. // index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中，报错信息有两处，第一处是在对 tom 进行赋值的时候，没有给 id 赋值。

第二处是在给 tom.id 赋值的时候，由于它是只读属性，所以报错了。

数组的类型

数组类型的定义方式有很多种。下面一一介绍。

1.「类型 + 方括号」表示法

最简单的方法是使用「类型 + 方括号」来表示数组：

  1. let fibonacci: number[] = [1, 1, 2, 3, 5];

数组的项中不允许出现其他的类型：

  1. let fibonacci: number[] = [1, '1', 2, 3, 5];
  3. // Type 'string' is not assignable to type 'number'.

数组的一些方法的参数也会根据数组在定义时约定的类型进行限制：

  1. let fibonacci: number[] = [1, 1, 2, 3, 5];
  2. fibonacci.push('8');
  4. // Argument of type '"8"' is not assignable to parameter of type 'number'.

上例中，push 方法只允许传入 number 类型的参数，但是却传了一个 "8" 类型的参数，所以报错了。这里 "8" 是一个字符串字面量类型.

2. 数组泛型

我们也可以使用数组泛型（Array Generic） Array<elemType> 来表示数组：

  1. let nums: Array<number> = [1, 2, 3, 4, 5]

3. 用接口表示数组

接口也可以用来描述数组

  1. interface NumberArray {
  2.     [index: number]: number
  3. }
  4. let nums: NumberArray = [1, 2, 3]

NumberArray 表示：只要索引的类型是数字时，那么值的类型必须是数字。

虽然接口也可以用来描述数组，但是我们一般不会这么做，因为这种方式比前两种方式复杂多了。

不过有一种情况例外，那就是它常用来表示类数组。

类数组

类数组（Array-like Object）不是数组类型，比如 arguments：

  1. function sum() {
  2.     let args: number[] = arguments;
  3. }
  5. // Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

上例中，arguments 实际上是一个类数组，不能用普通的数组的方式来描述，而应该用接口：

  1. interface IlikeArray {
  2.     [index: number]: number;
  3.     length: number;
  4.     callee: Function
  5. }
  7. function sum() {
  8.     let args: IlikeArray = arguments;
  9. }

事实上常用的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等：

  1. function sum() {
  2.     let args: IArguments = arguments;
  3. }

其中 IArguments 是 TypeScript 中定义好了的类型，它实际上就是：

  1. interface IArguments {
  2.     [index: number]: any;
  3.     length: number;
  4.     callee: Function;
  5. }

any在数组中的应用

一个比较常见的做法是，用 any 表示数组中允许出现任意类型：

  1. let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

函数的类型

函数是Javascript中的一等公民

我们可以这样子看待这句话

如果公民分等级，一等公民什么都可以做，次等公民这不能做那不能做。

JavaScript的函数也是对象，可以有属性，可以赋值给一个变量，可以放在数组里作为元素，可以作为其他对象的属性，什么都可以做，别的对象能做的它能做，别的对象不能做的它也能做。这不就是一等公民的地位嘛。——摘自知乎

函数声明是如何定义类型的

在 JavaScript 中，有两种常见的定义函数的方式——函数声明（Function Declaration）和函数表达式（Function Expression）：

  1. function sum(x, y) {
  2.     return x + y
  3. }
  4. let muSum = function (x, y) {
  5.     return x + y
  6. }

一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义较简单：

  1. function sum(x: number, y: number): number {
  2.     return x + y;
  3. }

注意，输入多余的（或者少于要求的）参数，是不被允许的：

  1. function sum(x: number, y: number): number {
  2.     return x + y;
  3. }
  4. sum(1, 2, 3);
  5. // index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.
  8. function sum(x: number, y: number): number {
  9.     return x + y;
  10. }
  11. sum(1);
  13. // index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.

函数表达式

如果我们写一个对函数表达式的定义，我们可以写为如下消息。

  1. let mySum = function (x: number, y: number): number {
  2.     return x + y
  3. }

这是可以通过编译的，不过事实上，上面的代码只对等号右侧的匿名函数进行了类型定义，而等号左边的 mySum，是通过赋值操作进行类型推论而推断出来的。如果需要我们手动给 mySum 添加类型，则应该是这样：

  1. let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
  2.     return x + y
  3. }

注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

用接口定义函数的形状

我们也可以使用接口的方式来定义一个函数需要符合的形状：

  1. interface IFunc {
  2.     (x: number, y: number): number
  3. }
  4. let mySum: IFunc
  5. mySum = function (x: number, y: number) {
  6.     return x + y
  7. }

采用函数表达式|接口定义函数的方式时，对等号左侧进行类型限制，可以保证以后对函数名赋值时保证参数个数、参数类型、返回值类型不变。

可选参数

前面提到，输入多余的（或者少于要求的）参数，是不允许的。那么如何定义可选的参数呢？

与接口中的可选属性类似，我们用 ? 表示可选的参数：

  1. function buildName(firstName: string, lastName?: string) {
  2.     if (lastName) {
  3.         return firstName + " " + lastName
  4.     } else {
  5.         return firstName
  6.     }
  7. }
  8. let tomcat = buildName('Tom', 'cat')
  9. let tom = buildName('Tom')

需要注意的是，可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必需参数了：

  1. function buildName(firstName?: string, lastName: string) {
  2.     if (firstName) {
  3.         return firstName + ' ' + lastName;
  4.     } else {
  5.         return lastName;
  6.     }
  7. }
  8. let tomcat = buildName('Tom', 'Cat');
  9. let tom = buildName(undefined, 'Tom'); //必选参数不能位于可选参数后

参数默认值

在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数：

  1. function buildName(firstName: string, lastName: string = 'cat') {
  2.     if (firstName) {
  3.         return firstName + ' ' + lastName;
  4.     } else {
  5.         return lastName;
  6.     }
  7. }
  8. let tomcat = buildName('Tom', 'Cat');
  9. let tom = buildName(undefined, 'Tom');

转换为JS代码如下

  1. function buildName(firstName, lastName) {
  2.     if (lastName === void 0) { lastName = 'cat'; }
  3.     if (firstName) {
  4.         return firstName + ' ' + lastName;
  5.     }
  6.     else {
  7.         return lastName;
  8.     }
  9. }
  10. var tomcat = buildName('Tom', 'Cat');
  11. var tom = buildName(undefined, 'Tom');
  12. console.log(tomcat); //Tom Cat
  13. console.log(tom); //Tom

剩余参数

ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数（rest 参数）：

  1. function addNums(array, ...items) {
  2.     items.forEach(item => {
  3.         array.push(item)
  4.     })
  5.     return array
  6. }
  7. let a = []
  8. const result = addNums(a, 1, 2, 3)
  9. console.log(result);

事实上，items 是一个数组。所以我们可以用数组的类型来定义它：

  1. function addNums(array: any[], ...items: any[]) {
  2.     items.forEach(item => {
  3.         array.push(item)
  4.     })
  5.     return array
  6. }
  7. let a = []
  8. const result = addNums(a, 1, 2, 3)
  9. console.log(result);

注意，rest 参数只能是最后一个参数

重载

重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。

比如，我们需要实现一个函数 reverse，输入数字 123 的时候，输出反转的数字 321，输入字符串 'hello' 的时候，输出反转的字符串 'olleh'。

利用联合类型，我们可以这么实现：

  1. function reverse(x: number | string): number | string | void {
  2.     if (typeof x === 'number') {
  3.         return Number(x.toString().split('').reverse().join(''));
  4.     } else if (typeof x === 'string') {
  5.         return x.split('').reverse().join('')
  6.     }
  7. }
  8. const result1 = reverse(123)
  9. const result2 = reverse('hello')

然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。

这时，我们可以使用重载定义多个 reverse 的函数类型：

  1. function reverse(x: number): number
  2. function reverse(x: string): string
  4. function reverse(x: number | string): number | string | void {
  5.     if (typeof x === 'number') {
  6.         return Number(x.toString().split('').reverse().join(''));
  7.     } else if (typeof x === 'string') {
  8.         return x.split('').reverse().join('')
  9.     }
  10. }
  11. const result1 = reverse(123)
  12. const result2 = reverse('hello')

我们重复定义了多次函数 reverse，前几次都是函数定义，最后一次是函数实现。在编辑器的代码提示中，可以正确的看到前两个提示。

注意，TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。

语法

  1. 值 as 类型

或

  1. <类型>值

在tsx语法中必须使用前者，即值as类型

形如 <Foo> 的语法在 tsx 中表示的是一个 ReactNode，在 ts 中除了表示类型断言之外，也可能是表示一个泛型。

在我们使用类型断言的时候，我们尽量使用第一种语法，因为<Foo>语法是表示泛型的

类型断言的用途

1. 将一个联合类型断言为其中一个类型

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型中共有的属性或方法：

  1. interface Cat {
  2.     name: string;
  3.     run(): void;
  4. }
  5. interface Fish {
  6.     name: string;
  7.     swim(): void;
  8. }
  10. function getName(animal: Cat | Fish) {
  11.     return animal.name;
  12. }

有时候，我们确实需要在不确定类型的时候就访问其中一个类型特有的属性和方法

  1. interface Cat {
  2.     name: string;
  3.     run(): void;
  4. }
  5. interface Fish {
  6.     name: string;
  7.     swim(): void;
  8. }
  10. function isFish(animal: Cat | Fish) {
  11.     if (typeof animal.swim === 'function') {
  12.         return true;
  13.     }
  14.     return false;
  15. }
  17. // index.ts:11:23 - error TS2339: Property 'swim' does not exist on type 'Cat | Fish'.
  18. //   Property 'swim' does not exist on type 'Cat'.

这个时候，就会报错。此时我们可以使用类型断言，将animal断言成Fish

  1. interface Cat {
  2.     name: string;
  3.     run(): void;
  4. }
  5. interface Fish {
  6.     name: string;
  7.     swim(): void;
  8. }
  10. function isFish(animal: Cat | Fish) {
  11.     if (typeof (animal as Fish).swim === 'function') {
  12.         return true;
  13.     }
  14.     return false;
  15. }

需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误：

  1. interface Cat {
  2.     name: string;
  3.     run(): void;
  4. }
  5. interface Fish {
  6.     name: string;
  7.     swim(): void;
  8. }
  10. function swim(animal: Cat | Fish) {
  11.     (animal as Fish).swim();
  12. }
  14. const tom: Cat = {
  15.     name: 'Tom',
  16.     run() { console.log('run') }
  17. };
  18. swim(tom);
  19. // Uncaught TypeError: animal.swim is not a function`

上面的例子编译时不会报错，但在运行时会报错：

  1. Uncaught TypeError: animal.swim is not a function`

原因是 (animal as Fish).swim() 这段代码隐藏了 animal 可能为 Cat 的情况，将 animal 直接断言为 Fish 了，而 TypeScript 编译器信任了我们的断言，故在调用 swim() 时没有编译错误。

可是 swim 函数接受的参数是 Cat | Fish，一旦传入的参数是 Cat 类型的变量，由于 Cat 上没有 swim 方法，就会导致运行时错误了。

总之，使用类型断言时一定要格外小心，尽量避免断言后调用方法或引用深层属性，以减少不必要的运行时错误。

2. 将一个父类断言为更加具体的子类

当类之间有继承关系时，类型断言也是很常见的：

  1. class ApiError extends Error {
  2.     code: number = 0
  3. }
  4. class HttpError extends Error {
  5.     statusCode: number = 200
  6. }
  7. function isApiError(error: Error) {
  8.     if (typeof (error as ApiError).code === 'number') {
  9.         return true
  10.     } else {
  11.         return false
  12.     }
  13. }

上面的例子中，我们声明了函数 isApiError，它用来判断传入的参数是不是 ApiError 类型，为了实现这样一个函数，它的参数的类型肯定得是比较抽象的父类 Error，这样的话这个函数就能接受 Error 或它的子类作为参数了。

但是由于父类 Error 中没有 code 属性，故直接获取 error.code 会报错，需要使用类型断言获取 (error as ApiError).code。

我们也可以使用instanceOf来判断

  1. class ApiError extends Error {
  2.     code: number = 0;
  3. }
  4. class HttpError extends Error {
  5.     statusCode: number = 200;
  6. }
  8. function isApiError(error: Error) {
  9.     if (error instanceof ApiError) {
  10.         return true;
  11.     }
  12.     return false;
  13. }

因为 ApiError 是一个 JavaScript 的类，能够通过 instanceof 来判断 error 是否是它的实例。

但是有的情况下 ApiError 和 HttpError 不是一个真正的类，而只是一个 TypeScript 的接口（interface），接口是一个类型，不是一个真正的值，它在编译结果中会被删除，当然就无法使用 instanceof 来做运行时判断了：

  1. interface ApiError extends Error {
  2.     code: number;
  3. }
  4. interface HttpError extends Error {
  5.     statusCode: number;
  6. }
  8. function isApiError(error: Error) {
  9.     if (error instanceof ApiError) {
  10.         return true;
  11.     }
  12.     return false;
  13. }
  15. // index.ts:9:26 - error TS2693: 'ApiError' only refers to a type, but is being used as a value here.

此时就只能用类型断言，通过判断是否存在 code 属性，来判断传入的参数是不是 ApiError 了：

  1. interface ApiError extends Error {
  2.     code: number;
  3. }
  4. interface HttpError extends Error {
  5.     statusCode: number;
  6. }
  8. function isApiError(error: Error) {
  9.     if (typeof (error as ApiError).code === 'number') {
  10.         return true;
  11.     }
  12.     return false;
  13. }

3. 将任意一个类型断言为any

理想情况下，TypeScript 的类型系统运转良好，每个值的类型都具体而精确。

当我们引用一个在此类型上不存在的属性或方法时，就会报错：

  1. const foo: number = 1;
  2. foo.length = 1;
  4. // index.ts:2:5 - error TS2339: Property 'length' does not exist on type 'number'.

上面的例子中，数字类型的变量 foo 上是没有 length 属性的，故 TypeScript 给出了相应的错误提示。

这种错误提示显然是非常有用的。

但有的时候，我们非常确定这段代码不会出错，比如下面这个例子：

  1. window.foo = 1;
  3. // index.ts:1:8 - error TS2339: Property 'foo' does not exist on type 'Window & typeof globalThis'.

上面的例子中，我们需要将 window 上添加一个属性 foo，但 TypeScript 编译时会报错，提示我们 window 上不存在 foo 属性。

此时我们可以使用 as any 临时将 window 断言为 any 类型：

  1. (window as any).foo = 1;

在 any 类型的变量上，访问任何属性都是允许的。

需要注意的是，将一个变量断言为 any 可以说是解决 TypeScript 中类型问题的最后一个手段。

它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。

上面的例子中，我们也可以通过[扩展 window 的类型（TODO）][]解决这个错误，不过如果只是临时的增加 foo 属性，as any 会更加方便。

总之，一方面不能滥用 as any，另一方面也不要完全否定它的作用，我们需要在类型的严格性和开发的便利性之间掌握平衡（这也是 TypeScript 的设计理念之一），才能发挥出 TypeScript 最大的价值

将any断言为一个具体的类型

遇到 any 类型的变量时，我们可以选择无视它，任由它滋生更多的 any。

我们也可以选择改进它，通过类型断言及时的把 any 断言为精确的类型，亡羊补牢，使我们的代码向着高可维护性的目标发展。

  1. function getCacheData(key: string): any {
  2.     return (window as any).cache[key];
  3. }

那么我们在使用它时，最好能够将调用了它之后的返回值断言成一个精确的类型，这样就方便了后续的操作：

  1. function getCacheData(key: string): any {
  2.     return (window as any).cache[key];
  3. }
  5. interface Cat {
  6.     name: string;
  7.     run(): void;
  8. }
  10. const tom = getCacheData('tom') as Cat;
  11. tom.run();

上面的例子中，我们调用完 getCacheData 之后，立即将它断言为 Cat 类型。这样的话明确了 tom 的类型，后续对 tom 的访问时就有了代码补全，提高了代码的可维护性。

类型断言的限制

从上面的例子中，我们可以总结出：

  • 联合类型可以被断言为其中一个类型
  • 父类可以被断言为子类
  • 任何类型都可以被断言为 any
  • any 可以被断言为任何类型

那么类型断言有没有什么限制呢？是不是任何一个类型都可以被断言为任何另一个类型呢？

答案是否定的——并不是任何一个类型都可以被断言为任何另一个类型。

具体来说，若 A 兼容 B，那么 A 能够被断言为 B，B 也能被断言为 A。

下面我们通过一个简化的例子，来理解类型断言的限制：

  1. interface Animal {
  2.     name: string;
  3. }
  4. interface Cat {
  5.     name: string;
  6.     run(): void;
  7. }
  9. let tom: Cat = {
  10.     name: 'Tom',
  11.     run: () => { console.log('run') }
  12. };
  13. let animal: Animal = tom;

我们知道，TypeScript 是结构类型系统，类型之间的对比只会比较它们最终的结构，而会忽略它们定义时的关系。

在上面的例子中，Cat 包含了 Animal 中的所有属性，除此之外，它还有一个额外的方法 run。TypeScript 并不关心 Cat 和 Animal 之间定义时是什么关系，而只会看它们最终的结构有什么关系——所以它与 Cat extends Animal 是等价的：

  1. interface Animal {
  2.     name: string;
  3. }
  4. interface Cat extends Animal {
  5.     run(): void;
  6. }

那么也不难理解为什么 Cat 类型的 tom 可以赋值给 Animal 类型的 animal 了——就像面向对象编程中我们可以将子类的实例赋值给类型为父类的变量。

我们把它换成 TypeScript 中更专业的说法，即：Animal 兼容 Cat。

当 Animal 兼容 Cat 时，它们就可以互相进行类型断言了：

  1. interface Animal {
  2.     name: string;
  3. }
  4. interface Cat {
  5.     name: string;
  6.     run(): void;
  7. }
  9. function testAnimal(animal: Animal) {
  10.     return (animal as Cat);
  11. }
  12. function testCat(cat: Cat) {
  13.     return (cat as Animal);
  14. }

这样的设计其实也很容易就能理解：

  • 允许 animal as Cat 是因为「父类可以被断言为子类」，这个前面已经学习过了
  • 允许 cat as Animal 是因为既然子类拥有父类的属性和方法，那么被断言为父类，获取父类的属性、调用父类的方法，就不会有任何问题，故「子类可以被断言为父类」

总结

综上所述：

  • 联合类型可以被断言为其中一个类型
  • 父类可以被断言为子类
  • 任何类型都可以被断言为 any
  • any 可以被断言为任何类型
  • 要使得 A 能够被断言为 B，只需要 A 兼容 B 或 B 兼容 A 即可

双重断言

既然：

  • 任何类型都可以被断言为 any
  • any 可以被断言为任何类型

那么我们是不是可以使用双重断言 as any as Foo 来将任何一个类型断言为任何另一个类型呢？

  1. interface Cat {
  2.     run(): void;
  3. }
  4. interface Fish {
  5.     swim(): void;
  6. }
  8. function testCat(cat: Cat) {
  9.     return (cat as any as Fish);
  10. }

在上面的例子中，若直接使用 cat as Fish 肯定会报错，因为 Cat 和 Fish 互相都不兼容。

但是若使用双重断言，则可以打破「要使得 A 能够被断言为 B，只需要 A 兼容 B 或 B 兼容 A 即可」的限制，将任何一个类型断言为任何另一个类型。

若你使用了这种双重断言，那么十有八九是非常错误的，它很可能会导致运行时错误。

除非迫不得已，千万别用双重断言。

类型断言VS类型转换

类型断言只会影响 TypeScript 编译时的类型，类型断言语句在编译结果中会被删除：

  1. function toBoolean(something: any): boolean {
  2.     return something as boolean;
  3. }
  5. toBoolean(1);
  6. // 返回值为 1

在上面的例子中，将 something 断言为 boolean 虽然可以通过编译，但是并没有什么用，代码在编译后会变成：

  1. function toBoolean(something) {
  2.     return something;
  3. }
  5. toBoolean(1);
  6. // 返回值为 1

所以类型断言不是类型转换，它不会真的影响到变量的类型。

若要进行类型转换，需要直接调用类型转换的方法：

  1. function toBoolean(something: any): boolean {
  2.     return Boolean(something);
  3. }
  5. toBoolean(1);
  6. // 返回值为 true

类型断言VS类型声明

在这个例子中：

  1. function getCacheData(key: string): any {
  2.     return (window as any).cache[key];
  3. }
  5. interface Cat {
  6.     name: string;
  7.     run(): void;
  8. }
  10. const tom = getCacheData('tom') as Cat;
  11. tom.run();

我们使用 as Cat 将 any 类型断言为了 Cat 类型。

但实际上还有其他方式可以解决这个问题：

  1. function getCacheData(key: string): any {
  2.     return (window as any).cache[key];
  3. }
  5. interface Cat {
  6.     name: string;
  7.     run(): void;
  8. }
  10. const tom: Cat = getCacheData('tom');
  11. tom.run();

上面的例子中，我们通过类型声明的方式，将 tom 声明为 Cat，然后再将 any 类型的 getCacheData('tom') 赋值给 Cat 类型的 tom。

这和类型断言是非常相似的，而且产生的结果也几乎是一样的——tom 在接下来的代码中都变成了 Cat 类型。

他们的区别，可以通过这个例子来理解

  1. interface Animal {
  2.     name: string;
  3. }
  4. interface Cat {
  5.     name: string;
  6.     run(): void;
  7. }
  9. const animal: Animal = {
  10.     name: 'tom'
  11. };
  12. let tom = animal as Cat;

在上面的例子中，由于 Animal 兼容 Cat，故可以将 animal 断言为 Cat 赋值给 tom。

但是若直接声明 tom 为 Cat 类型：

  1. interface Animal {
  2.     name: string;
  3. }
  4. interface Cat {
  5.     name: string;
  6.     run(): void;
  7. }
  9. const animal: Animal = {
  10.     name: 'tom'
  11. };
  12. let tom: Cat = animal;
  14. // index.ts:12:5 - error TS2741: Property 'run' is missing in type 'Animal' but required in type 'Cat'.

则会报错，不允许将 animal 赋值为 Cat 类型的 tom。

这很容易理解，Animal 可以看作是 Cat 的父类，当然不能将父类的实例赋值给类型为子类的变量。

深入的讲，它们的核心区别就在于：

  • animal 断言为 Cat，只需要满足 Animal 兼容 Cat 或 Cat 兼容 Animal 即可
  • animal 赋值给 tom，需要满足 Cat 兼容 Animal 才行

但是 Cat 并不兼容 Animal。

而在前一个例子中，由于 getCacheData('tom') 是 any 类型，any 兼容 Cat，Cat 也兼容 any，故

  1. const tom = getCacheData('tom') as Cat;

等价于

  1. const tom: Cat = getCacheData('tom');

知道了它们的核心区别，就知道了类型声明是比类型断言更加严格的。

所以为了增加代码的质量，我们最好优先使用类型声明，这也比类型断言的 as 语法更加优雅。

类型断言VS泛型

  1. function getCacheData(key: string): any {
  2.     return (window as any).cache[key];
  3. }
  5. interface Cat {
  6.     name: string;
  7.     run(): void;
  8. }
  10. const tom = getCacheData('tom') as Cat;
  11. tom.run();

我们还有第三种方式可以解决这个问题，那就是泛型：

  1. function getCacheData<T>(key: string): T {
  2.     return (window as any).cache[key];
  3. }
  5. interface Cat {
  6.     name: string;
  7.     run(): void;
  8. }
  10. const tom = getCacheData<Cat>('tom');
  11. tom.run();

通过给 getCacheData 函数添加了一个泛型 <T>，我们可以更加规范的实现对 getCacheData 返回值的约束，这也同时去除掉了代码中的 any，是最优的一个解决方案。

声明文件

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。

什么是声明语句

假如我们想使用第三方库 jQuery，一种常见的方式是在 html 中通过 <script> 标签引入 jQuery，然后就可以使用全局变量 $ 或 jQuery 了。

我们通常这样获取一个 id 是 foo 的元素：

  1. $('#foo');
  2. // or
  3. jQuery('#foo');

但是在ts中，编译器并不知道$或者JQuery是什么东西

  1. jQuery('#foo');
  2. // ERROR: Cannot find name 'jQuery'.

这时，我们就需要使用delare var来定义它的类型

  1. declare var jQuery: (selector: string) => any;
  3. jQuery('#foo');

上例中，declare var 并没有真的定义一个变量，只是定义了全局变量 jQuery 的类型，仅仅会用于编译时的检查，在编译结果中会被删除。它编译结果是：

  1. jQuery('#foo');

什么是声明文件

通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件3：

  1. // src/jQuery.d.ts
  3. declare var jQuery: (selector: string) => any;
  1. // src/index.ts
  3. jQuery('#foo');

声明文件必需以 .d.ts 为后缀。

一般来说，ts 会解析项目中所有的 *.ts 文件，当然也包含以 .d.ts 结尾的文件。所以当我们将 jQuery.d.ts 放到项目中时，其他所有 *.ts 文件就都可以获得 jQuery 的类型定义了。

  1. /path/to/project
  2. ├── src
  3. |  ├── index.ts
  4. |  └── jQuery.d.ts
  5. └── tsconfig.json

假如仍然无法解析，那么可以检查下 tsconfig.json 中的 files、include 和 exclude 配置，确保其包含了 jQuery.d.ts 文件。

这里只演示了全局变量这种模式的声明文件，假如是通过模块导入的方式使用第三方库的话，那么引入声明文件又是另一种方式了，将会在后面详细介绍。

第三方声明文件

使用 @types 统一管理第三方库的声明文件。

@types 的使用方式很简单，直接用 npm 安装对应的声明模块即可，以 jQuery 举例：

  1. npm install @types/jquery --save-dev

可以在这个页面搜索你需要的声明文件。

书写声明文件

当一个第三方库没有提供声明文件时，我们就需要自己书写声明文件了。前面只介绍了最简单的声明文件内容，而真正书写一个声明文件并不是一件简单的事，以下会详细介绍如何书写声明文件。

在不同的场景下，声明文件的内容和使用方式会有所区别。

在一般情况下，库的使用场景主要有以下几种：

内置对象

内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。

ECMAScript标准提供的内置对象有：

Boolean、Error、Date、RegExp 等。

我们可以在 TypeScript 中将变量定义为这些类型：

  1. let b: Boolean = new Boolean(1);
  2. let e: Error = new Error('Error occurred');
  3. let d: Date = new Date();
  4. let r: RegExp = /[a-z]/;