Type中的泛型

107 阅读3分钟

「这是我参与2022首次更文挑战的第17天,活动详情查看:2022首次更文挑战

泛型定义

搜狗百科

泛型是程序设计语言的一种特性。允许程序员在强类型程序设计语言中编写代码时定义一些可变部分,那些部分在使用前必须作出指明。各种程序设计语言和其编译器、运行环境对泛型的支持均不一样。将类型参数化以达到代码复用提高软件开发工作效率的一种数据类型。泛型类是引用类型,是堆对象,主要是引入了类型参数这个概念。

官网讲述

软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。 在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

我的理解

1.如果说接口统一了API,泛型就是考虑了代码复用性
2.TS有数据类型限制以后,如果每个方法因为参数的数据类型不一样而写很多重复的代码将会很麻烦,因此用泛型减少重复代码量,定义传入不同数据类型达到函数能执行参数不同数据类型的效果。

泛型

T帮助我们捕获用户传入的类型(比如:number),之后我们就可以使用这个类型。这里的T仅仅是变量名可以换成其他的。这里的<>可以写变量类型。

function getData<T>(value:T):T {
    return value;
}
getData<number>(123);
console.log(getData<number>(123));

getData<string>('string');
console.log(getData<string>('string'));

image.png

泛型类

这里拿个输出最小元素的类来讲述泛型类,类要求输出list数组中的最小元素,这里list数组中的元素数据类型未定,可能是number类型也可能是string类型。add函数只负责往list数组添加元素,min函数进行比较。m1和m2就是泛型类下的两个实例,一个是number另外一个是string,m1实例定义list数组是number类型,m2实例定义list数组是string类型。这样就不用重复代码写两个不同的类。

class MinClass<T>{
    public list:T[] = [];
    add(num:T){
        this.list.push(num)
    }
    min():T{
        let minNum = this.list[0];
        for(let i = 0 ; i < this.list.length ; i++){
            if(minNum > this.list[i]){
                minNum = this.list[i]
            }
        }
        return minNum;
    }
}
let m1 = new MinClass<number>();
m1.add(11)
m1.add(22)
m1.add(33)
console.log(m1.min());

let m2 = new MinClass<string>();
m2.add('a')
m2.add('b')
m2.add('c')
console.log(m2.min());

image.png

泛型接口

我们先来回顾一下函数类型接口

interface ConfigFn{
    (value1:string,value2:string):string;
}
let setDate:ConfigFn = function (value1:string,value2:string):string {
    return value1 + value2;
}
console.log(setDate('name:','张三'));

接下来我们讲一下泛型接口,下面写了两种不同的方法。第一种可以是任意类型输入,第二种指定了只能string类型。


// 1.泛型接口
interface ConfigFnGenericsOne{
    <T>(value3:T):T;
}
let setDateGenericsOne:ConfigFnGenericsOne = function<T> (value3:T):T {
    return value3;
}
console.log(setDateGenericsOne('李四'));
console.log(setDateGenericsOne(25));

// 2.泛型接口
interface ConfigFnGenericsTwo<T>{
    (value3:T):T;
}
function setDateGenericsTwo<T> (value3:T):T {
    return value3;
}
let getSomeData:ConfigFnGenericsTwo<string> = setDateGenericsTwo;
console.log(getSomeData('王五'));

image.png 注:所有ts代码在浏览器执行时均转换成js代码。