翻译：猖獗的手艺宅

原文：
http://2ality.com/2018/04/typ…

本文首发微信民众号：jingchengyideng
迎接关注，天天都给你推送新颖的前端手艺文章

你将学到什么

浏览本文后，你应当能够明白以下代码的寄义：

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 有一个在线运转环境。为了取得最周全的信息，你应当在 “Options” 菜单中翻开一切选项开关。这相当于在 --strict 形式下运转TypeScript编译器。

关于范例搜检的细致申明

我在用 TypeScript 时老是喜好翻开 --strict 开关设置。没有它，顺序能够会轻微好写一点，然则你也失去了静态范例搜检的优点。目前此设置能够开启以下子设置：

• --noImplicitAny：假如 TypeScript 没法揣摸范例，则必需指定它。这重要用于函数和要领的参数：运用此设置，你必需对它们举行诠释。

  • --noImplicitThis：假如 this 的范例不清楚则会给出提醒信息。
  • --alwaysStrict：尽量运用 JavaScript 的严厉形式。
  • --strictNullChecks：null 不属于任何范例（除了它本身的范例，null），假如它是可接收的值，则必需明白指定。
  • --strictFunctionTypes：对函数范例越发严厉的搜检。
  • --strictPropertyInitialization：假如属性的值不能是 undefined ，那末它必需在组织函数中举行初始化。

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

范例

在本文中，我们把范例看做是一组值的鸠合。 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 参数默认值：

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 举行 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[]

总结

让我们用前面学到的学问来明白最最先看到的那段代码：

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

这是一个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 的值。

扩大浏览

• “TypeScript 手册”：写得异常好，并诠释了TypeScript支撑的种种其他范例和范例的运算符。
• GitHub 上有 完全 ECMAScript 规范库的范例定义。这是演习范例标记的简朴要领。

本文首发微信民众号：jingchengyideng

迎接扫描二维码关注民众号，天天都给你推送新颖的前端手艺文章

迎接继承浏览本专栏别的高赞文章：

• 12个令人惊叹的CSS试验项目
• 天下顶级公司的前端口试都问些什么
• CSS Flexbox 可视化手册
• 过节很无聊？照样用 JavaScript 写一个脑力小游戏吧！
• 从设计者的角度看 React
• CSS粘性定位是如何事情的
• 一步步教你用HTML5 SVG完成动画结果
• 顺序员30岁前月薪达不到30K，该何去何从
• 7个开放式的前端口试题
• React 教程：疾速上手指南