什么是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”。
于是，我們就得對使用的泛型進(jìn)行約束，我們約束其為具有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中的屬性。這樣就會讓代碼不夠嚴(yán)謹(jǐn)，為解決這一問題，我們可以使用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
這就是泛型約束，很常用哦！
