什么是ts泛型約束？我們先來看下面一個例子
有時候我們會有這樣的泛型使用

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

getLength<string>('22')

我們期望在一個泛型的變量上面，獲取其length參數(shù)，但是，有的數(shù)據(jù)類型是沒有length屬性的，比如布爾值。所有你的編輯器就會報下面的錯

tserror.png

類型“T”上不存在屬性“l(fā)ength”。

于是，我們就得對使用的泛型進行約束，我們約束其為具有length屬性的類型，這里我們會用到interface,代碼如下

interface Ilength {
    length: number
}

function getLength<T extends Ilength> (arg: T) {
    console.log(arg.length)
    return arg
}
getLength<string>('22')

這樣，我們的代碼就不會報出警告了，同時，在使用的時候，也會做出相應(yīng)的約束，比如，我們通過下面這樣去調(diào)用，就會有這樣的提示

tserr.png

keyof

同樣的，我們有時候會訪問一些自定義的屬性，就像下面的代碼

function getProprty<T, K> (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<T, K extends keyof T> (obj: T, key: K) {
    return obj[key]
}
const people = { name: 'xiaozhanng', age: 16 }
getProprty(people, 'name')
// keyof 獲取對象的所有屬性

let keys: keyof typeof people

上面代碼中，我們約束K泛型變量為T變量中的某一個屬性。這樣，在調(diào)用的時候就可以做約束了，比如我下面的調(diào)用就會出錯

keyofwarn.png

這就是泛型約束，很常用哦！