一文学懂 TypeScript 的类型

港控/mmm° 2022-10-01 11:42 133阅读 0赞

> 翻译：疯狂的技术宅
> 
> 原文：[2ality.com/2018/04/typ…][2ality.com_2018_04_typ]

## 你将学到什么 ##

阅读本文后，你应该能够理解以下代码的含义：

interface Array<T> {
      concat(...items: Array<T[] | T>): T[];
      reduce<U>(
        callback: (state: U, element: T, index: number, array: T[]) => U,
        firstState?: U): U;
      ···
    }
    复制代码

如果你认为这段代码非常神秘 —— 那么我同意你的意见。但是（我希望证明）这些符号还是相对容易学习的。一旦你能理解它们，就能马上全面、精确的理解这种代码，从而无需再去阅读冗长的英文说明。

## 运行代码案例 ##

TypeScript 有一个[在线运行环境][Link 1]。为了得到最全面的信息，你应该在 “Options” 菜单中打开所有选项开关。这相当于在 `--strict` 模式下运行TypeScript编译器。

## 关于类型检查的详细说明 ##

我在用 TypeScript 时总是喜欢打开 `--strict` 开关设置。没有它，程序可能会稍微好写一点，但是你也失去了静态类型检查的好处。目前此设置能够开启以下子设置：

*  `--noImplicitAny`：如果 TypeScript 无法推断类型，则必须指定它。这主要用于函数和方法的参数：使用此设置，你必须对它们进行注释。
 *  `--noImplicitThis`：如果 `this` 的类型不清楚则会给出提示信息。
 *  `--alwaysStrict`：尽可能使用 JavaScript 的严格模式。
 *  `--strictNullChecks`：`null` 不属于任何类型（除了它自己的类型，`null`），如果它是可接受的值，则必须明确指定。
 *  `--strictFunctionTypes`：对函数类型更加严格的检查。
 *  `--strictPropertyInitialization`：如果属性的值不能是 `undefined` ，那么它必须在构造函数中进行初始化。

更多信息：TypeScript 手册中的“[编译器选项][Link 2]”一章。

## 类型 ##

在本文中，我们把类型看作是一组值的集合。 JavaScript 语言（**不是TypeScript！**）有7种类型：

*  Undefined：具有唯一元素 `undefined` 的集合。
 *  Null：具有唯一元素“null”的集合。
 *  Boolean：具有两个元素 `false` 和 `true` 的集合。
 *  Number：所有数字的集合。
 *  String：所有字符串的集合。
 *  Symbol：所有符号的集合。
 *  Object：所有对象的集合（包括函数和数组）。

所有这些类型都是 *dynamic*：可以用在运行时。

TypeScript 为 JavaScript 带来了额外的层：*静态类型*。这些仅在编译或类型检查源代码时存在。每个存储位置（变量或属性）都有一个静态类型，用于预测其动态值。类型检查可确保这些预测能够实现。还有很多可以进行 *静态* 检查（不运行代码）的东西。例如，如果函数 `f(x)` 的参数 `x` 是静态类型 `number`，则函数调用 `f('abc')` 是非法的，因为参数 `'abc'` 是错误的静态类型。

## 类型注释 ##

变量名后的冒号开始 *类型注释*：冒号后的*类型签名*用来描述变量可以接受的值。例如以代码告诉 TypeScript 变量 “x” 只能存储数字：

let x: number;
    复制代码

你可能想知道用 `undefined` 去初始化 `x` 是不是违反了静态类型。 TypeScript 不会允许这种情况出现，因为在为它赋值之前不允许操作 `x`。

## 类型推断 ##

即使在 TypeScript 中每个存储位置都有静态类型，你也不必总是明确的去指定它。 TypeScript 通常可以对它的类型进行推断。例如如果你写下这行代码：

let x = 123;
    复制代码

然后 TypeScript 会推断出 `x` 的静态类型是 `number`。

## 类型描述 ##

在类型注释的冒号后面出现的是所谓的类型表达式。这些范围从简单到复杂，并按如下方式创建。

基本类型是有效的类型表达式：

*  对应 JavaScript 动态类型的静态类型：
    
     *  `undefined`, `null`
     *  `boolean`, `number`, `string`
     *  `symbol`
     *  `object`
     *  注意：值 `undefined` 与类型 `undefined`（取决于所在的位置）
 *  TypeScript 的特定类型：
    
     *  `Array`（从技术上讲不是 JS 中的类型）
     *  `any`（所有值的类型）
     *  等等其他类型

请注意，“`undefined`作为值“ 和 ”`undefined`作为类型” 都写做 `undefined`。根据你使用它的位置，被解释为值或类型。 `null` 也是如此。

你可以通过*类型运算符*对基本类型进行组合的方式来创建更多的类型表达式，这有点像使用运算符 *union*（`∪`）和intersection（`∩`）去合并集合。

下面介绍 TypeScript 提供的一些类型运算符。

## 数组类型 ##

数组在 JavaScript 中扮演以下两个角色（有时是两者的混合）：

*  列表：所有元素都具有相同的类型。数组的长度各不相同。
 *  元组：数组的长度是固定的。元素不一定具有相同的类型。

### 数组作为列表 ###

数组 `arr` 被用作列表有两种方法表示 ，其元素都是数字：

let arr: number[] = [];
    let arr: Array<number> = [];
    复制代码

通常如果存在赋值的话，TypeScript 就可以推断变量的类型。在这种情况下，实际上你必须帮它解决类型问题，因为在使用空数组时，它无法确定元素的类型。

稍后我们将回到尖括号表示法（`Array<number>`）。

### 数组作为元组 ###

如果你想在数组中存储二维坐标点，那么就可以把这个数组当作元组去用。看上去是这个样子：

let point: [number, number] = [7, 5];
    复制代码

在这种情况下，你不需要类型注释。

另外一个例子是 `Object.entries(obj)` 的返回值：一个带有一个 \[key，value\] 对的数组，它用于描述 `obj` 的每个属性。

> Object.entries({a:1, b:2})
    [ [ 'a', 1 ], [ 'b', 2 ] ]
    复制代码

`Object.entries()` 的返回值类型是：

Array<[string, any]>
    复制代码

## 函数类型 ##

以下是函数类型的例子：

(num: number) => string
    复制代码

这个类型是一个函数，它接受一个数字类型参数并且返回值为字符串。在类型注释中使用这种类型（`String` 在这里是个函数）的例子：

const func: (num: number) => string = String;
    复制代码

同样，我们一般不会在这里使用类型注释，因为 TypeScript 知道 `String` 的类型，因此可以推断出 `func` 的类型。

以下代码是一个更实际的例子：

function stringify123(callback: (num: number) => string) {
      return callback(123);
    }
    复制代码

由于我们使用了函数类型来描述 `stringify123()` 的参数 `callback`，所以TypeScript 拒绝以下函数调用。

f(Number);
    复制代码

但它接受以下函数调用：

f(String);
    复制代码

### 函数声明的返回类型 ###

对函数的所有参数进行注释是一个很好的做法。你还可以指定返回值类型（不过 TypeScript 非常擅长去推断它）：

function stringify123(callback: (num: number) => string): string {
      const num = 123;
      return callback(num);
    }
    复制代码

#### 特殊返回值类型 `void` ####

`void` 是函数的特殊返回值类型：它告诉 TypeScript 函数总是返回 `undefined`（显式或隐式）：

function f1(): void { return undefined } // OK
    function f2(): void { } // OK
    function f3(): void { return 'abc' } // error
    复制代码

### 可选参数 ###

标识符后面的问号表示该参数是可选的。例如：

function stringify123(callback?: (num: number) => string) {
      const num = 123;
      if (callback) {
        return callback(num); // (A)
      }
      return String(num);
    }
    复制代码

在 `--strict` 模式下运行 TypeScript 时，如果事先检查时发现 `callback` 没有被省略，它只允许你在 A 行进行函数调用。

#### 参数默认值 ####

TypeScript支持 [ES6 参数默认值][ES6]：

function createPoint(x=0, y=0) {
      return [x, y];
    }
    复制代码

默认值可以使参数可选。通常可以省略类型注释，因为 TypeScript 可以推断类型。例如它可以推断出 `x` 和 `y` 都是 `number` 类型。

如果要添加类型注释，应该这样写：

function createPoint(x:number = 0, y:number = 0) {
      return [x, y];
    }
    复制代码

### rest 类型 ###

你还可以用 [ES6 rest operator ][ES6 rest operator]进行 TypeScript 参数定义。相应参数的类型必须是数组：

function joinNumbers(...nums: number[]): string {
        return nums.join('-');
    }
    joinNumbers(1, 2, 3); // '1-2-3'
    复制代码

## Union ##

在JavaScript中，有时候变量会是有几种类型之中的一种。要描述这些变量，可以使用 *union types*。例如，在下面的代码中，`x` 是 `null` 类型或 `number` 类型：

let x = null;
    x = 123;
    复制代码

`x` 的类型可以描述为 `null | number`：

let x: null|number = null;
    x = 123;
    复制代码

类型表达式 `s | t` 的结果是类型 `s` 和 `t` 在集合理论意义上的联合（正如我们之前看到的那样，两个集合）。

下面让我们重写函数 `stringify123()`：这次我们不希望参数 `callback` 是可选的。应该总是调用它。如果调用者不想传入一个函数，则必须显式传递 `null`。实现如下。

function stringify123(
      callback: null | ((num: number) => string)) {
      const num = 123;
      if (callback) { // (A)
        return callback(123); // (B)
      }
      return String(num);
    }
    复制代码

请注意，在行 B 进行函数调用之前，我们必须再次检查 `callback` 是否真的是一个函数（行A）。如果没有检查，TypeScript 将会报告错误。

### Optional 与 `undefined|T` ###

类型为 `T` 的可选参数和类型为 `undefined|T` 的参数非常相似。 （另外对于可选属性也是如此。）

主要区别在于你可以省略可选参数：

function f1(x?: number) { }
    f1(); // OK
    f1(undefined); // OK
    f1(123); // OK
    复制代码

But you can’t omit parameters of type 但是你不能省略 `undefined|T` 类型的参数：

function f2(x: undefined | number) { }
    f2(); // error
    f2(undefined); // OK
    f2(123); // OK
    复制代码

### 值 `null` 和 `undefined` 通常不包含在类型中 ###

在许多编程语言中，`null` 是所有类型的一部分。例如只要 Java 中的参数类型为 `String`，就可以传递 `null` 而Java 不会报错。

相反，在TypeScript中，`undefined` 和 `null` 由单独的不相交类型处理。如果你想使它们生效，必须要有一个类型联合，如 `undefined|string` 和 `null|string`。

## 对象 ##

与Arrays类似，对象在 JavaScript 中扮演两个角色（偶尔混合和/或更加动态）：

*  记录：在开发时已知的固定数量的属性。每个属性可以有不同的类型。
 *  字典：在开发时名称未知的任意数量的属性。所有属性键（字符串和/或符号）都具有相同的类型，属性值也是如此。

我们将在本文章中忽略 object-as-dictionaries。顺便说一句，无论如何，map 通常是比字典的更好选择。

### 通过接口描述 objects-as-records ###

接口描述 objects-as-records 。例如：

interface Point {
      x: number;
      y: number;
    }
    复制代码

TypeScript 类型系统的一大优势在于它的*结构上*，而不是在*命名*上。也就是说，接口 `Point` 能够匹配适当结构的所有对象：

function pointToString(p: Point) {
      return `(${p.x}, ${p.y})`;
    }
    pointToString({x: 5, y: 7}); // '(5, 7)'
    复制代码

相比之下，Java 的标称类型系统需要类来*实现*接口。

### 可选属性 ###

如果可以省略属性，则在其名称后面加上一个问号：

interface Person {
      name: string;
      company?: string;
    }
    复制代码

### 方法 ###

接口内还可以包含方法：

interface Point {
      x: number;
      y: number;
      distance(other: Point): number;
    }
    复制代码

## 类型变量和泛型类型 ##

使用静态类型，可以有两个级别：

*  值存在于*对象级别*。
 *  类型存在于*元级别*。

同理：

*  普通变量定义在对象级别之上。
 *  *类型变量*存在于元级别之上。它们是值为类型的变量。

普通变量通过 `const`，`let` 等引入。类型变量通过尖括号（ `<>` ）引入。例如以下代码包含类型变量 `T`，通过 `<T>` 引入。

interface Stack<T> {
      push(x: T): void;
      pop(): T;
    }
    复制代码

你可以看到类型参数 `T` 在 `Stack` 的主体内出现两次。因此，该接口可以直观地理解如下：

*  `Stack` 是一堆值，它们都具有给定的类型 `T`。每当你提到 `Stack` 时，必须写 `T`。接下来我们会看到究竟该怎么用。
 *  方法 `.push()` 接受类型为 `T` 的值。
 *  方法 `.pop()` 返回类型为 `T` 的值。

如果使用 `Stack`，则必须为 `T` 指定一个类型。以下代码显示了一个虚拟栈，其唯一目的是匹配接口。

const dummyStack: Stack<number> = {
      push(x: number) {},
      pop() { return 123 },
    };
    复制代码

### 例子：map ###

map 在 TypeScript 中的定义。例如：

const myMap: Map<boolean,string> = new Map([
      [false, 'no'],
      [true, 'yes'],
    ]);
    复制代码

### 函数的类型变量 ###

函数（和方法）也可以引入类型变量：

function id<T>(x: T): T {
      return x;
    }
    复制代码

你可以按以下方式使用此功能。

id<number>(123);
    复制代码

由于类型推断，还可以省略类型参数：

id(123);
    复制代码

### 传递类型参数 ###

函数可以将其她的类型参数传给接口、类等：

function fillArray<T>(len: number, elem: T) {
      return new Array<T>(len).fill(elem);
    }
    复制代码

类型变量 `T` 在这段代码中出现三次：

*  `fillArray<T>`：引入类型变量
 *  `elem:T`：使用类型变量，从参数中选择它。
 *  `Array<T>`：将 `T` 传递给 `Array` 的构造函数。

这意味着：我们不必显式指定`Array<T>`的类型 `T` —— 它是从参数 `elem`中推断出来的：

const arr = fillArray(3, '*');
      // Inferred type: string[]
    复制代码

## 总结 ##

让我们用前面学到的知识来理解最开始看到的那段代码：

这是一个Array的接口，其元素类型为 `T`，每当使用这个接口时必须填写它：

*  方法`.concat()`有零个或多个参数（通过 rest 运算符定义）。其中每一个参数中都具有类型 `T[]|T`。也就是说，它是一个 `T` 类型的数组或是一个 `T` 值。
 *  方法`.reduce()` 引入了自己的类型变量 `U`。 `U` 表示以下实体都具有相同的类型（你不需要指定，它是自动推断的）：
    
     *  Parameter `state` of `callback()` (which is a function)
 *  `state` 是 `callback()` 的参数（这是一个函数）
 *  Result of `callback()`
 *  `callback()`的返回
 *  `.reduce()`的可选参数 `firstState`
 *  Result of `.reduce()`
 *  `.reduce()`的返回

`callback` 还将获得一个 `element` 参数，其类型与 Array 元素具有相同的类型 `T`，参数 `index` 是一个数字，参数 `array` 是 `T` 的值。

## 扩展阅读 ##

*  书籍（免费在线阅读）：“[Exploring ES6][]”
 *  ECMAScript规范中的“[ECMAScript语言类型][ECMAScript]”。
 *  “[TypeScript 手册][TypeScript]”：写得非常好，并解释了TypeScript支持的各种其他类型和类型的运算符。
 *  GitHub 上有 [完整 ECMAScript 标准库的类型定义][ECMAScript 1]。这是练习类型符号的简单方法。

## 欢迎关注京程一灯公众号：【京程一灯】，获取更多前端干货。 ##

转载于:https://juejin.im/post/5c8f6917f265da612254a9d1

[2ality.com_2018_04_typ]: https://link.juejin.im?target=http%3A%2F%2F2ality.com%2F2018%2F04%2Ftype-notation-typescript.html
[Link 1]: https://link.juejin.im?target=http%3A%2F%2Fwww.typescriptlang.org%2Fplay%2F
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fwww.typescriptlang.org%2Fdocs%2Fhandbook%2Fcompiler-options.html
[ES6]: https://link.juejin.im?target=http%3A%2F%2Fexploringjs.com%2Fes6%2Fch_parameter-handling.html%23sec_parameter-default-values
[ES6 rest operator]: https://link.juejin.im?target=http%3A%2F%2Fexploringjs.com%2Fes6%2Fch_parameter-handling.html%23sec_rest-parameters
[Exploring ES6]: https://link.juejin.im?target=http%3A%2F%2Fexploringjs.com%2Fes6%2F
[ECMAScript]: https://link.juejin.im?target=https%3A%2F%2Ftc39.github.io%2Fecma262%2F%23sec-ecmascript-language-types
[TypeScript]: https://link.juejin.im?target=http%3A%2F%2Fwww.typescriptlang.org%2Fdocs%2Fhandbook%2Fbasic-types.html
[ECMAScript 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FMicrosoft%2FTypeScript%2Fblob%2Fmaster%2Flib%2F