typescript学习：泛型Generics

泛型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