Understanding TypeScript’s type notation

这篇博文快速介绍 TypeScript 静态类型的标注。

你将学习什么

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

1
2
3
4
5
6
7
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 有一个在线编译。 为了获得最全面的检查，应该打开 “option” 菜单中的所有内容。 这相当于在 –strict 模式下运行TypeScript编译器。

设置全部的类型检查

我总是使用 TypeScript 以最全面的设置 –strict。 没有它，程序的编写会变得相对容易些，但是你也会失去静态类型检查的许多好处。 目前，此设置启用以下子设置：

  • –noImplicitAny: 如果 TypeScript 无法推断出某种类型，说明你没有启用这个选项。 这主要适用于函数和方法的参数：使用此设置，你就必须标注它们的类型。
  • –noImplicitThis: 如果这个类型不明确，提示警告。
  • –alwaysStrict: 尽可能使用 JavaScript 严格模式。
  • –strictNullChecks: null 不是任何类型的一部分（除了它自己的类型，null），并且如果它是可接受的值，则必须明确给值。
  • –strictFunctionTypes: 强化函数类型检查。
  • –strictPropertyInitialization: 如果某个属性的值未定义，那么它必须在构造函数中初始化。

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

类型

在这篇博文中，类型是一组值。 JavaScript 语言（不是TypeScript！）有7种类型：

  • Undefined: 元素为未定义的集合。
  • Null: 元素为 null 的集合。
  • Boolean: 元素为 false 或 true 的集合。
  • Number: 元素为数字的集合。
  • String: 元素为字符串的集合。
  • Symbol: 元素为 symbols 的集合。
  • Object: 元素为对象（包括函数和数组）的集合.

所有这些类型都是动态的：您可以在运行时使用它们。

TypeScript 在 JavaScript 基础上增加了一层：静态类型。它只存在于编译的时候或者源代码类型检查的时候。每一个有静态类型的储存（变量或者属性）地方都可以预知它的值。类型检查确保实现类型推断，不用运行代码就能进行静态类型检查。举个例子，如果函数f（x）的参数x具有静态数字类型，则函数调用f（’abc’）是非法的，因为参数’abc’是错误的静态类型参数。

类型标注

类型标注在变量的冒号后面。冒号后面的静态类型标注描述了这个变量可以有什么值。下面一个例子表示这个变量只能储存数字类型。

1
let x: number;

你可能想知道如果 x 没有被初始化的时候是不是可以通过静态类型检查。对于这个问题， TypeScript 在给它赋值之前不会让你读取 x 。

类型推断

在 TypeScript 中，即使所有变量你都写静态类型，但你不需要全部明确写它的静态类型。 TypeScript 经常可以推断出它。 例如，如果你写

1
let x = 123;

然后TypeScript推断x具有数字静态类型。

描述类型

类型表达式在类型标注的冒号之后出现。 这些范围从简单到复杂，创建如下

合法的类型表达式有基本类型：

  • JavaScript 动态类型的静态类型：undefined，null，boolean，number，string，symbol，object
  • TypeScript 特定类型：any（所有值的类型）等

注意，“未定义为值”和“未定义为类型”都被定义为未定义。 根据你使用它的地方，它作为一个值或者一个类型。 null也是一样。

可以通过类型运算符组合基本类型来创建更多类型表达式，类型运算符与运算符 union（∪） 和 intersection（∩） 组合类似。

接下来解释 TypeScript 提供的一些类型运算符。

数组作为列表

有两种方法可以表示 Array arr 其元素都是数字的列表：

1
2
let arr: number[] = [];
let arr: Array<number> = [];

通常情况下，如果有给值，TypeScript可以推断变量的类型。 在这种情况下，你实际上必须明确标注类型，因为对于空数组，它无法确定元素的类型。

稍后，讲解尖括号表示法（Array）。

数组作为元组

如果您在数组中存储两个点，那么你将该数组用作元组。 这看起来如下：

1
let point: [number, number] = [7, 5];

在这种情况下，不需要类型注释。
元组的另一个例子是 Object.entries（obj） 的结果：对于 obj 的每个属性都有一个 [key，value] 对的数组。

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

Object.entries() 的类型是：

1
Array<[string, any]>

函数类型

这是一个函数类型的例子：

1
(num: number) => string

该类型接受单个数字类型参数，和返回字符串类型的值。 让我们在类型注释中使用这个类型（字符串在这里用作函数）：

1
const func: (num: number) => string = String;

同样，我们通常不会在这里使用类型注释，因为 TypeScript 知道 String 的类型，因此可以推断出 func 的类型。
下面的代码是一个更实用的例子：

1
2
3
function stringify123(callback: (num: number) => string) {
  return callback(123);
}

我们使用函数类型来描述 stringify123() 的回调函数。 由于此类型注释，TypeScript 拒绝以下函数调用。

1
f(String);

但它接受以下函数调用：

1
f(Number);

（原文在这可能顺序写反了）

函数结果类型声明

标注函数的所有参数类型是一种很好的实践。 你也可以指定结果类型（但 TypeScript 很适合推断它）：

1
2
3
4
function stringify123(callback: (num: number) => string): string {
  const num = 123;
  return callback(num);
}

特殊结果类型 void

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

1
2
3
function f1(): void { return undefined } // OK
function f2(): void { } // OK
function f3(): void { return 'abc' } // error

可选参数

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

1
2
3
4
5
6
7
function stringify123(callback?: (num: number) => string) {
  const num = 123;
  if (callback) {
    return callback(num); // (A)
  }
  return String(num);
}

如果您在 –strict 模式下运行 TypeScript ，则会在检查回调没有被省略的情况下让你在 A 行中进行函数调用。

参数默认值

TypeScript 支持 ES6参数默认值：

1
2
3
function createPoint(x=0, y=0) {
  return [x, y];
}

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

如果你想添加类型注释，那看起来如下。

1
2
3
function createPoint(x:number = 0, y:number = 0) {
  return [x, y];
}

剩余类型

您还可以使用 ES6 rest 运算符来处理 TypeScript 参数定义。 相应参数的类型必须是Array：

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

联合类型

在JavaScript中，变量常常是几种类型之一。 要描述这些变量，你可以使用联合类型。
例如，在以下代码中，x 的类型为 null 或类型 number ：

1
2
let x = null;
x = 123;

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

1
2
let x: null|number = null;
x = 123;

类型表达式 s | t 的结果是 类型s 和 t 的集合论联合（正如我们前面所看到的那样，这两个集合）。

让我们重写函数 stringify123() ：这一次，我们不希望参数回调是可选的。 应该总是传递该参数。 如果调用者不想提供函数，他们必须显式传递null。 这是实现如下：

1
2
3
4
5
6
7
8
function stringify123(
  callback: null | ((num: number) => string)) {
  const num = 123;
  if (callback) { // (A)
    return callback(123); // (B)
  }
  return String(num);
}

注意，实际上我们必须检查回调是否是一个函数（A行），然后才能在B行进行函数调用。如果没有检查，TypeScript将报告错误。

？ 与 undefined| T

类型T的可选参数？ 和类型为 undefined | T 的参数非常相似。 （顺便说一句，对于可选属性也是如此。）

主要区别是可以省略可选参数：

1
2
3
4
function f1(x?: number) { }
f1(); // OK
f1(undefined); // OK
f1(123); // OK

但是你不能省略类型为 undefined| T 的参数：

1
2
3
4
function f1(x?: number) { }
f1(); // OK
f1(undefined); // OK
f1(123); // OK

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

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

相比之下，在 TypeScript 中，undefined 和 null 由不同的类型处理。 如果你想跟上述一样，你需要一个类型联合，比如 undefined | number 和 null | number 。

对象类型

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

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

我们将在此文中忽略对象作为词典。 另外，无论如何，Maps 对于字典来说通常是更好的选择。

通过 interfaces 描述对象类型作为记录

interfaces 描述对象类型。 例如：

1
2
3
4
interface Point {
  x: number;
  y: number;
}

TypeScript的类型系统的一大优点是它是结构化的，而不是字面化。 也就是说， interface 匹配具有适当结构的所有对象：

1
2
3
4
function pointToString(p: Point) {
  return `(${p.x}, ${p.y})`;
}
pointToString({x: 5, y: 7}); // '(5, 7)'

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

可选属性

如果一个属性可以被省略，你在变量后面加一个问号：

1
2
3
4
interface Person {
  name: string;
  company?: string;
}

函数

Interfaces 也可包含函数：

1
2
3
4
5
interface Point {
  x: number;
  y: number;
  distance(other: Point): number;
}

类型变量和泛型类型

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

  • 对象级别
  • 元类型级别

相似于

  • 对象储存正常变量
  • 描述类型的变量，也是值类型的变量

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

1
2
3
4
interface Stack<T> {
  push(x: T): void;
  pop(): T;
}

你可以看到类型 参数T 在 Stack中 出现两次。 所以这个界面可以直观地理解如下：

  • Stack 是一堆所有具有给定 类型T 的值。每当提到 Stack 时，您必须填写T. 接下来我们将看到如何。
  • push 函数 接受 T类型参数
  • pop 函数 返回 T类型值

如果你使用 Stack ，你就需要给定 T的值。
以下代码显示了一个虚接口 Stack ，其唯一目的是匹配接口。

1
2
3
4
const dummyStack: Stack<number> = {
  push(x: number) {},
  pop() { return 123 },
};

示例：Maps

TypeScript 定义 Map 类型。例如：

1
2
3
4
const myMap: Map<boolean,string> = new Map([
  [false, 'no'],
  [true, 'yes'],
]);

泛型函数

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

1
2
3
function id<T>(x: T): T {
  return x;
}

使用如下

1
id<number>(123);

由于类型推理，可以省略类型参数

1
id(123);

类型参数的传递

1
2
3
function fillArray<T>(len: number, elem: T) {
  return new Array<T>(len).fill(elem);
}

不必显式指定 Array 的类型T - 它是从参数 elem 推断出来的：

1
2
const arr = fillArray(3, '*');
  // Inferred type: string[]

结论

让我们用我们所学的知识来理解我们之前看到的那段代码：

1
2
3
4
5
6
7
interface Array<T> {
  concat(...items: Array<T[] | T>): T[];
  reduce<U>(
    callback: (state: U, element: T, index: number, array: T[]) => U,
    firstState?: U): U;
  ···
}

这是一个数组的 interface ，其元素的类型为 T ，我们必须在使用此 interface 时填写它们：

方法 .concat() 有零个或更多参数（通过剩余参数操作符）。他们中的每个函数有类型 T[] 或 T 。因此，它可能是类型T
的数组或者是单个 T 的值。

方法 .reduce() 引进了它自己的类型变量，U 。 U 表示以下实体全都具有相同类型（不需要指定，它会自动推断）：

  • 回调函数里的 state 参数
  • 回调函数里的结果
  • 方法 .reduce() 的可选参数 firstState
  • .reduce() 的结果

回调函数也获取一个参数 element ，其类型与数组元素的 类型T 相同，参数 index 是数字，参数 array 是 T值 。

进一步阅读

  • 书 (在线免费阅读): “Exploring ES6”
  • “ECMAScript Language Types” 在 ECMAScript 规范.
  • “TypeScript Handbook”: 一本写的很好解释了 TypeScript 支持的多种类型及类型操作。
  • TypeScript 仓库里有完整 ECMAScript 标准库的类型定义。练习类型标注的简单方法是阅读它们。

本文翻译自原文 - Understanding TypeScript’s type notation。