TypeScript 泛型 类型参数

TypeScript 泛型

说明：某些情况下，函数返回值的类型与参数类型是相关的。

function getFirstData(arr) {
  return arr[0];
}

函数getFirstData()总是返回参数数组的第一个成员。参数数组是什么类型，返回值就是什么类型。

这个函数的类型声明只能写成下面这样。

function fn(arr: any[]): any {
  return arr[0];
}

这样的类型声明，就反映不出参数与返回值之间的类型关系。

为了解决这个问题，TypeScript 就引入了“泛型”。泛型的特点就是带有“类型参数”.

// 定义
function getFirst<T>(arr: T[]): T {
  return arr[0];
}
// 使用
getFirst<string>(["a", "b", "c"]);
// 可以省略 自己推断 但某些特殊场景就需要手动
getFirst(["a", "b", "c"]);
// 特殊场景  如：连接两个类型不一样数组
function combine<T>(arr1:T[], arr2:T[]):T[] {
  return arr1.concat(arr2);
}
combine([1, 2], ['a', 'b']) // 报错
comb<number|string>([1, 2], ['a', 'b']) // 正确

函数的泛型写法

示例:

// 方式一:
function num<T>(arg:T):T {
  return arg;
}
// 方式二:
let num:<T>(arg:T) => T = num;

// 方式三:
let num:{ <T>(arg:T): T } = num;
// 还可以给出类型参数的默认值
function getFirst<T = string>(arr:T[]):T {
  return arr[0];
}

类型参数的约束条件

常用！！！

function comp<T extends { length: number }>(
  a: T,
  b: T
) {
  if (a.length >= b.length) {
    return a;
  }
  return b;
}
comp([1, 2], [1, 2, 3]) // 正确
comp('ab', 'abc') // 正确
comp(1, 2) // 报错

表示类型参数 T 必须满足{ length: number }，否则就会报错