泛型:在软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型。同时也能支持未来的数据类型。这在创建大型系统时为你提供了十分灵活的功能。

Tip:泛型主要功能就是对数据类型的拓展。

在像C#和Java这样的语言中,可以使用泛型来创建可复用的组件。一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
通俗理解:泛型就是解决类、接口、方法的复用性。以及对不特定数据类型的支持。

  1. 泛型的好处:既能类型检查又能任意
  2. //1.只能是特定类型
  3. function getData(msg:string){
  4. console.log(msg)
  5. }
  6. //2.放弃了类型检查
  7. function getData(msg:any){
  8. console.log(msg)
  9. }
  10. //3.既能类型检查又能任意
  11. function getData<T>(msg:T){
  12. console.log(msg)
  13. }

我的需求,传入什么返回什么

一、泛型函数(参数)

function getData<T>(value:T):T{
    return value;
}
console.log(getData<number>(123));
console.log(getData<string>("hello world"));
console.log(getData<Array<number>>([1,2,3]))
console.log(getData<Object>({name:"chengchao"}))

二、约束泛型

function echoWithArr<T>(arg:T []):T[]{
    console.log(arg.length)
    return arg;
}
echoWithArr<number>([1,2,3]);
# 约束传入的类型必须有length属性
interface  withLength{
    length:number;
}
function echoLen<T extends withLength>(arg:T):T{
    console.log(arg.length)
    return arg;
}
echoLen<string>("hello");
echoLen<Array<number>>([1,2,3])
echoLen({length:10})

三、泛型类

class NumList<T>{
    public list:Array<T>=[];
    add(s:T){
        this.list.push(s);
    }
}
var nums = new NumList<number>();
nums.add(1);
nums.add(2);
nums.add(3);
console.log(nums)

var strs = new NumList<string>();
strs.add("html");
strs.add("css");
console.log(strs);

四、泛型接口

3-1 函数类型接口

interface Config<T>{
    (key:T,value:T):T;
}
var setData:Config<string>= function(key:string,value:string):string{
    return key+value;
}

3-2 对象类型接口

interface attrs<T,U>{
    name:T,
    age:U
}
var obj:attrs<string,number> = {name:"lisi",age:28};

四、泛型类

把类作为参数类型的泛型类

class Student{
    name:string;
    age:number;
    skill:string;
    constructor(name:string,age:number,skill:string){
        this.name = name;
        this.age = age;
        this.skill = skill;
    }
}
class Teacher{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
}
class STManage<T>{
    add(s:T):void{
        console.log(s)
    }
}
var s:Student = new Student("lisi",18,"vue");
var t:Teacher = new Teacher("王五",19);
var ms = new STManage<Student>();
ms.add(s);
var mt = new STManage<Teacher>();
mt.add(t);