跳到主要内容

TypeScript高级语法

在线运行 TypeScript https://www.typescriptlang.org/play

typeof​

typeof val

获取对象的类型

  1. 已知一个 javascript 变量，通过 typeof 就能直接获取其类型
const str = 'foo'
typeof str === 'string' // true

const user = {
  name: 'xujianlei',
  age: 12,
  address: {
    province: '福建',
    city: '厦门',
  },
}

type User = typeof user
// {
//   name: string;
//   age: number;
//   address: {
//      province: string;
//      city: string;
//   };
// }

type Address = (typeof user)['address']
// {
//    province: string;
//    city: string;
// }
  1. 获取函数的类型（参数类型与返回值类型）
function add(a: number, b: number): number {
  return a + b
}

type AddType = typeof add
// (a: number, b: number) => number

type AddReturnType = ReturnType<typeof add>
// number

type AddParameterType = Parameters<typeof add>
// [a: number, b: number]

keyof​

keyof T

获取 T 类型中的所有 key，类似与 Object.keys(object)

根据 key 获取对象其属性的例子

function getProperty<T extends object, K extends keyof T>(obj: T, key: K) {
  return obj[key]
}

上面代码有很好的代码提示，并且如果获取的 key 不在其对象中，将会直接报错。

对于一些常用类型的 keyof 值

type K0 = keyof string
// number | typeof Symbol.iterator | "toString" | "charAt" | ... more
type K1 = keyof boolean
// "valueOf"
type K2 = keyof number
// "toString" | "valueOf" | "toFixed" | "toExponential" | "toPrecision" | "toLocaleString"
type K3 = keyof any
// string | number | symbol

交叉类型​

& 交叉运算符

类似集合中的交集，满足以下特性

  1. 唯一性：A & A 等价于 A
  2. 满足交换律：A & B
  3. 满足结合律：(A & B) & C 等价于 A & (B & C)
  4. 父类型收敛：如果 B 是 A 的父类型，那么 A & B 将收敛为 A 类型.

任何与 never 交叉的类型都是 nerver，any 交叉的类型为 any（除了 nerver）

type A0 = any & 1 // any
type A1 = any & boolean // any
type A2 = any & never // never

type A3 = string & number // never

映射类型​

{ [P in K]: T }

其中 in 类似与 for ...in 语句，而 T 类型表示任意类型。遍历 K 类型的所有 key，生成 P : T，例如

interface Todo {
  title: string
  description: string
  completed: boolean
}

type Demo<T> = { [P in keyof T]: T }
type Todo1 = Demo<Todo>
// {
//   title: string
//   description: string
//   completed: boolean
// }

上面代码看似没有任何映射关系，因为在映射类型中可以给对其添加readonly 和 ? 只读与可选修饰符，以及+ - 增加与删除修饰符（默认为+）例如

{ [ P in K] :T }
{ [ P in K] ?:T }
{ [ P in K] -?:T }

{ readonly [ P in K] :T }
{ readonly [ P in K] ?:T }
{ -readonly [ P in K] ?:T }

就可以实现一些 TypeScript 的内置工具类（给对象属性只读，可选等等）

type MyPick<T, K extends keyof T> = {
  [P in K]: T[P]
}

type MyPartial<T> = {
  [P in keyof T]?: T[P]
}

type MyRequired<T> = {
  [P in keyof T]-?: T[P];
}

type MyReadonly<T> = {
  readonly [P in keyof T]: T[P]
}

...

条件类型​

T extends U ? X : Y

其代码语法类似与三元运算符，

  1. 如果 T 和 U 都为基本类型两侧相同，则 extends 在语义上可以理解为 ===
type Demo1 = 'foo' extends 'bar' ? true : false // false
type Demo2 = 'c' extends 'c' ? true : false // true
  1. 若位于 extends 右侧的类型包含位于 extends 左侧的类型(即狭窄类型 extends 宽泛类型)时，结果为 true，反之为 false。
type Demo3 = string extends string | number ? true : false // true
  1. 当 extends 作用于对象时，若在对象中指定的 key 越多，则其类型定义的范围越狭窄。
type Demo4 = { a: true; b: false } extends { a: true } ? true : false // true
  1. 作用于联合类型中，且 T 为裸类型参数(无T[] [T] Promise<T> 等类型包装过)，那么则为分布式条件类型，对于该类型来说，当 T 为联合类型时，运算过程会被分解为多个分支（类似于乘法分配律），那么返回的类型也将是多个类型。

分布式条件类型的特点：“裸”类型、类型参数、联合类型参数会触发分支。

type Demo5<T, U> = T extends U ? never : T
type Demo6 = Demo5<'a' | 'b' | 'c' | 'd', 'c' | 'd'> // 'a' | 'b'

例如上面定义的 Demo5，其实也就是 TypeScript 内置工具类的Exclude<UnionType, ExcludedMembers>的实现，所返回的结果是 'a' | 'b'，其内部的实现相当于

'a' extends 'c' | 'd' ? never : 'a' // 'a'
'b' extends 'c' | 'd' ? never : 'b' // 'b'
'c' extends 'c' | 'd' ? never : 'c' // never
'd' extends 'c' | 'd' ? never : 'd' // never
// 执行四次条件类型,最终合并得到 'a' | 'b'

但如果 T 不能裸类型参数类型，那么便不会做分布式条件类型，返回的结果便只有一个。

类型推断​

type Demo<T> = T extends (infer U)[] ? U : T

如果 T 为string[]类型，那么 infer 可以推导出 U 为 string 类型

注：infer 只能在条件类型的extends子句中才允许infer声明，且只能在条件分支中 true 中使用

下列语句都将报错

type Wrong1<T extends (infer U)[]> = T[0]

type Wrong2<T> = (infer U)[] extends T ? U : T

type Wrong3<T> = T extends (infer U)[] ? T : U

一些例子

type Unpacked<T> = T extends (infer U)[]
  ? U
  : T extends (...args: any[]) => infer U
    ? U
    : T extends Promise<infer U>
      ? U
      : T

type T0 = Unpacked<string> // string
type T1 = Unpacked<string[]> // string
type T2 = Unpacked<() => string> // string
type T3 = Unpacked<Promise<string>> // string
type T4 = Unpacked<Promise<string>[]> // Promise<string>
type T5 = Unpacked<Promise<string> | string> // string | Promise<string>

通过 infer 就可以推导出函数的参数类型与返回值类型

const fn = (v: boolean) => {
  if (v) return 1
  else return 2
}

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

type MyParameterType<T> = T extends (...args: infer P) => any ? P : any

type FnReturnType = MyReturnType<typeof fn>
// 1 | 2
type FnParameterType = MyParameterType<typeof fn>
// [v: boolean]

声明文件​

我个人习惯会在根目录创建 types 文件夹，里面存放 d.ts 声明文件，同时 tsconfig.json 中配置 "include": ["src/**/*.ts", "types/**/*.d.ts"]

创建一个全局声明文件global.d.ts，使用 declare 关键字来声明

global.d.tstypescript
declare module 'foo' {
  export var bar: number
}

此时就可以在其他文件中import * as foo from 'foo'，即便没有安装 foo 模块，但是 foo 依然有 bar 属性提示，这在一些第三方使用 js 所编写的库中经常遇到。在例如我想给我的 axios 封装些自己定义的代码，同时还带有类型提示，那么就可以使用声明文件，如下

global.d.tstypescript
import * as axios from 'axios'

declare module 'axios' {
  export interface Axios {
    myget: (url: string, config?: AxiosRequestConfig) => Promise<AxiosResponse>
  }
}
demo.tstypescript
import axios, { AxiosRequestConfig } from 'axios'

axios.myget = async (url: string, config?: AxiosRequestConfig) => {
  console.log(url)
  return axios.get(url, config)
}

type 和 interface 区别​

相同点​

  1. 都可以用来描述对象或函数

  2. 类型别名和接口都支持扩展

type User = {
  name: string
}

type User1 = User & { age: number }
interface User {
  name: string
}

interface User1 extends User {
  age: number
}

不同点​

  1. 同名接口会自动合并，而类型别名不会
interface User {
  name: string
}

interface User {
  age: number
}

const user: User = {
  name: 'xujianlei',
  age: 20,
}
type User = {
  name: string
}

type User = {
  age: number
}
// 标识符“User”重复。

使用场景​

type 的使用场景​

  • 定义基本类型
  • 定义元组类型
  • 定义函数类型
  • 定义联合类型
  • 定义映射类型

interface 的使用场景​

  • 利用接口自动合并特性，在第三方库中可以对其进行接口扩展

  • 定义对象类型且无需使用 type 时

TypeScript 内置工具类​

TypeScript: Documentation - Utility Types (typescriptlang.org)

相关文档与练习​

TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)

深入理解 TypeScript | 深入理解 TypeScript (jkchao.github.io)

type-challenges/type-challenges: Collection of TypeScript type challenges with online judge (github.com)

0%