探索 TypeScript 类型注解 - 类型编程

时间 2020-01-15

标签探索 typescript 类型注解编程繁體版

原文原文链接

Exploring TypeScript Type Annotations - Type Programminghtml

本文由 WowBar 团队首发于 GitHubgit

做者: zhilidaligithub

欢迎来到 《探索 TypeScript 类型注解》 系列教程。算法

上一篇介绍了 TS 的高级类型。本篇将前面的知识点融会贯通，将对类型的探索提高一个层次：从类型层面进行编程。typescript

类型编程

首先，咱们回顾一下前几节对类型的探索。编程

经过数据类型，咱们了解到 TS 支持的数据类型。
- 支持 JS 数据类型。
- 新增一些数据类型。
经过自定义类型，咱们了解到如何声明或命名一个类型。
- 接口， interface 来声明各类复杂数据类型。
- 类型别名， type 对类型进行命名。
- 泛型，<T> 如同 JS 中函数将类型做为参数传递。
经过类型检查，咱们了解到类型与 JS 之间的各类交互。
- 类型推断，经过 JS 的值推断出相应的类型。
- 类型断言，直接对 JS 中的值指定一个类型。
- 类型兼容，由类型之间的关系反映出 JS 值之间的关系。
- 类型保护，经过 JS 中的操做符来反映出精确的类型。
经过高级类型，咱们了解到 TS 提供的各类类型操做符。
- 交叉类型，使用类型操做符 &
- 联合类型，使用类型操做符 ｜
- 索引类型，使用类型操做符 keyof，T[K]
- 映射类型，使用类型操做符 in
- 条件类型，使用类型操做符 T extends U ? X : Y infer
- 另外还有用于类型保护的类型谓词中的 is 操做符以及上面所介绍的 typeof

根据 TS 提供的 数据类型 以及声明的自定义类型，结合高级类型中的 操做符 能够对类型进行各类运算 (高级类型本质上就是各类操做符表达式)。数据结构

再加上具备函数功能的泛型，能够对类型的运算进行封装、复用、组合。要知道函数是 JS 中最强大的武器，谁说“类”来着，算了，好累，我还要(搬砖)拯救世界。还要知道，TS 没有采用传统面向对象语言使用的名义类型，而是基于偏向于函数式编程的结构类型，(JS 是多范式编程语言)。编程语言

到此为止，咱们已经具有了对类型进行编程的各类工具 (程序 = 数据结构 + 算法)，接下来各位童鞋就能够发挥无穷的智慧了。函数式编程

童鞋请留步！俗话说吃人嘴短，拿人手软，请先让巨硬(~~微软大大~~)炫个富。下面介绍 TypeScript 官方标准库中封装的实用工具类型。函数

实用工具类型

TypeScript 提供的实用工具类型用来实现常见的类型转换，这些类型工具函数是全局可见的。

Extract，Exclude，NonNullable

Extract<T, U> ：从 T 中提取能够赋值给 U 的类型
Exclude<T, U> ：从 T 中排除能够赋值给 U 的类型
NonNullable<T> ：从 T 中排除 null 和 undefined

使用示例

type foo = Extract<number | string, string>; // string
type bar = Exclude<number | string, string>; // number
type baz = NonNullable<number | string | null | undefined>; // string | number
复制代码

具体实现

// 主要使用条件类型 `T extends U ? X : Y` 实现
type Extract<T, U> = T extends U ? T : never;
type Exclude<T, U> = T extends U ? never : T;
type NonNullable<T> = T extends null | undefined ? never : T;
复制代码

Partial, Require, Readonly

Partial<T>：将 T 中的全部属性设置为可选
Require<T>：将 T 中的全部属性设置为必选
Readonly<T>：将 T 中的全部属性设置为只读

使用示例

interface Type { a: number, b?: string };
let foo: Partial<Type> = { b: 'b' };
let bar: Required<Type> = { a: 1 }; // Error
let baz: Readonly<Type> = { a: 1 };
baz.a = 2; // Error
复制代码

具体实现

// 主要使用映射类型 `[K in T]: Type` 及索引类型 `keyof T`、`T[P]` 实现
type Partial<T> = { [P in keyof T]?: T[P] };
type Require<T> = { [P in keyof T]-?: T[P] }; // 注意这里的 `-?`
type Readonly<T> = { readonly [P in keyof T]: T[p] };
复制代码

TypeScript 标准库中提供了许多实用的工具类型，并且随着 TypeScript 不断更新迭代，会有更多的实用工具类型加入到标准库中，此处不在重复介绍(提示：实用工具很实用)，详情请移步官方手册，手册中给出了详细的使用示例。对于这些工具类型的具体实现，请移步官方仓库的 lib。

typeof

在 TS 中，还能够使用 typeof 来获取变量的类型。

let foo: number = 3;
type bar = typeof foo; // 至关于 type bar = number
复制代码

extends

前面的章节中多处使用了 extends 关键字。以下

原生 JS 中类的继承

class A { a: number }
class B extends A { b: string } // B 继承 A
let a: A = new A();
let b: B = new B();

a = b; // Ok, A = B 少兼容多，子类兼容超类
复制代码

接口继承

interface A { a: number }
interface B extends A { b: string }
let a: A = { a: 1 };
let b: B = { b: 'b', a: 1 };

a = b; // Ok, A = B
复制代码

泛型约束

interface A { a: number }

let foo: <B extends A>(arg: B) => void;
foo({ a: 1, b: 2});
复制代码

条件类型

interface A { a: number }
interface B { a: number, b: string }
type E = B extends A ? true : false;
// type E = true
复制代码

汇总以下

类的继承: class SubClass extends SupClass
接口继承：interface SubType extends SupType {}
泛型约束：<T extends U>
条件类型：T extends U ? X : Y

以上均有共同的形式 Sub extends Sup

从 extends 关键字的语义：它们之间属于继承关系，即子类(型)继承超类(型)。
从类型兼容性角度：超类型兼容子类型，即子类型能够赋给超类型。
从功能上：
- 类和接口中的 extends 用来定义，可有多个超类 Sup，中间用 , 分割。
- 泛型约束和条件类型中的 extends 用来检测兼容性，即 Sup 是否兼容 Sub