泛型在TypeScript中的应用

2023-11-02 12:59:06

泛型是TypeScript中用于处理不同数据类型的一种特性。它允许我们定义函数或类，这些函数或类可以处理不同类型的数据，而无需重复代码。

泛型的基本语法如下：

function myFunction<T>(arg: T): T {
  // 代码逻辑
  return arg;
}

在上面的示例中，myFunction 是一个泛型函数，它可以处理任何类型的数据。T 是泛型参数，它表示函数可以处理的数据类型。

我们可以在函数调用时指定泛型参数，如下所示：

const result = myFunction<number>(123);

在上面的示例中，我们指定 T 为 number 类型，因此 myFunction 函数可以处理数字。

泛型还可以用于类，如下所示：

class MyClass<T> {
  private _value: T;

  constructor(value: T) {
    this._value = value;
  }

  getValue(): T {
    return this._value;
  }

  setValue(value: T): void {
    this._value = value;
  }
}

在上面的示例中，MyClass 是一个泛型类，它可以处理任何类型的数据。T 是泛型参数，它表示类可以处理的数据类型。

我们可以在类实例化时指定泛型参数，如下所示：

const myInstance = new MyClass<number>(123);

在上面的示例中，我们指定 T 为 number 类型，因此 MyClass 类可以处理数字。

泛型在TypeScript中非常有用，它可以帮助我们复用代码，使代码更加灵活。在React应用中，我们可以使用泛型来创建复用的组件，这些组件可以处理不同类型的数据。

例如，我们可以创建一个通用的列表组件，如下所示：

function MyList<T>(props: { items: T[] }) {
  return (
    <ul>
      {props.items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}