泛型Generics的了解与使用
泛型
定义:占位符,定义时不知道未来需要什么值,等调用的时候再传(多态)
作用:提升类,接口,方法的复用性
场景:封装
组件/函数不仅考虑支持当前的数据类型,同时也能支持未来的数据类型
注意:传入的参数和返回的参数一致
语法
用<T>声明,用T占位,T是自己写的,可以是任意字符
占位地方:参数,返回值
function fn<T>(value1: T, value2: T): T {}
const fn = <T>(value:T):T => value
泛型函数
function getData<T>(value1: T, value2: T): void {
console.log(value1, value2)
}
getData<number>(1, 2) //正确
getData<string>('hello', 'ts') //正确
getData<number>(1, '123') //报错,存在字符串类型
getData<number | string>(1, '123') //正确,支持混合类型
getData('hi', 'react') //正确,ts会帮做类型推论
多个参数,在返回值中可以规定顺序
function show<T, U>(tuple:[T, U]):[U, T]{
return [tuple[1], tuple[0]]
}
show<string, number>(['string', 123]) //123, string
泛型接口
需要按顺序填写
interface KeyPair<K, V> {
key:K;
value:V;
}
let kp1: KeyPair<number,string> = {key: 123, value: 'str'}
let kp2: KeyPair<string,number> = {key: 'str', value: 123 }
函数,第一种:
interface ConfigFn {
<T>(value: T): T;
}
let getData: ConfigFn = (value) => value
getData<string>('张三')
函数,第二种:
interface ConfigFn<T>{
(value:T):T;
}
function getData<T>(value:T):T{
return value
}
let myGetData : ConfigFn<string> = getData
myGetData('abc')
适配不同的函数
interface Iplus<T> {
(a:T,b:T):T
}
function plus(a:number,b:number):number{
return a + b
}
function connect(a:string,b:string):string{
return a + b
}
const p : Iplus<number> = plus
const c : Iplus<sring> = connect
————————————————
版权声明:本文为CSDN博主「大神乔伊」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44828005/article/details/119343386
约束泛型
第一种:约束传入的参数是数组
function sayHi<T>(names: T[]){} //写法一
function sayHi<T>(names: Array<T>){ //写法二
console.log(arg.length)
retrun arg
}
sayHi([1,2,3])
sayHi<string>(['tao','shen'])
第二种:使用extends
鸭子叫(像鸭子叫就行),不管是什么类型都可以,有length属性就行
interface IWithLength {
length:number
}
function echoWithLength<T extends IWithLength >(arg:T):T {
console.log(arg.length)
retrun arg
}
const arr = echoWithLength([1,2,3])
const res = echoWithLength('str') //可以传字符串,字符串有length
const obj = echoWithLength({length: 10}) //也可以传带length属性的对象
泛型类
例子1:实现队列功能
class Queue<T>{
private data:T[] = []
push(item:T):void{
this.data.push(item)
}
pop():void{
this.data.pop(item)
}
}
const queue = new Queue<number>() //限制传入的是数字类型
queue.push(1)
queue.push('str') //报错,不是数字类型
const queue = new Queue<string>() 限制传入的是字符串类型
queue.push('str')
log(queue.pop().length) //字符串,可以使用字符串方法
例子2:
class MysqlDB<T> {
add(info:T):boolean{
return true
}
}
class User {
username:string | undefined;
password:string | undefined;
}
let u = new User()
u.username = 'dashen'
u.password = '123456'
let myDB = new MysqlDB<User>() //传入类作为效验
myDB.add(u)
泛型继承
interface Girl{
name:string
}
T继承Girl
class SelectGril<T extends Girl> {
constructor(ptivate girls: T[]){}
getGril(index:number):string{
return this.girls[index].name
}
}
const girl = new SelectGril([
{name:'tao'}
{name:'shen'}
])
TS学习地图typescript学习导图_大神乔伊的博客-CSDN博客前言浅蓝色的文字是超连接,点击前往相关主题基础介绍,安装,ts和react集成,配置文件,声明文件类型注解,类型推断,类型断言进阶接口泛型高级类型https://blog.csdn.net/weixin_44828005/article/details/119336338
————————————————
版权声明:本文为CSDN博主「大神乔伊」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44828005/article/details/119343386