ts-泛型

泛型

介绍

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

初始泛型

// 需求： 我们希望定义一个函数，约束传入值和返回值的类型是一样的
// 不用泛型
function identity(arg:number):number {
  return arg
} // 只适用于传入值 为 number
// or ?
function indentity(arg:any):any {
  return arg
} // 这样并不能达到目的

// 利用泛型
function identity<T>(arg:T):T{
  return arg
} // 我们给identity 添加了类型 T，他帮助我们捕获用户传入了的类型，之后我们就可以用这个类型去限制返回值，完成需求。

// 使用方法 1.
let output = identity<string>('hello') // 显式 的用<> 传入类型
// 2.
let output = identity('hello') // ts 编译器根据传入的参数自动帮我们确定类型

使用泛型变量

// 需求： 我们希望打印 arg 的length
function identity<T>(arg:T):T {
  return arg.length   // err arg has no .length
} //  我们无法确定传入的值是否有 length，所以编译器会报错

// 所以
function identity<T>(arg:T[]):T[] {
  console.log(arg.length)
  return arg
} // 接收类型参数T和参数arg，它是个元素类型是T的数组，并返回元素类型是T的数组
// 也可以
function loggingIdentity<T>(arg: Array<T>): Array<T> {
    console.log(arg.length);  // Array has a .length, so no more error
    return arg;
}

泛型类型

泛型函数的类型与非泛型函数的类型没什么不同，只是有一个类型参数在最前面，像函数声明一样

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: <T>(arg: T) => T = identity;

我们还可以使用带有调用签名的对象字面量来定义泛型函数

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: {<T>(arg: T): T} = identity;

泛型接口

interface GenericIdentityFn {
    <T>(arg: T): T;
}

function identity<T>(arg: T): T {
    return arg;
}

let myIdentity: GenericIdentityFn = identity;

泛型类

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

泛型约束

编译器并不能证明每种类型都有length属性，所以就报错了

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);  // Error: T doesn't have .length
    return arg;
}
// 我们可以通过一个接口 来实现 length的访问
interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}
// 现在这个泛型函数被定义了约束，因此它不再是适用于任意类型
loggingIdentity(3);  // Error, number doesn't have a .length property