Genéricos
la diferencia
1. No uses genéricos
const returnStr = (str: string): string => {
return str;
};
const returnNumber = (num: number): number => {
return num;
};
2. Usa genéricos
const returnFun = <T>(varData: T): T => {
return varData;
};
console.log(returnFun<string>('123456'))
console.log(returnFun('liuqing'))//自动类型推论
La información que podemos aprender del ejemplo anterior:
1. El uso de genéricos puede lograr la reutilización
2. Después de usar genéricos, el método de llamada se puede escribir <xxx>o no, ts escribirá automáticamente la inferencia
3. T es una variable, puede ser cualquier carácter variable.
Arreglos genéricos
También podemos usar Array Generic Array para representar matrices:
let arr: Array<number> = [1,2,2,3];
Array<number>===number[]
Consulte: base de typeScript (6)_tipo de matriz
Parámetros de tipo múltiple
const returnFun = <T,G>(varData1: T,varData2:G): [T,G] => {
return [varData1,varData2]
};
console.log(returnFun<string,number>('123456',123456)) //['123456',123456]
La función returnFun pasa dos tipos diferentes de datos y los devuelve como un tipo de tupla.
restricciones de tipo
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”
Cuando T deteriora esa Tface varias veces, se restringe T. En este momento, los parámetros que pasamos solo pueden pasar el valor que contiene el atributo de longitud.
interfaz genérica
interface Tface {
<T>(zjq: T): T;
}
const myFun: Tface = <T>(aaa: T): T => {
return aaa;
};
console.log(myFun("六卿"))
clase genérica
class F<T> {
name: T;
add: (num1: T) => T;
}
let f: F<string> = new F<string>();
f.name = "liuqing";
f.add = (num1: string) => num1;
Uso de parámetros de tipo en restricciones genéricas
Puede declarar un parámetro de tipo y está restringido por otro parámetro de tipo. por ejemplo
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 }));
Lo anterior significa que el primer parámetro de la función myFun hereda el segundo parámetro, por lo que cuando se pasa el primer parámetro, se debe incluir el segundo parámetro. El rango de T solo puede ser más amplio que el de G.