早读《TypeScript Generics Too Hard?》

https://ts.chibicode.com/generics

最近在阅读 Redux源码，这才发现它用 TypeScript 重写了，稍微有一些绕脑，因为：

泛型这个 TypeScript 的特性，我想是我们使用 TypeScript 必然要跨过的门槛。

这篇文章详细阐述了 TypeScript 泛型的各种设计和范例，从中我们可以学习一下这种思想，由于提取精髓，因此略有删减。

当我们指定了一个简易的类型时，比如 number，却也很明确可以传入 string ，这时函数就很难描述这种状态，虽然我们可以使用 TypeScript 中的 | 操作符，比如（number | string），如果类型很多的话，你想想你需要写多少。

这种情况，我们就可以使用泛型来描述它：

代码语言：javascript复制

function makeState<S>() {
  let state: S
  function getState() {
    return state
  }
  function setState(x: S) {
    state = x
  }
  return { getState, setState }
}

代码语言：javascript复制

makeState<number>()

当我们使用这种状态时，由于指定了类型，因此就可以使用 number 来做这个状态：

代码语言：javascript复制

const numState = makeState<number>()
numState.setState(1)
console.log(numState.getState())

再进一步，我们如何限定它的类型，比如期望这个泛型只能传递 number 或 string ，这个场景其实也很有用，我们可以试想不做限定，这里的参数传递可以传任意：

代码语言：javascript复制

function makeState<S extends number | string>()

extends 关键字可以为我们解决这个问题。

从侧面来说调用的过程每次都要指定类型有时候也挺麻烦的，我们可以尝试一下为泛型指定一下默认类型：

代码语言：javascript复制

function makeState<
  S extends number | string = number
>()

让我们来看另一个例子，多个泛型的表达：

代码语言：javascript复制

function makePair<F, S>() {
  let pair: { first: F; second: S }
  function getPair() {
    return pair
  }
  function setPair(x: F, y: S) {
    pair = {
      first: x,
      second: y
    }
  }
  return { getPair, setPair }
}

这是一个示例用法，通过使用<number，string>调用makePair，它强制第一个为数字，第二个为字符串。

代码语言：javascript复制

const { getPair, setPair } = makePair<
  number,
  string
>()

试想一下，如果这个参数很多，那么对象的描述就很长了，我们可以使用接口或 type 来优化一下：

代码语言：javascript复制

interface Pair<A, B> {
  first: A
  second: B
}

代码语言：javascript复制

type Pair<A, B> = {
  first: A
  second: B
}

接下来我们看一看把 makeState 改造成一个类：

代码语言：javascript复制

class State<S> {
  state: S
  getState() {
    return this.state
  }
  setState(x: S) {
    this.state = x
  }
}

要使用此功能，我们只需要在初始化时传递类型参数即可：

代码语言：javascript复制

const numState = new State<number>()
numState.setState(1)

最后结论：

了解泛型，理解其设计思想并熟练使用即可。

架构设计

0 人点赞