typeScript进阶(14)_泛型和注意事项

泛型

在这里插入图片描述

区别

1.不使用泛型

const returnStr = (str: string): string => {
    
    
  return str;
};

const returnNumber = (num: number): number => {
    
    
  return num;
};

2.使用泛型

const returnFun = <T>(varData: T): T => {
    
    
  return varData;
};

console.log(returnFun<string>('123456'))
console.log(returnFun('liuqing'))//自动类型推论

通过上面的例子我们可以了解到的信息：
1.使用泛型可以实现复用；
2.使用泛型后，调用方法可以写<xxx>，也可以不写，ts会自动类型推论；
3.T为变量，可以为随意字符变量。

数组泛型

我们也可以使用数组泛型（Array Generic） Array 来表示数组：

let arr: Array<number> = [1,2,2,3];

Array<number> === number[]

可参考：typeScript基础(6)_数组类型

多个类型参数

const returnFun = <T,G>(varData1: T,varData2:G): [T,G] => {
    
    
  return [varData1,varData2]
};
console.log(returnFun<string,number>('123456',123456)) //['123456',123456]

returnFun函数传入两个不通类型的数据，将他们以元组类型的形式返回。

类型约束

interface Tface {
    
    
  length:number
}
const returnFun = <T extends  Tface>(varData: T): T => {
    
    
 
  return varData ;
};

console.log(returnFun<string>("123456"));
// console.log(returnFun<number>(123456)); //类型“number”不满足约束“Tface”

当T几次恶化那个了Tface之后，T就被约束，这个时候我们传入的参数，就只能传包含length属性的值。

泛型接口

interface Tface {
    
    
  <T>(zjq: T): T;
}

const myFun: Tface = <T>(aaa: T): T => {
    
    
  return aaa;
};

console.log(myFun("六卿"))

泛型类

class F<T> {
    
    
  name: T;
  add: (num1: T) => T;
}

let f: F<string> = new F<string>();
f.name = "liuqing";
f.add = (num1: string) => num1;

在泛型约束中使用类型参数

你可以声明一个类型参数，且它被另一个类型参数所约束。比如

const myFun = <T extends G, G>(prop: T, obj: G): T => {
    
    
  return prop;
};

let x = {
    
     a: 1, b: 2, c: 3, d: 4 };

console.log(myFun(x, {
    
     b: 10, d: 20 }));

上面的意思是函数myFun的第一个参数继承了第二个参数，所以传入第一个参数，必须包含第二个参数。T的范围只能比G的范围更广。