什么是 TypeScript 泛型？

TypeScript 为什么要引入泛型?

泛型(Generics)是 Typescript 中很重要的一个特性,它可以帮助我们创建可重用的组件,同时还能具备类型安全性。

主要的优点有:

更好的可重用性:通过泛型可以创建一个组件,使其可以支持多种类型,比如创建一个函数或类时,不预先指定具体的类型,而是在使用的时候再指定类型。这样就可以对不同的类型重复使用同一个组件。
类型安全:泛型会要求在使用组件时传入的类型与组件内部使用的类型一致,可以在编译时发现错误。
灵活性:可以只在需要的时候指定类型参数,并且参数可以有多个。类型参数也可以限制约束条件来约束传入的类型。
对于接口和类来说,泛型可以明确成员的类型,增强代码的可读性。

常见的泛型用法有:

泛型函数和泛型类:可以定义泛型函数或泛型类,在实例化时指定类型参数
泛型接口:可以定义泛型接口,使接口更灵活适用
泛型约束:可以对泛型的类型参数加以约束

总之,泛型是 Typescript 强大的类型系统特性之一,可以构建灵活、可重用且类型安全的组件,提高代码质量和可维护性。正确使用泛型能大大提升 Typescript 的开发体验。

泛型是什么？

泛型程序设计(generic programming)是程序设计语言的一种风格或范式

泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型，在实例化时作为参数指明这些类型在typescript中，定义函数，接口或者类的时候，不预先定义好具体的类型，而在使用的时候在指定类型的一种特性

假设我们用一个函数，它可接受一个 number 参数并返回一个number 参数，如下写法：

function returnItem (para: number): number { 
    return para 
}

如果我们打算接受一个 string 类型，然后再返回 string类型，则如下写法：

function returnItem (para: string): string { 
    return para 
}

上述两种编写方式，存在一个最明显的问题在于，代码重复度比较高

虽然可以使用 any类型去替代，但这也并不是很好的方案，因为我们的目的是接收什么类型的参数返回什么类型的参数，即在运行时传入参数我们才能确定类型

这种情况就可以使用泛型，如下所示：

function returnItem<T>(para: T): T { 
    return para 
}

可以看到，泛型给予开发者创造灵活、可重用代码的能力。

泛型的使用方式

泛型的使用方式主要有以下几种:

1. 泛型函数

可以在函数名称后添加尖括号来定义泛型函数,在函数体中使用 T 来表示泛型类型。调用时指定类型参数:

function identity<T>(arg: T): T {

  return arg; 

}

let output = identity<string>("myString");

2. 泛型接口

可以在接口名称后添加尖括号来定义泛型接口,接口中的属性则可以使用 T 来表示类型:

interface GenericIdentityFn<T> {

  (arg: T): T;

}

function identity<T>(arg: T): T {

  // ...

}

let myIdentity: GenericIdentityFn<number> = identity;

3. 泛型类

可以在类名称后添加尖括号来定义泛型类,类中的属性或方法则可以使用 T 来表示类型:

class GenericNumber<T> {

  zeroValue: T;

  add: (x: T, y: T) => T;

}

let myGenericNumber = new GenericNumber<number>();

4. 泛型约束

可以通过 extends 关键字添加约束条件:

interface Lengthwise {

  length: number;

}

function loggingIdentity<T extends Lengthwise>(arg: T): T {

  console.log(arg.length); 

  return arg;

}

这些是泛型的常见用法,可以灵活运用泛型来实现组件的可重用性和类型安全。泛型的使用方式

泛型的应用场景

泛型的常见应用场景包括:

1. 封装组件

可以使用泛型来封装可重用的组件,比如创建一个通用的缓存组件:

class Cache<T> {

  private data: T;

  constructor(data: T) {

    this.data = data;

  }

  get() {

    return this.data;

  }

  set(data: T) {

    this.data = data;

  }

}

const numCache = new Cache<number>(123);

这样这个缓存组件就可以支持不同的类型。

2. 函数重载

可以使用泛型给函数增加多种类型的重载定义:

function arrayOf<T>(value: T): T[];

function arrayOf<T>(value: T[]): T[];

function arrayOf<T>(value: T | T[]): T[] {

  return Array.isArray(value) ? value : [value];

}

3. 接口定义

可以使用泛型给接口增加灵活性:

interface Result<T> {

  data: T;

  error?: string;

}

const result: Result<number> = {

  data: 123

};

4. 类型别名

可以给类型别名增加泛型:

type PromiseResponse<T> = Promise<{

  data: T;

  error?: string; 

}>

5. 泛型约束

可以对泛型加以约束,限制泛型的类型范围。

综上,泛型的应用场景非常广泛,合理利用泛型可以大幅提高代码的灵活性和复用性。