前端TS的泛型！！！

泛型

指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用函数，接口、类的时候再指定具体类型的一种特性。

需求: 定义一个函数，传入两个参数，第一个参数是数据，第二个参数是数量，函数的作用: 根据数量产生对应个数的数据，存放在一个数组中。

 function getArr1(value:number,count:number) :number []{
        //根据数据和数量产生一个数组
        const arr :number[] = [] 
        for (let i = 0; i<count; i++){
            arr.push(value)
        }
        return arr
    }
    
    // const arr1 = getArr1(100.123,3)
    // console.log(arr1);
    //定义一个函数,同上，只不过传入的是字符串类型
    // function getArr2(value:string,count:number) :string []{
    //     //根据数据和数量产生一个数组
    //     const arr :string[] = [] 
    //     for (let i = 0; i<count; i++){
    //         arr.push(value)
    //     }
    //     return arr
    // }
​
    // const arr2 = getArr2('abc',3)
    // console.log(arr2);
    //可以传入任意类型的数据,返回来的是存储这个任意类型数据的数组
    function getArr3(value:string,count:number) :any[]{
        //根据数据和数量产生一个数组
        const arr :string[] = [] 
        for (let i = 0; i<count; i++){
            arr.push(value)
        }
        return arr
    }
​
    const arr1 = getArr3("100",1)
    const arr2 = getArr3('abc',3)
    console.log(arr1);
    console.log(arr2);
    //arr1中存储的是数字类型的数据
    //arr2中存储的是字符串类型的数据
    console.log(arr1[0].toFixed());//没有任何的智能提示的信息(要么有方法名字的提示信息，要么有错误的提示信息)
    console.log(arr2[0].split(''));function getArr(num:number,count:number):number[]{
    //根据数据和数量产生一个数组
}
​
//泛型 
function f7<T>(x:T,y:T):T[]{
    return [x,y]
};
f7<number>(1.2);
f7<string>('x','y');
f7<boolean>(true,false);

1多个泛型参数的函数

一个函数可以定义多个泛型参数。

泛型变量T T表示任何类型

function getMsg<K,V>(value1:K,value2:V):[K,V]{
    return [value1,value2]
}
console.log(arr1[0].split(''))
console.log(arr1[1].toFixed(1))

2泛型约束

泛型约束关键字extends 你一般情况下你使用泛型会报错，你就必须使用泛型约束来约束一下，来规定他的数据类型,受到了接口定义类型的约束。

function f9<T>(x:T):number{
    return x.length
};
f9<string>('hello itlove')
​
泛型约束 extends 
​
interFace LengthNum {
    return x.length
};
function f10<T extends LengthNum>(x:T):number{
    return x.length
};
f10<string>('hello itlove')

3泛型接口

定义函数，判断传入的参数是否相同。

let fn1 = function(s1,s2){
    return s1 == s2
};
fn1('a','b');
​
let fn2 = function(s1:string,s2:string):boolean{
    return s1==s2
};
fn2('a','b')
​
另一个函数
let fn3 = function(x:string,y:string):boolean{
    if(x>y){
        return true;
    }else{
        return false;
    }
};
fn4('x','y')
​
定义规范
interface  InspectFn{   
    <T>(x:T,y:T):boolean;
}
​
let fn1:InspectFn = function(s1,s2){
    return s1 == s2
};
fn1<string>('a','b');