前端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');