早读《TypeScript Generics Too Hard?》
早读《TypeScript Generics Too Hard?》
icepy
发布于 2019-12-19 15:17:01
发布于 2019-12-19 15:17:01
https://ts.chibicode.com/generics
最近在阅读 Redux源码，这才发现它用 TypeScript 重写了，稍微有一些绕脑，因为：
泛型这个 TypeScript 的特性，我想是我们使用 TypeScript 必然要跨过的门槛。
这篇文章详细阐述了 TypeScript 泛型的各种设计和范例，从中我们可以学习一下这种思想，由于提取精髓，因此略有删减。
当我们指定了一个简易的类型时，比如 number，却也很明确可以传入 string ，这时函数就很难描述这种状态，虽然我们可以使用 TypeScript 中的 | 操作符，比如（number | string），如果类型很多的话，你想想你需要写多少。
这种情况，我们就可以使用泛型来描述它：
function makeState<S>() {
let state: S
function getState() {
return state
}
function setState(x: S) {
state = x
}
return { getState, setState }
}makeState<number>()当我们使用这种状态时，由于指定了类型，因此就可以使用 number 来做这个状态：
const numState = makeState<number>()
numState.setState(1)
console.log(numState.getState())再进一步，我们如何限定它的类型，比如期望这个泛型只能传递 number 或 string ，这个场景其实也很有用，我们可以试想不做限定，这里的参数传递可以传任意：
function makeState<S extends number | string>()extends 关键字可以为我们解决这个问题。
从侧面来说调用的过程每次都要指定类型有时候也挺麻烦的，我们可以尝试一下为泛型指定一下默认类型：
function makeState<
S extends number | string = number
>()让我们来看另一个例子，多个泛型的表达：
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，它强制第一个为数字，第二个为字符串。
const { getPair, setPair } = makePair<
number,
string
>()试想一下，如果这个参数很多，那么对象的描述就很长了，我们可以使用接口或 type 来优化一下：
interface Pair<A, B> {
first: A
second: B
}type Pair<A, B> = {
first: A
second: B
}接下来我们看一看把 makeState 改造成一个类：
class State<S> {
state: S
getState() {
return this.state
}
setState(x: S) {
this.state = x
}
}要使用此功能，我们只需要在初始化时传递类型参数即可：
const numState = new State<number>()
numState.setState(1)最后结论：
了解泛型，理解其设计思想并熟练使用即可。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-12-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读