typeScript泛型约束

什么是ts泛型约束？我们先来看下面一个例子
有时候我们会有这样的泛型使用

function getLength (arg: T) {
    console.log(arg.length)
    return arg
}

getLength('22')

我们期望在一个泛型的变量上面，获取其length参数，但是，有的数据类型是没有length属性的，比如布尔值。所有你的编辑器就会报下面的错

tserror.png

类型“T”上不存在属性“length”。

于是，我们就得对使用的泛型进行约束，我们约束其为具有length属性的类型，这里我们会用到interface,代码如下

interface Ilength {
    length: number
}

function getLength (arg: T) {
    console.log(arg.length)
    return arg
}
getLength('22')

这样，我们的代码就不会报出警告了，同时，在使用的时候，也会做出相应的约束，比如，我们通过下面这样去调用，就会有这样的提示

tserr.png

keyof

同样的，我们有时候会访问一些自定义的属性，就像下面的代码

function getProprty (obj: T, key: K) {
    return obj[key]
}
const people = { name: 'xiaozhanng', age: 16 }
getProprty(people, 'name')

我们代码的意图是，通过传入一个泛型的对象，或者什么其他的变量，然后再传入另外一个泛型的变量，找到obj下面的key属性。
这个时候就你的编辑器就会报这样的错

typeScripterror.png

类型“K”无法用于索引类型“T”。

意思是，我们传入的泛型key变量，不一定是存在于泛型obj中的属性。这样就会让代码不够严谨，为解决这一问题，我们可以使用keyof，他可以拿到一个类型下所有的属性，就像这样

tswarn.png

同样的，我们可以将其用在自定义的对象上

let keys: keyof typeof people

keyof.png

按照这个思路，我们就可以利用泛型约束，对上面的代码做修改

function getProprty (obj: T, key: K) {
    return obj[key]
}
const people = { name: 'xiaozhanng', age: 16 }
getProprty(people, 'name')
// keyof 获取对象的所有属性

let keys: keyof typeof people

上面代码中，我们约束K泛型变量为T变量中的某一个属性。这样，在调用的时候就可以做约束了，比如我下面的调用就会出错

keyofwarn.png

这就是泛型约束，很常用哦！