TypeScript 快速入门

• TypeScript最重要的目的是对 JavaScript 进行静态类型校验(static typechecked)，TypeScript 通过支持 JavaScript 所有特性，并在这些特性之上加上一层 TypeScript 类型系统 (TypeScript’s type system) 来实现这一目的

TypeScript 怎么做到的呢，当你给某一变量赋值时，TypeScript 就知道他的类型了

let msg = "Hello World";
1

此时，TypeScript就知道变量 msg 为 string 类型

除此之外，TypeScript 还提供了类型声明

interface User {
  name: string;
  id: number;
}

const user: User = {
  name: "Hayes",
  id: 0,
};
1
2
3
4
5
6
7
8
9

约束类型的 interface 可以用在很多地方，比如函数（或方法）的返回值或者参数：

function getAdminUser(): User { // 定义返回值
  //...
}

function deleteUser(user: User) { // 定义参数
  // ...
}
1
2
3
4
5
6
7

TypeScript 支持 JavaScript 原生的 8 种类型 (Undefined, Null, Boolean, Number, BigInt, String, Symbol, Object) 之外，还扩展了 4 种类型：

1. any，支持任何类型
2. unknow，编写程序时不确定什么类型，留给之后去确定
3. never，表示一个从未出现过的类型
4. void，用于函数或方法的返回值

TypeScript 可以通过简单类型来构建复杂的类型，这里有两种主要的方式来组合类型：

• Union：可以声明某个类型是多个给定类型的其中之一

type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;
1
2
3

也可以直接使用

function getLength(obj: string | string[]) {
  return obj.length;
}
1
2
3

结合类型判断，可以根据给定的不同参数类型作出不同的动作

function wrapInArray(obj: string | string[]) {
  if (typeof obj === "string") {
    return [obj];
//          ^ = (parameter) obj: string
  } else {
    return obj;
  }
}
1
2
3
4
5
6
7
8

• Generics：范型为类型提供了变量

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;
1
2
3

或者

interface Backpack<Type> {
  add: (obj: Type) => void;
  get: () => Type;
}

// This line is a shortcut to tell TypeScript there is a
// constant called `backpack`, and to not worry about where it came from.
declare const backpack: Backpack<string>;

// object is a string, because we declared it above as the variable part of Backpack.
const object = backpack.get();

// Since the backpack variable is a string, you can't pass a number to the add function.
backpack.add(23);
// => Error: Argument of type 'number' is not assignable to parameter of type 'string'.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

TypeScript 拥有“鸭子类型 Duck Type”（走路像鸭子，叫声像鸭子，那么它肯定是一只鸭子）
下面例子中，虽然 point 对象并没有实现 Point 接口，但他和 Point 兼容，所以就将 point 对象确定为 Point 类型

interface Point {
  x: number;
  y: number;
}

function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}

// logs "12, 26"
const point = { x: 12, y: 26 };
logPoint(point);
1
2
3
4
5
6
7
8
9
10
11
12

不过 Duck Type 严格来说指的是在 runtime 中动态确定类型，而 TypeScript中 是静态确定类型的

参考：
TypeScript for JavaScript Programmers
Duck typing