在 TypeScript 的箭头函数中使用泛型

Using generics in Arrow functions in TypeScript

您可以在箭头函数中使用泛型，方法是将其设置在函数参数之前，例如const returnInArray = <T>(value: T): T[] => {}. 然后可以在调用函数时传递泛型，例如
returnInArray<string>('hello').

索引.ts


const returnInArray = <T>(value: T): T[] => {
  return [value];
};

const strArray = returnInArray<string>('hello');
const numArray = returnInArray<number>(100);

泛型
允许我们将类型作为变量传递给函数和类。

使用箭头括号在函数参数之前指定泛型。

调用具有泛型的函数的语法是相同的——它在函数参数之前传递。

请注意，我们不必在调用函数时显式提供泛型。在这种情况下，TypeScript 将能够根据传入参数的类型推断泛型的类型。

索引.ts


const returnInArray = <T>(value: T): T[] => {
  return [value];
};

// 👇️ const strArray: string[]
const strArray = returnInArray('hello');

// 👇️ const numArray: number[]
const numArray = returnInArray(100);

我们可以对泛型应用约束，只允许传递某些类型。

索引.ts


type CanRun = {
  run(): void;
};

// 👇️ Can only be called with object that has run() method
const callRun = <T extends CanRun>(obj: T) => {
  obj.run();
};

// 👇️ the animal runs
callRun({ run: () => console.log('the animal runs') });

class Dog {
  run() {
    console.log('the dog runs');
  }
}

callRun(new Dog()); // 👉️ the dog runs

callRun箭头函数只能用一个对象调用，该对象的属性是run一个返回类型为的函数。 void

如果我们尝试使用不满足该CanRun
类型的类型调用该函数，我们将得到一个错误。

索引.ts


type CanRun = {
  run(): void;
};

const callRun = <T extends CanRun>(obj: T) => {
  obj.run();
};

// ⛔️ Argument of type 'number' is not assignable
// to parameter of type 'CanRun'.ts(2345)
callRun(100);

当您需要保证只能使用包含特定属性的对象调用函数时，这种模式非常常用。

所述对象可以是多种类型，但只要它包含指定的属性，它就可以用作函数的参数。

索引.ts


class Shark {
  swim() {
    console.log('The shark swims');
  }
}

class Dolphin {
  swim() {
    console.log('The dolphin swims');
  }
}

interface CanSwim {
  swim(): void;
}

const callSwim = <T extends CanSwim>(obj: T): void => {
  obj.swim();
};

callSwim<Dolphin>(new Dolphin());
callSwim<Shark>(new Shark());

该callSwim函数接受一个对象参数并调用其swim上的方法。

该函数使用约束来确保它只获取包含swim函数类型属性的传递对象。

您还可以在类的箭头函数中使用泛型。

索引.ts


class GenericArray {
  public arr: (string | number)[] = [];

  insert = <T extends string | number>(el: T): void => {
    this.arr.push(el);
  };

  print = (): void => {
    console.log(this.arr);
  };
}

const ga1 = new GenericArray();

ga1.insert<string>('a');
ga1.insert<number>(1);

ga1.print(); // 👉️ ['a', 1]

// ⛔️ Argument of type '{ hello: string; }' is not assignable
// to parameter of type 'string | number'.ts(2345)
ga1.insert({ hello: 'world' });

可以向insert类方法传递字符串或数字。

–