写在前面

本文假设读者有基本的 TypeScript 常识，如果你对于 TypeScript 本身完全不了解，建议先阅读 https://www.typescriptlang.org/docs/handbook/basic-types.html

本文不包含体操项目，如有需要请自行锻炼。

为啥要用 TypeScript ？

这可能是最老生常谈的一个问题。类型系统的好处有很多：

• 可读性
• 工具链（编辑器自动提示、更精确的 Lint 等）
• 重构（例如，想要给某个变量改名，又怕漏掉）

以上好处都很明显，但同时，类型系统也有一些潜在的好处。例如，当你发现你的类型无法利用 TypeScript 声明时，一定程度上说明接口的设计是类型不友好的，或者说比较晦涩/容易出错，例如，Vue@2.x

但一定得注意：TS 不会做任何运行时的校验，所以如果你的代码最终会被编译成 JS，又有可能被 JS 代码调用，还是需要做好代码防御的。

怎么写类型

最简单的，大家都会写的形式，就是声明+冒号+类型：

// code.js
const num = 1;
function setNum(value, defaultValue = 0) {
  num = value || defaultValue;
}

// code.ts
const num: number = 1;
function setNum(value: number, defaultValue: number = 0): void {
  num = value || defaultValue;
}

简单地说，就是在任何声明变量的地方（import 除外），以及函数返回值，在变量名的后面加上 :类型，就完事儿了！

对于函数而言，一种方式是通过参数和默认值声明，就像上面一样。同时你也可以写一个声明语句，例如：

const num: number = 1;

function function(value: number, defaultValue?: number): void

function setNum(value, defaultValue = 0): void {
  num = value || defaultValue;
}

上面的 ?: 代表这个参数可以不传的意思

类型推导

如果只是这样，那 TS 就太辣鸡了。TS 的一个比较优越的地方就是，如果我们假设代码是静态类型的，那么很多地方的类型就不需要我们自己声明了，就像 Java 中也有类似的机制。所以上面的代码其实只要这样就可以了：

// code.ts
const num = 1;
function setNum(value: number, defaultValue = 0) {
  num = value || defaultValue;
}

（注意 value 这个参数的类型无论如何也推导不出来，所以还是要自己声明）

对象和函数类型

TS 也提供了 interface 语法来声明一些非 JS 内置的类型，例如

interface MyObject {
  key: string;
  name: string;
  value: number;
}

interface MyFunction {
  (value: number, defaultValue: number): void;
  staticProp: number;
}

interface MyClassInterface {
  constructor(value: number): MyClass;
  // 这里有一种老的写法是 new (value: number)，不过现在不太建议这么写了，类型匹配会有困难
}

同时也有一个 type 关键字，上面的类型也可以写成

type MyObject =  {
  key: string;
  name: string;
  value: number;
}

type MyFunction = (value: number, defaultValue: number) => void & { staticProp: number };

type MyClass = {
  constructor(value: number): MyClass;
  // 这里有一种老的写法是 new (value: number)，不过现在不太建议这么写了，类型匹配会有困难
}

（上面这些换行前的符号写成逗号也是一样的，神奇吧？）

两者看上去都可以完成一样的事情，事实也基本如此。但是还是会有一些细微的差别：

• interface 有一种 implements 的用法（下面这个例子实际上 type 可以通过改写成赋值语句的形式完成）

interface MyClassInterface {
  setValue(value: number): void;
}

class MyClass implements MyClassInterface {
  // 如果没有 setValue 就会报错
}

• interface 可以 extends（下面这个例子实际上 type 可以通过 & 运算完成）

interface A {
  key: string;
}

interface B extends A {
  name: string;
}

• type 可以把类型声明成基本类型，还可以使用类型运算

type MyProp = string

type MyKey = string | number | symbol

• interface 可以用索引签名
• type 可以用更高级的类型参数

从实现上来说，interface 是声明了新的类型，而 type 只是类型的别名，有一点点像值和引用的区别。

常量类型

TS 的类型有时候如同你想象中一样工作，所以，如果想不出来的话，可以写下来试试

type A = true // A 类型的变量就必须得是 true
type B = 'oops' // B 类型的变量就必须得是 oops
type C = [string, number] // C 类型的变量就必须得是一个数组，必须得有两个元素，必须分别是 string 和 number

枚举

没啥可说的，自己看文档就好了 https://www.typescriptlang.org/docs/handbook/basic-types.html#enum

奇奇怪怪的类型

最经典的大概就是 any 了。鲁迅曾经说过，如果你不知道怎么写 TS 类型，那就写 any 就完事了。当然实际上这样做会被打的。

any 是顶层类型也是底层类型，也就是说，啥都是 any，any 也啥都是。比方说

// 啥都是 any
function myFunction(value: any) {}
let v: number
myFunction(v) // OK!

// any 啥都是
function myFunction(value: number) {}
let v: any
myFunction(v) // OK!

也因为如此，使用 any 等于放弃了类型。并且很重要的是，**any 具有传播性**，也就是说，any 和任何类型的联合类型都是 any，比如 any | number。所以，尽量避免使用 any，除非明确地知道就是没有类型

除了 any 之外另一个常见的类型是 unknown，这俩有点像，但是 unknown 的提出就是为了解决 any 的各种问题的。

unknown 是顶层类型，但不是底层类型，也就是说，啥都是 unknown，unknown 啥也不是。比方说

// 啥都是 unknown
function myFunction(value: unknown) {}
let v: number
myFunction(v) // OK!

// unknown 啥也不是
function myFunction(value: number) {}
let v: unknown
myFunction(v) // TS error

尽管 unknown 同样有传播性，但是“unknown 啥也不是”限制了它实际使用时必须要强制类型声明，通常来说，这意味着 unknown 不太会被滥用。一般来说，如果你发现一个函数的返回值没用到，那么就用 unknown 就对了。

never 是一个看起来和他俩没关系，但实际上又有点关系的东西。never 是实质上的底层类型，也就是说，啥都不是 never， never 啥都是。 通常在 TS 里面， never 表示一个不可能出现的类型。比方说：

type A = true & false // never

function foo(): never { // no error
  throw new Error()
}

所以，如果你期待一个分支逻辑永远不可能走到，那么就可以为这个分支的变量、类型或者是返回值声明类型 never

从集合论的角度来看，never 实际上是类型领域的 ∅，而 unknown 是全集。any 某种程度上可以理解为所谓的“全部集合构成的集合”，也就是罗素所指的极限类。在 ZF 公理系统中，由于正则公理的存在，这样的东西并不是一个集合，因为它涉及一个无法良定义的自指。这也可以强行解释为啥不要用 any

另外还有一个内置类型是 void。这个类型曾经是用来解决没有 unknown 时的一系列问题的，简单地说，void 作为函数类型的返回值时是顶层类型，作为独立类型则等价于 undefined。也就是说

type A = () => void

const a: A = () => true // no error

function foo(): void {
  return 1 // error
}

function bar(): void {
  return undefined // no error
}

目前来说应当尽量避免使用 void 类型，通常来说应该使用 undefined；而对于二者不同的情况，使用 unknown 是更加安全的选择。

类型运算和类型参数

在上面的例子里你可能看到过了，类型支持一种像是位运算的东西，就是与或操作符：

type A = string | number // 要么是 string，要么是 number
type B = A & (number | symbol) // 现在 B 只能是 number 了

注意类型是没有非这个操作的，如果要实现这个效果就要用到 extends 或者是内置工具类型了

除了这俩操作符之外，你还可以用这些东西：

• 下标操作符

type A = { name: string }
type B = A['name'] // string

注意不能写成 A.name 哦！

• keyof 操作符

type A = { name: string }
type B = keyof A // 'name'

有聪明的小朋友会问了，那有没有 valueof 呀？

你看看这样行不：

type A = { name: string }
type B = A[keyof A] // string

你觉得不好用？那等会儿你再看看（

• typeof 操作符

let el: HTMLElement
type A = typeof el // HTMLElement

（其实还有一些其他的关键字操作符，但实际使用的场景极少）

然后你发现，哦豁，这样的话类型有点像一种变量似的，可以声明，又可以运算，就差整一个给类型用的函数了。

这个真有！如果你写过 C++ 的话，这就和传说中的模板一样：

type A = X | { name: Y }

type B = A // string | { name: number }

你甚至可以写参数的默认值

type K = Value[Key]

甚至是“类型的类型”（使用 extends 限定类型参数的类型）

type K = Value[Key]

于是刚才说的 valueof 终于有了着落：

type ValueOf = T[keyof T]

访问修饰符

在 TypeScript 世界里你可以声明一些仅限于编译期的限制，例如 private：

class Foo {
  private name: string;
}

这样外部就不能访问 Foo 实例的 name 属性了。同理也可以使用 protected 和 public。

除了这些之外还有一个很常用的是 readonly：

interface Bar {
  readonly id: string;
}

这样就可以表示 Bar 类型的对象的 id 是不能被修改的

类型匹配

有没有思考过一个问题，TypeScript 和 Java 的类型系统有哪里不一样？如果你够敏感的话，从上面的例子可能会发现一些端倪。

假设我给我的函数声明了一个类型：

interface MyInterface {
  name: string
}

function printName(value: MyInterface) {
  console.log(value.name)
}

然后又调用了这个函数

printName({ name: '123' })

你会发现，这段代码！！竟然！！运行的好好的！！！！

你可能觉得有点大惊小怪，但是仔细想一想，你的字面量 { name: '123' } 并没有被声明成 MyInterface 类型的，而 TypeScript 也无从推导。但实际上，{ name: '123' } 就像是 MyInterface —— 因为从某种角度评估来说他们的类型就是能够匹配的，这个角度就是 TypeScript 的类型匹配。在主流的静态类型语言中，你是不可能遇到这种情况的，而这就是 TypeScript 能够适合前端开发的重要原因之一。

也正因为如此，在这个例子里，你可以把 { name: '123', value: 123 } 传给 printName —— TypeScript 并不会因为你多一个字段而拒绝你，因为这个类型依然是能够匹配的。

强制类型声明

到现在为止，你已经成为一个拥有 TypeScript 开发能力的前端了！作为一个优秀的 TypeScript 开发者，你总是谨记上面说的，不用 any 不用 any，也不用 unknown。终于有一天，你遇到了一个自己写不出来的代码：

function readFile(file: File, callback: (value: string) => unknown) {
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.addEventListener('load', () => callback(reader.result)); // error!
}

你发现，reader.result 的类型是 string | Buffer | null，可是你很委屈，文档上说这里的 result 就是字符串呀！

显然不是文档写错了，也不是 TypeScript 内置的 DOM 类型有问题。因为 FileReader 这个类还有一个 readAsArrayBuffer 的方法。在这里，result 显然不能提前预知你到底调用的是 readAs 啥。那这个时候应该怎么办呢？

很简单，你可以告诉 TypeScript，我不要你觉得，我要我觉得！这里的类型就是 string！这个语法有点像类型参数：

callback(reader.result)

这个操作就叫强制类型声明。注意这个尖括号的优先级是很低的，有时候你可能需要加括号来使用：

(reader.result).length

OK，现在一切都没有问题了对不对？并不！如果你使用 React，你就会发现，这个语法好像很熟悉！

type div = {
  name: string
}


console.log(
{name: 2})

对于转译器来说，它不能理解你这里的

callback(reader.result as string)

let foo = 'abc' // foo 的类型为 string
let bar = 'abc' as const // bar 的类型为 'abc' 

const a = [videoInfo, userInfo].reduce((prev, current) => Object.assign(prev, current)), {})

const a = [videoInfo, userInfo].reduce((prev, current) => Object.assign(prev, current)), {} as CommonInfo)

function get(this: Array, index: number) {
  return this[index >= 0 ? index : this.length + index]
}

get.call([1, 2, 3], -1) // 3

class foo(list):
  def get(self, index):
    return self[index if index >= 0 else len(self) + index]

function getPrimaryKey(el: HTMLAnchorElement | HTMLImageElement): 'href' | 'src'

function getPrimaryKey(el: HTMLAnchorElement): 'href'
function getPrimaryKey(el: HTMLImageElement): 'src'

function isNumber(arg: unknown): boolean {}

function run(arg: number | string) {
  if (isNumber(arg)) {
    arg = String(arg)
  }
  arg.startsWith('http:') // ts-error
}

function isNumber(arg: unknown): arg is number {}

interface ProcessEnv {
  [key: string]: string;
}

interface ProcessEnv {
  NODE_ENV: 'production' | 'development';
  [key: string]: string;
}

type ProcessEnv = {
  [K in string]: string
}

type Foo = {
  [K in 'abc' | 'xyz']: string
}

type Bar = {
  [K in keyof Foo]?: Foo[K]
}

// 这可不是 TypeScript
if (T is number) {
  type Foo = string
} else {
  type Foo = never
}

type Foo = T extends number ? string : never

type ElementType = T extends any[] ? T[number] : never

type ReturnType = T extends (...args: any[]) => any ? [the second any] : never 

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

type Foo = Pick<{ a: string, b: number, c: boolean }, 'a' | 'b'>
// { a: string, b: number }

type Foo = Exclude<'a' | 'b' | 'c', 'a' | 'b'>
// 'c'

type Foo = Extract<'a' | 'b' | 'c', 'a' | 'b' | 'd'>
// 'a' | 'b'

type Foo = Omit<{ a: string, b: number, c: boolean }, 'a' | 'b'>
// { c: boolean }

type Foo = Paramaters<(a: string, b: number) => boolean>
// string | number

type Foo = ReturnType<(a: string, b: number) => boolean>
// boolean

type Foo = InstanceType
// Object