【九月打卡】第50天 TypeScript(6)

泛型中使用extends和keyof

泛型约束extends

如下getName传递的参数多了age会报错，因为Person中只有name属性，多传的age不在Person类型中

interface Person {
  name: string;
}

function getName(person: Person) {
  return person.name
}

getName({name: 'tz', age: 18}) // 报错

利用泛型extends可以解决上述问题；通过 T extends Person，T中必须有name属性，至于其他的属性就不管了

interface Person {
  name: string;
}

function getName<T extends Person>(person: T) {
  return person.name
}

getName({name: 'tz', age: 18})

extends和泛型结合的泛型约束，解决固定参数传递需求

keyof

先看下面的例子报错：
Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type ‘Person’.
No index signature with a parameter of type ‘string’ was found on type ‘Person’.

大致意思是：因为传入的key值是不确定的，不能保证是Person类型中的，所以不能将key用于person的索引

const person: Person = {
  name: 'tz',
  age: 18
}

function getPerson(person: Person, key: string) {
  return person[key]  // 报错
}

getPerson(person, 'name')

上述报错的解决方案是：
明确key就是Person类型中的某一个属性即可，可以采用泛型 + extends + keyof来解决；
如下keyof Person相当于对Person的属性进行遍历；
T extends keyof Person代表T是 name 或者 age中的某一个

const person: Person = {
  name: 'tz',
  age: 18
}

function getPerson<T extends keyof Person>(person: Person, key: T) {
  return person[key]
}

getPerson(person, 'name')