一文看懂之TypeScript泛型

例行BB。emmm...直接看内容吧比较容易理解

 

//很明显一个无意义函数
//当我们确定返回值类型的时候，就可以直接写好返回值类型，这里是number
function fn (a: number): number{
    return a;  
}

//但当我们不清楚返回值类型，或者不确定的时候那么我们怎么办？
//这样吗？使用any当然是解决了问题，先抛开any类型本身的弊端不说，返回值a和参数a的类型都不确定是同一类型

function fn (a: any): any{
    return a;
}

当我们遇到如上，类型不明确的情况时，就轮到泛型登场了。👇

 

//这里G为Generics(泛型)的首字母
//代码解析：<G> 定义了一个任意类型，名称为G

function fn<G>(a: G): G{
    return a;  
}


//此时G类型只有才函数fn执行时才会确定。
//比any的优点： 保留了类型检测，同时语义上也表明了参数类型和返回值类型为同一类型

fn(10); 
//此时调用fn不仅仅是把参数10传给形参a,同时也根据TS的自动推断检测到10的类型为number，于是把number也传给了类型G

fn<string>('hello'); 
//指定泛型，有时候TS是无法推断出参数类型的，所以可以指定泛型。


//多个泛型也一样
function fn2<G1, G2>(a: G1, b: G2): G1 {
    return a;

}

fn2<number, string>(10, 'hello')

 

其他场景例子

 

//接口
interface Inter {
    length: number;
}

function fn3<G extends Inter>(a: G): number {
    return a.length
}

//G extends Inter 表示泛型G必须是Inter的实现类

//类
class MyClass<G>{
    name: G;
    constructor(name: G) {
        this.name = name;
    }
}

const mc = new MyClass<string>('基米希');