TypeScript学习- 泛型

泛型是类型推断的产物，其目的是为了提高代码复用性。在其他强类型语言中，泛型常用来写可重用的组件，使组件可以支持多种类型的数据（TS也有，TS自带的lib的定义就大量使用了泛型）。我们可以将泛型理解为一种数据模板，在需要关注方法逻辑而非数据项时使用。

基础语法

泛型的语法如下：

function demo <T>(param:T) : T {
  return param;
}

const output = genericity('123');  // 返回值是字符串类型
const output_2 = genericity(123);  // 返回值是数字类型

类型变量T用于捕获入参param的类型，而且我们指定了函数的返回类型也是T，即约束了出参类型与入参类型一致。
泛型定义还有其他的语法，以下两种写法与上面的效果一致：

// 定义泛型接口
interface Genericity {
  <T>(arg:T) : T;
}

// 使用带有调用签名的对象字面量来定义泛型函数
let myIdentity:{<T>(arg:T) : T} = (param) => param;

泛型变量

泛型变量可以作为接口（interface）的一部分，用来提高接口的复用性。举个例子，假设我们要设计两个列表接口，一个返回书的列表，一个返回借阅记录的列表，两者除了数据项的结构不一致，其他的完全一致。

interface Book {
  id:number;
  name:string;
  author_id:number;
}

interface BorrowRecord {
  borrower_id:number;
  book_id:number;
  time:number;
}

interface List {
  limit:number;
  offset:number;
  total:number;
}

这时候，有的同学可能会使用接口继承：

interface BooksList extends List {
  items:Book[];
}

interface BorrowRecordsList extends List {
  items:Book[];
}

// 声明两个方法，并指定了他们返回只的类型，省略方法实现。
const list_books = () : BooksList => {...};
const list_borrow_records = () : BorrowRecordsList => {...};

但如果我们使用泛型，那他们可以共用一个泛型接口：

// 将泛型变量T作为接口的参数，并使用T[]作为items字段的类型
interface CommonList<T> {
  items:T[];
  limit:number;
  offset:number;
  total:number;
}

const list_books = () : CommonList<Book> => {...};
const list_borrow_records = () : CommonList<BorrowRecord> => {...};

泛型约束

我们可以约束泛型类型带有某些属性或方法，而不是any。

interface Weight {
  weight:number;
}

function sort<T extends Weight>(array:T[]) {}

sort([{ value: 1 }]);  // 报错，接口约束了数组的每一项都必须带weight字段
sort([{ value: 1, weight: 2 }]);

我们甚至能用一个泛型变量去约束另一个泛型变量

// 约束了第二个参数必须是第一个参数的某个key
function get_property<T, K extends keyof T>(obj:T, key:K) {
  return obj[key];
}

const x = { y: 1, z: 2 };

get_property(x, 'y'); // 不报错
get_property(x, 'm'); // 报错，第二个参数的值只能是'y'或'z'

泛型类

// 声明一个带泛型变量的类
class GenericClass<T> {
  private flag:T;

  constructor(flag:T) {
    this.flag = flag;
  }

  public set_flag(flag:T) {
    this.flag = flag;
  }

  public get_flag() {
    return this.flag;
  }
}

// 分别用两个不同类型的参数实例化了两个对象
const a = new GenericClass(123);
const b = new GenericClass('123');

a.set_flag('123'); // 报错，根据实例化时传入的参数推断了，flag的属性为number
a.set_flag(456);
a.get_flag(); // 456

b.set_flag(123); // 报错，根据实例化时传入的参数推断了，flag的属性为string
b.set_flag('456');
b.get_flag(); // '456'

通过上面一个简单的例子，我们复用了一个类，它通过实例化时所传入参数的类型，来指定内部属性的数据类型，并通过类型推断给方法的参数加上约束。若没有使用泛型的话，我们将不得不把上面的类拆成连两个来满足需求，即使它们内部的方法逻辑是完全一致的。

最后编辑于：2020.03.01 22:21:39