你不知道的 TypeScript 高级技巧(实用！)

高翔，微医云服务团队前端工程师，喜欢美食，热爱技术，喜欢折腾。

前言

在 2020 年的今天，TS 已经越来越火，不管是服务端（Node.js），还是前端框架（Angular、Vue3），都有越来越多的项目使用 TS 开发，作为前端程序员，TS 已经成为一项必不可少的技能，本文旨在介绍 TS 中的一些高级技巧，提高大家对这门语言更深层次的认知。

Typescript 简介

• ECMAScript 的超集 (stage 3)
• 编译期的类型检查
• 不引入额外开销（零依赖，不扩展 js 语法，不侵入运行时）
• 编译出通用的、易读的 js 代码

Typescript = Type + ECMAScript + Babel-Lite

Typescript 设计目标: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

为什么使用 Typescript

• 增加了代码的可读性和可维护性
• 减少运行时错误，写出的代码更加安全，减少 BUG
• 享受到代码提示带来的好处
• 重构神器

基础类型

• boolean
• number
• string
• array
• tuple
• enum
• void
• null & undefined
• any & unknown
• never

any 和 unknown 的区别

• any: 任意类型
• unknown: 未知的类型

任何类型都能分配给 unknown，但 unknown 不能分配给其他基本类型，而 any 啥都能分配和被分配。

let foo: unknown

foo = true // ok
foo = 123 //ok

foo.toFixed(2) // error

let foo1: string = foo // error

let bar: any

bar = true // ok
bar = 123 //ok

foo.toFixed(2) // ok

let bar1:string  = bar // ok

可以看到，用了 any 就相当于完全丢失了类型检查，所以大家尽量少用 any，对于未知类型可以用 unknown。

unknown 的正确用法

我们可以通过不同的方式将 unknown 类型缩小为更具体的类型范围:

function getLen(value: unknown): number {
  if (typeof value === 'string') {
    // 因为类型保护的原因，此处 value 被判断为 string 类型
   return value.length
  }
  
  return 0
}

这个过程叫类型收窄（type narrowing）。

never

never 一般表示哪些用户无法达到的类型。在最新的 typescript 3.7 中，下面代码会报错:

// never 用户控制流分析
function neverReach (): never {
  throw new Error('an error')
}

const x = 2

neverReach()

x.toFixed(2)  // x is unreachable

never 还可以用于联合类型的 幺元：

type T0 = string | number | never // T0 is string | number

函数类型

几种函数类型的返回值类型写法

function fn(): number {
  return 1
}

const fn = function (): number {
  return 1
}

const fn = (): number => {
  return 1
}

const obj = {
  fn (): number {
    return 1
  }
}

在 () 后面添加返回值类型即可。

函数类型

ts 中也有函数类型，用来描述一个函数：

type FnType = (x: number, y: number) => number

完整的函数写法

let myAdd: (x: number, y: number) => number = function(x: number, y: number): number {
  return x + y
}

// 使用 FnType 类型
let myAdd: FnType = function(x: number, y: number): number {
  return x + y
}

// ts 自动推导参数类型
let myAdd: FnType = function(x, y) {
  return x + y
}

函数重载？

js因为是动态类型，本身不需要支持重载，ts为了保证类型安全，支持了函数签名的类型重载。即：

多个重载签名和一个实现签名

// 重载签名（函数类型定义）
function toString(x: string): string;
function toString(x: number): string;

// 实现签名（函数体具体实现）
function toString(x: string | number) {
  return String(x)
}

let a = toString('hello') // ok
let b = toString(2) // ok
let c = toString(true) // error

如果定义了重载签名，则实现签名对外不可见

function toString(x: string): string;

function toString(x: number): string {
  return String(x)
}

len(2) // error

实现签名必须兼容重载签名

function toString(x: string): string;
function toString(x: number): string; // error

// 函数实现
function toString(x: string) {
  return String(x)
}

重载签名的类型不会合并

// 重载签名（函数类型定义）
function toString(x: string): string;
function toString(x: number): string;

// 实现签名（函数体具体实现）
function toString(x: string | number) {
  return String(x)
}

function stringOrNumber(x): string | number {
  return x ? '' : 0
}

// input 是 string 和 number 的联合类型
// 即 string | number
const input = stringOrNumber(1)

toString('hello') // ok
toString(2) // ok
toString(input) // error

类型推断

ts 中的类型推断是非常强大，而且其内部实现也是非常复杂的。

基本类型推断：

// ts 推导出 x 是 number 类型
let x = 10

对象类型推断：

// ts 推断出 myObj 的类型：myObj: { x: number; y: string; z: boolean; }
const myObj = {
  x: 1,
  y: '2',
  z: true
}

函数类型推断：

// ts 推导出函数返回值是 number 类型
function len (str: string) {
  return str.length
}

上下文类型推断：

// ts 推导出 event 是 ProgressEvent 类型
const xhr = new XMLHttpRequest()
xhr.onload = function (event) {}

所以有时候对于一些简单的类型可以不用手动声明其类型，让 ts 自己去推断。

类型兼容性

typescript 的子类型是基于 结构子类型 的，只要结构可以兼容，就是子类型。（Duck Type）

class Point {
  x: number
}

function getPointX(point: Point) {
  return point.x
}

class Point2 {
  x: number
}

let point2 = new Point2()

getPointX(point2) // OK

java、c++ 等传统静态类型语言是基于 名义子类型 的，必须显示声明子类型关系（继承），才可以兼容。

public class Main {
  public static void main (String[] args) {
    getPointX(new Point()); // ok
    getPointX(new ChildPoint()); // ok
    getPointX(new Point1());  // error
  }

  public static void getPointX (Point point) {
    System.out.println(point.x);
  }

  static class Point {
    public int x = 1;
  }

  static class Point2 {
    public int x = 2;
  }
    
  static class ChildPoint extends Point {
    public int x = 3;
  }
}

对象子类型

子类型中必须包含源类型所有的属性和方法:

function getPointX(point: { x: number }) {
  return point.x
}

const point = {
 x: 1,
  y: '2'
}

getPointX(point) // OK

注意: 如果直接传入一个对象字面量是会报错的：

function getPointX(point: { x: number }) {
  return point.x
}

getPointX({ x: 1, y: '2' }) // error

这是 ts 中的另一个特性，叫做:  excess property check  ，当传入的参数是一个对象字面量时，会进行额外属性检查。

函数子类型

介绍函数子类型前先介绍一下逆变与协变的概念，逆变与协变并不是 TS 中独有的概念，在其他静态语言中也有相关理念。

在介绍之前，先假设一个问题，约定如下标记：

• A ≼ B 表示 A 是 B 的子类型，A 包含 B 的所有属性和方法。
• A => B 表示以 A 为参数，B 为返回值的方法。(param: A) => B

如果我们现在有三个类型 Animal 、 Dog 、 WangCai(旺财) ，那么肯定存在下面的关系：

WangCai ≼ Dog ≼ Animal // 即旺财属于狗属于动物

问题：以下哪种类型是 Dog => Dog 的子类呢?

• WangCai => WangCai
• WangCai => Animal
• Animal  => Animal
• Animal  => WangCai

从代码来看解答

class Animal {
  sleep: Function
}

class Dog extends Animal {
  // 吠
  bark: Function
}

class WangCai extends Dog {
  dance: Function
}


function getDogName (cb: (dog: Dog) => Dog) {
  const dog = cb(new Dog())
  dog.bark()
}

// 对于入参来说，WangCai 是 Dog 的子类，Dog 类上没有 dance 方法, 产生异常。
// 对于出参来说，WangCai 类继承了 Dog 类，肯定会有 bark 方法
getDogName((wangcai: WangCai) => {
  wangcai.dance()
  return new WangCai()
})

// 对于入参来说，WangCai 是 Dog 的子类，Dog 类上没有 dance 方法, 产生异常。
// 对于出参来说，Animal 类上没有 bark 方法, 产生异常。
getDogName((wangcai: WangCai) => {
  wangcai.dance()
  return new Animal()
})

// 对于入参来说，Animal 类是 Dog 的父类，Dog 类肯定有 sleep 方法。
// 对于出参来说，WangCai 类继承了 Dog 类，肯定会有 bark 方法
getDogName((animal: Animal) => {
  animal.sleep()
  return new WangCai()
})

// 对于入参来说，Animal 类是 Dog 的父类，Dog 类肯定有 sleep 方法。
// 对于出参来说，Animal 类上没有 bark 方法, 产生异常。
getDogName((animal: Animal) => {
  animal.sleep()
  return new Animal()
})

可以看到只有 Animal => WangCai 才是 Dog => Dog 的子类型，可以得到一个结论，对于函数类型来说，函数参数的类型兼容是反向的，我们称之为 逆变 ，返回值的类型兼容是正向的，称之为 协变 。

逆变与协变的例子只说明了函数参数只有一个时的情况，如果函数参数有多个时该如何区分？

其实函数的参数可以转化为 Tuple 的类型兼容性：

type Tuple1 = [string, number]
type Tuple2 = [string, number, boolean]

let tuple1: Tuple1 = ['1', 1]
let tuple2: Tuple2 = ['1', 1, true]

let t1: Tuple1 = tuple2 // ok
let t2: Tuple2 = tuple1 // error

可以看到 Tuple2 => Tuple1 ，即长度大的是长度小的子类型，再由于函数参数的逆变特性，所以函数参数少的可以赋值给参数多的（参数从前往后需一一对应），从数组的 forEach 方法就可以看出来：

[1, 2].forEach((item, index) => {
 console.log(item)
}) // ok

[1, 2].forEach((item, index, arr, other) => {
 console.log(other)
}) // error

高级类型

联合类型与交叉类型

联合类型(union type)表示多种类型的 “或” 关系

function genLen(x: string | any[]) {
  return x.length
}

genLen('') // ok
genLen([]) // ok
genLen(1) // error

交叉类型表示多种类型的 “与” 关系

interface Person {
  name: string
  age: number
}

interface Animal {
  name: string
  color: string
}

const x: Person & Animal = {
  name: 'x',
  age: 1,
  color: 'red
}

使用联合类型表示枚举

type Position = 'UP' | 'DOWN' | 'LEFT' | 'RIGHT'

const position: Position = 'UP'

可以避免使用 enum 侵入了运行时。

类型保护

ts 初学者很容易写出下面的代码：

function isString (value) {
  return Object.prototype.toString.call(value) === '[object String]'
}

function fn (x: string | number) {
  if (isString(x)) {
    return x.length // error 类型“string | number”上不存在属性“length”。
  } else {
    // .....
  }
}

如何让 ts 推断出来上下文的类型呢？

1. 使用 ts 的 is 关键词

function isString (value: unknown): value is string {
  return Object.prototype.toString.call(value) === '[object String]'
}

function fn (x: string | number) {
  if (isString(x)) {
    return x.length
  } else {
    // .....
  }
}

2. typeof 关键词

在 ts 中，代码实现中的 typeof 关键词能够帮助 ts 判断出变量的基本类型:

function fn (x: string | number) {
  if (typeof x === 'string') { // x is string
    return x.length
  } else { // x is number
    // .....
  }
}

3. instanceof 关键词

在 ts 中，instanceof 关键词能够帮助 ts 判断出构造函数的类型:

function fn1 (x: XMLHttpRequest | string) {
  if (x instanceof XMLHttpRequest) { // x is XMLHttpRequest
    return x.getAllResponseHeaders()
  } else { // x is string
    return x.length
  }
}

4. 针对 null 和 undefined 的类型保护

在条件判断中，ts 会自动对 null 和 undefined 进行类型保护:

function fn2 (x?: string) {
  if (x) {
    return x.length
  }
}

5. 针对 null 和 undefined 的类型断言

如果我们已经知道的参数不为空，可以使用 ! 来手动标记:

function fn2 (x?: string) {
  return x!.length
}

typeof 关键词

typeof 关键词除了做类型保护，还可以从实现推出类型，。

注意：此时的 typeof 是一个类型关键词，只可以用在类型语法中。

function fn(x: string) {
  return x.length
}

const obj = {
  x: 1,
  y: '2'
}

type T0 = typeof fn // (x: string) => number
type T1 = typeof obj // {x: number; y: string }

keyof 关键词

keyof 也是一个 类型关键词 ，可以用来取得一个对象接口的所有 key 值:

interface Person {
  name: string
  age: number
}

type PersonAttrs = keyof Person // 'name' | 'age'

in 关键词

in 也是一个 类型关键词, 可以对联合类型进行遍历，只可以用在 type 关键词下面。

type Person = {
  [key in 'name' | 'age']: number
}

// { name: number; age: number; }

[ ] 操作符

使用 [] 操作符可以进行索引访问，也是一个 类型关键词

interface Person {
  name: string
  age: number
}

type x = Person['name'] // x is string

一个小栗子

写一个类型复制的类型工具:

type Copy = {
  [key in keyof T]: T[key]
}

interface Person {
  name: string
  age: number
}

type Person1 = Copy

泛型

泛型相当于一个类型的参数，在 ts 中，泛型可以用在 类、接口、方法、类型别名 等实体中。

小试牛刀

function createList<T>(): T[] {
  return [] as T[]
}

const numberList = createList<number>() // number[]
const stringList = createList<string>() // string[]

有了泛型的支持，createList 方法可以传入一个类型，返回有类型的数组，而不是一个 any[]。

泛型约束

如果我们只希望 createList 函数只能生成指定的类型数组，该如何做，可以使用 extends 关键词来约束泛型的范围和形状。

type Lengthwise = {
  length: number
}

function createList<T extends number | Lengthwise>(): T[] {
  return [] as T[]
}

const numberList = createList<number>() // ok
const stringList = createList<string>() // ok
const arrayList = createList<any[]>() // ok
const boolList = createList<boolean>() // error

any[] 是一个数组类型，数组类型是有 length 属性的，所以 ok。string 类型也是有 length 属性的，所以 ok。但是 boolean 就不能通过这个约束了。

条件控制

extends 除了做约束类型，还可以做条件控制，相当于与一个三元运算符，只不过是针对 类型 的。

表达式：T extends U ? X : Y

含义：如果 T 可以被分配给 U，则返回 X，否则返回 Y。一般条件下，如果 T 是 U 的子类型，则认为 T 可以分配给 U，例如：

type IsNumber = T extends number ? true : false

type x = IsNumber<string>  // false

映射类型

映射类型相当于一个类型的函数，可以做一些类型运算，输入一个类型，输出另一个类型，前文我们举了个 Copy 的例子。

几个内置的映射类型

// 每一个属性都变成可选
type Partial = {
  [P in keyof T]?: T[P]
}

// 每一个属性都变成只读
type Readonly = {
  readonly [P in keyof T]: T[P]
}

// 选择对象中的某些属性
type Pickextends keyof T> = {
  [P in K]: T[P];
}

// ......

typescript 2.8 在 lib.d.ts 中内置了几个映射类型:

• Partial -- 将 T 中的所有属性变成可选。
• Readonly -- 将 T 中的所有属性变成只读。
• Pick -- 选择 T 中可以赋值给U的类型。
• Exclude -- 从T中剔除可以赋值给U的类型。
• Extract -- 提取T中可以赋值给U的类型。
• NonNullable -- 从T中剔除null和undefined。
• ReturnType -- 获取函数返回值类型。
• InstanceType -- 获取构造函数类型的实例类型。

所以我们平时写 TS 时可以直接使用这些类型工具：

interface ApiRes {
  code: string;
  flag: string;
  message: string;
  data: object;
  success: boolean;
  error: boolean;
}

type IApiRes = Pick'code' | 'flag' | 'message' | 'data'>

// {
//   code: string;
//   flag: string;
//   message: string;
//   data: object;
// }

extends 条件分发

对于 T extends U ? X : Y 来说，还存在一个特性，当 T 是一个联合类型时，会进行条件分发。

type Union = string | number
type isNumber = T extends number ? 'isNumber' : 'notNumber'

type UnionType = isNumber // 'notNumber' | 'isNumber'

实际上，extends 运算会变成如下形式：

(string extends number ? 'isNumber' : 'notNumber') | (number extends number ? 'isNumber' : 'notNumber')

Extract 就是基于此特性，再配合 never 幺元的特性实现的：

type Exclude = T extends K ? never : T

type T1 = Exclude<string | number | boolean, string | boolean>  // number

infer 关键词

infer 可以对运算过程中的类型进行存储，内置的ReturnType 就是基于此特性实现的：

type ReturnType = 
  T extends (...args: any) => infer R ? R : never

type Fn = (str: string) => number

type FnReturn = ReturnType // number

模块

全局模块 vs. 文件模块

默认情况下，我们所写的代码是位于全局模块下的：

const foo = 2

此时，如果我们创建了另一个文件，并写下如下代码，ts 认为是正常的：

const bar = foo // ok

如果要打破这种限制，只要文件中有 import 或者 export 表达式即可：

export const bar = foo // error

模块解析策略

Tpescript 有两种模块的解析策略：Node 和 Classic。当 tsconfig.json 中 module 设置成 AMD、System、ES2015 时，默认为 classic ，否则为 Node ，也可以使用 moduleResolution  手动指定模块解析策略。

两种模块解析策略的区别在于，对于下面模块引入来说：

import moduleB from 'moduleB'

Classic 模式的路径寻址：

/root/src/folder/moduleB.ts
/root/src/folder/moduleB.d.ts
/root/src/moduleB.ts
/root/src/moduleB.d.ts
/root/moduleB.ts
/root/moduleB.d.ts
/moduleB.ts
/moduleB.d.ts

Node 模式的路径寻址：

/root/src/node_modules/moduleB.ts
/root/src/node_modules/moduleB.tsx
/root/src/node_modules/moduleB.d.ts
/root/src/node_modules/moduleB/package.json (如果指定了"types"属性)
/root/src/node_modules/moduleB/index.ts
/root/src/node_modules/moduleB/index.tsx
/root/src/node_modules/moduleB/index.d.ts

/root/node_modules/moduleB.ts
/root/node_modules/moduleB.tsx
/root/node_modules/moduleB.d.ts
/root/node_modules/moduleB/package.json (如果指定了"types"属性)
/root/node_modules/moduleB/index.ts
/root/node_modules/moduleB/index.tsx
/root/node_modules/moduleB/index.d.ts

/node_modules/moduleB.ts
/node_modules/moduleB.tsx
/node_modules/moduleB.d.ts
/node_modules/moduleB/package.json (如果指定了"types"属性)
/node_modules/moduleB/index.ts
/node_modules/moduleB/index.tsx
/node_modules/moduleB/index.d.ts

声明文件

什么是声明文件

声明文件已 .d.ts 结尾，用来描述代码结构，一般用来为 js 库提供类型定义。

平时开发的时候有没有这种经历：当用npm安装了某些包并使用的时候，会出现这个包的语法提示，下面是 vue 的提示：

这个语法提示就是声明文件的功劳了，先来看一个简单的声明文件长啥样，这是jsonp这个库的声明文件:

type CancelFn = () => void;
type RequestCallback = (error: Error | null, data: any) => void;

interface Options {
    param?: string;
    prefix?: string;
    name?: string;
    timeout?: number;
}

declare function jsonp(url: string, options?: Options, cb?: RequestCallback): CancelFn;
declare function jsonp(url: string, callback?: RequestCallback): CancelFn;

export = jsonp;

有了这份声明文件，编辑器在使用这个库的时候就可以根据这份声明文件来做出相应的语法提示。

编辑器是怎么找到这个声明文件？

• 如果这个包的根目录下有一个index.d.ts，那么这就是这个库的声明文件了。
• 如果这个包的package.json中有types或者typings字段，那个该字段指向的就是这个包的声明文件。

上述两种都是将声明文件写在包里面的情况，如果某个库很长时间不维护了，或者作者消失了该怎么办，没关系，typescript官方提供了一个声明文件仓库，尝试使用@types前缀来安装某个库的声明文件:

npm i @types/lodash

当引入lodash的时候，编辑器也会尝试查找node_modules/@types/lodash 来为你提供lodash的语法提示。

还有一种就是自己写声明文件，编辑器会收集项目本地的声明文件，如果某个包没有声明文件，你又想要语法提示，就可以自己在本地写个声明文件：

// types/lodash.d.ts
declare module "lodash" {
  export function chunk(array: any[], size?: number): any[];
  export function get(source: any, path: string, defaultValue?: any): any;
}

如果源代码是用ts写的，在编译成js的时候，只要加上-d 参数，就能生成对应的声明文件。

tsc -d

声明文件该怎么写可以参考https://www.tslang.cn/docs/handbook/declaration-files/introduction.html

还要注意的是，如果某个库有声明文件了，编辑器就不会再关心这个库具体的代码了，它只会根据声明文件来做提示。

扩展原生对象

可能写过 ts 的小伙伴有这样的疑惑，我该如何在 window 对象上自定义属性呢？

window.myprop = 1 // error

默认的，window 上是不存在 myprop 这个属性的，所以不可以直接赋值，当然，可以使用方括号赋值语句，但是 get 操作时也必须用 [] ，并且没有类型提示。

window['myprop'] = 1 // OK

window.myprop  // 类型“Window & typeof globalThis”上不存在属性“myprop”
window['myprop'] // ok，但是没有提示，没有类型

此时可以使用声明文件扩展其他对象，在项目中随便建一个xxx.d.ts：

// index.d.ts
interface Window {
  myprop: number
}

// index.ts
window.myprop = 2  // ok

也可以在模块内部扩展全局对象：

import A from 'moduleA'

window.myprop = 2

declare global {
  interface Window {
    myprop: number
  }
}

扩展其他模块

如果使用过 ts 写过 vue  的同学，一定都碰到过这个问题，如何扩展 vue.prototype 上的属性或者方法？

import Vue from 'vue'

Vue.prototype.myprops = 1

const vm = new Vue({
  el: '#app'
})

// 类型“CombinedVueInstance>”
// 上不存在属性“myprops”
console.log(vm.myprops)

vue 给出的方案，在项目中的 xxx.d.ts 中扩展 vue 实例上的属性：

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    myprop: number
  }
}

ts 提供了 declare module 'xxx' 的语法来扩展其他模块，这非常有利于一些插件化的库和包，例如 vue-router 扩展 vue 。

// vue-router/types/vue.d.ts
import Vue from 'vue'
import VueRouter, { Route, RawLocation, NavigationGuard } from './index'

declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter
    $route: Route
  }
}

declare module 'vue/types/options' {
  interface ComponentOptionsextends Vue> {
    router?: VueRouter
    beforeRouteEnter?: NavigationGuard
    beforeRouteLeave?: NavigationGuard
    beforeRouteUpdate?: NavigationGuard
  }
}

如何处理非 js 文件，例如 .vue 文件引入？

处理 vue 文件

对于所有以 .vue 结尾的文件，可以默认导出 Vue 类型，这是符合 vue单文件组件 的规则的。

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

处理 css in js

对于所有的 .css，可以默认导出一个 any 类型的值，这样可以解决报错问题，但是丢失了类型检查。

declare module '*.css' {
 const content: any
  export default content
}

import * as React from 'react'
import * as styles from './index.css'

const Error = () => (
    
        ?</div>
        Ooooops!p>
        
This page doesn't exist anymore.