这篇文章主要为大家展示了“typescript 泛型怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“TypeScript 泛型怎么用”这篇文章吧。1.简单的使用现在我们要
这篇文章主要为大家展示了“typescript 泛型怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“TypeScript 泛型怎么用”这篇文章吧。
现在我们要定义一个join
函数,该函数的功能主要是接受两个类型一样的值,返回两个参数拼接后的值。示例代码如下:
// 所谓的泛型,通俗一点的解释就是泛指的类型// 定义一个join函数,接受两个一样类型的参数,并将两个参数拼接后返回。function join<T>(first: T, second: T) { return `${first}${second}`}// 这里明确 T 为 string 类型join<string>('第一', '第二') // 第一第二// 这里通过类型推导的方式,编译器会根据传入的参数自动推断出类型join(1, 2) // 12
定义泛型是通过<>对尖括号来定义,我们在定义join函数的时候,并不知道可以接受那些类型,但是可以明确的是两个类型是必须一样的,如果想要满足这样的需求,不用泛型的话解决起来是没有这么简单的。
在调用函数的时候,这里使用了两种方式,一种是直接指定类型为string类型;另一种是通过类型推导的方式,编辑器会根据传入的参数自动帮助我们确定类型。
在定义一个函数时,我们可以使用多个泛型,而且返回值类型也可以通过泛型指定,只要在数量上和使用方式上能对应就可以。
示例代码如下:
function identity<T, Y, P>(first: T, second: Y, third: P): Y { return second}// 指定类型identity<boolean, string, number>(true, '字符串', 123) // 字符串// 类型推断identity('string', 123, true) // true
我们不仅可以在函数中使用泛型,还可以在类中使用泛型。
示例代码如下:
class DataManager<T> { // 定义一个类,该类中具有一个T类型的私有数组 constructor(private data: T[]) {} // 根据索引说数组中的值 getItem(index: number): T { return this.data[index] }}const data = new DataManager(['一碗周'])data.getItem(0) // 一碗周
而且泛型还可以继承与于某个接口,示例代码如下:
interface Item { name: string}class DataManager<T extends Item> { // 定义一个类,该类中具有一个T类型的私有数组 constructor(private data: T[]) {} // 根据索引说数组中的值 getItem(index: number): string { return this.data[index].name }}const data = new DataManager([{ name: '一碗周' }])data.getItem(0) // 一碗周
使用extends
可以达到一个泛型约束 的作用,就上面那个代码来说,我们必须约束传入的值必有具有一个name属性,否则就会抛出异常。
假如有如下需求,我们定义一个类,在类中一个私有对象,该对象中包含一些属性;然后定义一个方法,通过key来获取其对应的值。
实现代码如下:
// 定义一个接口interface Person { name: string age: number hobby: string}// 定义一个类class Me { constructor(private info: Person) {} getInfo(key: string) { return this.info[key] }}const me = new Me({ name: '一碗周', age: 18, hobby: 'coding',})// 调用 me.getInfo() 可能会得到一个 undefined 如下示例me.getInfo('myName') // undefined
上面的代码,如果我们调用示实例对象中的getInfo()
方法时,传入一个没有的属性,会得到一个undefined。调用一个方法返回一个undefined
时,这并不是TypeScript
中的作风。
解决该问题可以通过keyof操作符,该关键字可以通过该操作符可以用于获取某种类型的所有键,其返回类型是联合类型。
示例代码如下:
type myPerson = keyof Person // 'name' | 'age' | 'hobby'
那现在就可以通过该操作符解决上面出现的那个问题
示例代码如下:
class Me { constructor(private info: Person) {} // 该写法与如下写法是一样的 getInfo<T extends keyof Person>(key: T): Person[T] { return this.info[key] } // getInfo<T extends 'name' | 'age' | 'hobby'>(key: T): Person[T] { // return this.info[key] // }}const me = new Me({ name: '一碗周', age: 18, hobby: 'coding',})// 调用 me.getInfo() 如果传递一个未知的属性则会编译错误me.getInfo('myName') // error : 类型“"myName"”的参数不能赋给类型“keyof Person”的参数。
现在我们只要访问对象中不具有的属性编译则会异常。
以上是“TypeScript 泛型怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!
--结束END--
本文标题: TypeScript 泛型怎么用
本文链接: https://www.lsjlt.com/news/301680.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0