TypeScript 中如何使用泛型接口

什么是泛型接口？

在 TypeScript 中，泛型可以帮助我们减少代码的重复程度，并且能够更好地管理类型。泛型就是将类型参数化，使得代码可以适用于多种类型，而泛型接口则是将接口中的某些类型参数化，从而达到代码重用的目的。

如何定义泛型接口？

在 TypeScript 中定义泛型接口，我们需要使用到泛型的语法来声明类型参数。下面是一个简单的例子：

interface IType<T> {
  value: T;
  printType(): void;
}

上面这个接口定义了一个泛型类型 T，并有一个 value 属性和一个方法 printType。这个接口可以用于定义不同类型的对象，如：

const strType: IType<string> = { value: "string", printType: () => console.log("string") };
const numType: IType<number> = { value: 123, printType: () => console.log("number") };

泛型接口的使用场景

泛型接口可以用于很多场景，比如：

对象的 key 和 value 类型不确定

在实际开发中，我们有时需要定义一些 key 和 value 类型不确定的对象，如：

interface IKeyValue<T, U> {
  key: T;
  value: U;
}

这个泛型接口可以用于定义任意类型的 key 和 value 的对象，如：

const obj1: IKeyValue<string, number> = { key: "age", value: 18 };
const obj2: IKeyValue<boolean, string> = { key: true, value: "hello" };

函数的参数和返回值类型不确定

在函数中，有时我们需要传入一些参数或者返回值的类型不确定，这个时候可以使用泛型来解决。比如：

interface IFunc<T, U> {
  (arg: T): U;
}

这个接口定义了一个泛型函数类型，传入参数类型为 T，返回值类型为 U。我们可以使用这个接口来定义任意类型的函数，如：

const add: IFunc<number, number> = (num: number) => num + 1;
const toStr: IFunc<boolean, string> = (flag: boolean) => flag ? "true" : "false";

总结

在 TypeScript 中，使用泛型接口可以帮助我们更好地管理类型，减少代码的重复性，更好地提高代码可读性和可维护性。但是，需要注意的是，泛型的使用也需要谨慎，过度使用泛型会使得代码过于复杂，导致代码的可读性下降。所以，在使用泛型接口时，需要根据实际情况做适当的取舍。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b29f2248841e9894ec9e2e