• type annotation 类型注解,
  • type inference 类型推断, TS会自动去尝试分析变量的类型。 通常， 声明和赋值在同一行时能够自动推断。

    类型推断

    声明时赋值

    可推断：声明时赋值。
    1. // let count:number = 3;
    2. let count = 3;
    不可推断： 先声明， 再赋值
    1. let count;
    2. count = 3;

类的实例化

  1. // const date:Date  = new Date();
  2. const date = new Date();

特殊的函数返回值

函数中， 有时也能自动推断， 如返回值是parseInt()

  1. // const func = (str: string): number => {
  2. const func = (str: string) => {
  3.     return parseInt(str, 10);  // 依据parseInt能够推断出返回类型为number
  4. }


断言

有时候你会遇到这样的情况，你会比 TypeScript 更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其他语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。

类型断言有两种形式：

  • value
  • (value as string)

3.1 “尖括号” 语法

  1. let someValue: any = "this is a string";
  2. let strLength: number = (<string>someValue).length;
  3. console.log((<string>someValue) ? true : false) // true

3.2 as 语法

  1. let someValue: any = "this is a string";
  2. let strLength: number = (someValue as string).length;
  3. console.log((someValue as string) ? true : false) // true

类型守卫

A type guard is some expression that performs a runtime check that guarantees the type in some scope. —— TypeScript 官方文档

类型保护是可执行运行时检查的一种表达式，用于确保该类型在一定的范围内。换句话说，类型保护可以保证一个字符串是一个字符串，尽管它的值也可以是一个数值。类型保护与特性检测并不是完全不同，其主要思想是尝试检测属性、方法或原型，以确定如何处理值。

类型保护：

  • 断言
  • in
  • typeof
  • instanceof

断言

🌰 见断言

4.1 in 关键字

  1. interface Admin {
  2.   name: string;
  3.   privileges: string[];
  4. }
  5. interface Employee {
  6.   name: string;
  7.   startDate: Date;
  8. }
  9. type UnknownEmployee = Employee | Admin;
  10. function printEmployeeInformation(emp: UnknownEmployee) {
  11.   console.log("Name: " + emp.name);
  12.   if ("privileges" in emp) {
  13.     console.log("Privileges: " + emp.privileges);
  14.   }
  15.   if ("startDate" in emp) {
  16.     console.log("Start Date: " + emp.startDate);
  17.   }
  18. }

消除错误提示

  1. interface Bird {
  2.     fly: boolean;
  3.   sing: () => {};
  4. }
  6. interface Dog {
  7.     fly: boolean;
  8.   bark: () => {};
  9. }
  11. function trainAnial(animal: Bird | Dog) {
  12.   if('sing' in animal) {
  13.     animal.sing()
  14.   }
  15. }

4.2 typeof 关键字

  1. function padLeft(value: string, padding: string | number) {
  2.   if (typeof padding === "number") {
  3.       return Array(padding + 1).join(" ") + value;
  4.   }
  5.   if (typeof padding === "string") {
  6.       return padding + value;
  7.   }
  8.   throw new Error(`Expected string or number, got '${padding}'.`);
  9. }

typeof 类型保护只支持两种形式：typeof v === "typename" 和 typeof v !== typename，"typename" 必须是 "number"， "string"， "boolean" 或 "symbol"。 但是 TypeScript 并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型保护。

消除错误提示

  1. function add(x: string | number, y: string | number) {
  2.     if (typeof x === 'string' || typeof y === 'string') {
  3.             return `${x}${y}`
  4.       }
  5.   return x + y
  6. }

4.3 instanceof 关键字

  1. interface Padder {
  2.   getPaddingString(): string;
  3. }
  4. class SpaceRepeatingPadder implements Padder {
  5.   constructor(private numSpaces: number) {}
  6.   getPaddingString() {
  7.     return Array(this.numSpaces + 1).join(" ");
  8.   }
  9. }
  10. class StringPadder implements Padder {
  11.   constructor(private value: string) {}
  12.   getPaddingString() {
  13.     return this.value;
  14.   }
  15. }
  16. let padder: Padder = new SpaceRepeatingPadder(6);
  17. if (padder instanceof SpaceRepeatingPadder) {
  18.   // padder的类型收窄为 'SpaceRepeatingPadder'
  19. }

消除错误提示

  1. class NumberObj {
  2.     count: number
  3. }
  5. function add(x: object | NumberObj, y: object | NumberObj) {
  6.     if (x instanceof NumberObj && y instanceof NumberObj) {
  7.             return x.count + y.count
  8.       }
  9.   return 0
  10. }

4.4 自定义类型保护的类型谓词

  1. function isNumber(x: any): x is number {
  2.   return typeof x === "number";
  3. }
  4. function isString(x: any): x is string {
  5.   return typeof x === "string";
  6. }

联合类型和类型别名

5.1 联合类型

联合类型通常与 null 或 undefined 一起使用：

  1. const sayHello = (name: string | undefined) => {
  2.   /* ... */
  3. };

例如，这里 name 的类型是 string | undefined 意味着可以将 string 或 undefined 的值传递给sayHello 函数。

  1. sayHello("Semlinker");
  2. sayHello(undefined);

通过这个示例，你可以凭直觉知道类型 A 和类型 B 联合后的类型是同时接受 A 和 B 值的类型。

5.2 可辨识联合

TypeScript 可辨识联合（Discriminated Unions）类型，也称为代数数据类型或标签联合类型。它包含 3 个要点：可辨识、联合类型和类型守卫。
这种类型的本质是结合联合类型和字面量类型的一种类型保护方法。如果一个类型是多个类型的联合类型，且多个类型含有一个公共属性，那么就可以利用这个公共属性，来创建不同的类型保护区块。

1.可辨识
可辨识要求联合类型中的每个元素都含有一个单例类型属性，比如：

  1. enum CarTransmission {
  2.   Automatic = 200,
  3.   Manual = 300
  4. }
  5. interface Motorcycle {
  6.   vType: "motorcycle"; // discriminant
  7.   make: number; // year
  8. }
  9. interface Car {
  10.   vType: "car"; // discriminant
  11.   transmission: CarTransmission
  12. }
  13. interface Truck {
  14.   vType: "truck"; // discriminant
  15.   capacity: number; // in tons
  16. }

在上述代码中，我们分别定义了 Motorcycle、 Car 和 Truck 三个接口，在这些接口中都包含一个 vType 属性，该属性被称为可辨识的属性，而其它的属性只跟特性的接口相关。

2.联合类型
基于前面定义了三个接口，我们可以创建一个 Vehicle 联合类型：

  1. type Vehicle = Motorcycle | Car | Truck;

现在我们就可以开始使用 Vehicle 联合类型，对于 Vehicle 类型的变量，它可以表示不同类型的车辆。

3.类型守卫
下面我们来定义一个 evaluatePrice 方法，该方法用于根据车辆的类型、容量和评估因子来计算价格，具体实现如下：

  1. const EVALUATION_FACTOR = Math.PI; 
  2. function evaluatePrice(vehicle: Vehicle) {
  3.   return vehicle.capacity * EVALUATION_FACTOR;
  4. }
  5. const myTruck: Truck = { vType: "truck", capacity: 9.5 };
  6. evaluatePrice(myTruck);

对于以上代码，TypeScript 编译器将会提示以下错误信息：

  1. Property 'capacity' does not exist on type 'Vehicle'.
  2. Property 'capacity' does not exist on type 'Motorcycle'.

原因是在 Motorcycle 接口中，并不存在 capacity 属性，而对于 Car 接口来说，它也不存在 capacity 属性。那么，现在我们应该如何解决以上问题呢？这时，我们可以使用类型守卫。下面我们来重构一下前面定义的 evaluatePrice 方法，重构后的代码如下：

  1. function evaluatePrice(vehicle: Vehicle) {
  2.   switch(vehicle.vType) {
  3.     case "car":
  4.       return vehicle.transmission * EVALUATION_FACTOR;
  5.     case "truck":
  6.       return vehicle.capacity * EVALUATION_FACTOR;
  7.     case "motorcycle":
  8.       return vehicle.make * EVALUATION_FACTOR;
  9.   }
  10. }

在以上代码中，我们使用 switch 和 case 运算符来实现类型守卫，从而确保在 evaluatePrice 方法中，我们可以安全地访问 vehicle 对象中的所包含的属性，来正确的计算该车辆类型所对应的价格。

类型别名

类型别名用来给一个类型起个新名字。

复杂对象元素

  1. let objectArr: { name: string, age: number }[] = [
  2.     {
  3.         name: 'dell',
  4.       age: 28
  5.     }
  6.   ];
  7. //   [ { name: 'dell', age: 28 } ]
  9. // 类型别名
  10. type User = { name: string, age: number };
  11. type User = { name: string; age: number };
  13. let objectArr: User [] = [
  14.     {
  15.         name: 'dell',
  16.         age: 28
  17.     }
  18.   ];
  19. //   [ { name: 'dell', age: 28 } ]

class替代类型别名

  1. class User { 
  2.     name: string;
  3.     age: number;
  4.     constructor() {
  5.         this.name = '';
  6.         this.age = 6;
  7.     }
  8. }
  10. let objectArr: User[] = [
  11.     new User(),
  12.     {
  13.         name: 'dell',
  14.         age: 28
  15.     }
  16.   ];
  17. //   [ User { name: '', age: 6 }, { name: 'dell', age: 28 } ]

用于函数参数

  1. type Message = string | string[];
  2. let greet = (message: Message) => {
  3.   // ...
  4. };

交叉类型

TypeScript 交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

  1. interface IPerson {
  2.   id: string;
  3.   age: number;
  4. }
  5. interface IWorker {
  6.   companyId: string;
  7. }
  8. type IStaff = IPerson & IWorker;
  9. const staff: IStaff = {
  10.   id: 'E1006',
  11.   age: 33,
  12.   companyId: 'EFT'
  13. };
  14. console.dir(staff)

在上面示例中，我们首先为 IPerson 和 IWorker 类型定义了不同的成员，然后通过 & 运算符定义了 IStaff 交叉类型，所以该类型同时拥有 IPerson 和 IWorker 这两种类型的成员。

校验

强校验

  • 函数参数