TypeScript 回调函数泛型类型指定：实现类型安全与灵活性的指南

vue.js

2024-03-22 14:44:07

TypeScript 中使用泛型类型指定回调：详尽指南

简介

在使用 TypeScript 时，为回调指定泛型类型至关重要，以确保代码的类型安全和可靠性。本文将深入探讨如何在回调函数中指定泛型类型，并提供实用示例来演示其用法。

什么是泛型类型？

泛型类型允许我们在编写代码时使用占位符或变量来表示特定的类型。这使我们能够创建可重用且灵活的代码，可以处理各种数据类型。

在回调中指定泛型类型

为了在回调中指定泛型类型，我们需要使用尖括号语法。例如：

next: <T>(payload: T) => unknown

在这里，T 是泛型类型参数，它将被回调函数的参数类型所取代。

指定联合类型的泛型类型

如果回调函数需要处理联合类型，我们可以使用 extends 来指定泛型类型的范围。例如：

next: <T extends R>(payload: T) => unknown

这将强制回调函数接受 R 类型或其子类型的参数。

使用范例

让我们通过一个实际示例来说明如何使用泛型类型指定回调。考虑以下 useSubscription 组件：

export const useSubscription = (
  subscriptionString: string,
  variables: unknown,
  next: (data: unknown) => unknown
) => {
  // ...
}

在这个示例中，next 回调函数的参数类型被指定为 unknown。这可能会导致类型错误，因为回调函数期望接受订阅数据的具体类型。

为了解决这个问题，我们可以使用泛型类型指定：

export const useSubscription = <
  T extends keyof typeof subscriptions,
  V = T extends keyof typeof subscriptions
    ? (typeof subscriptions)[T]['__generatedSubscriptionInput']
    : never,
  R = T extends keyof typeof subscriptions
    ? (typeof subscriptions)[T]['__generatedSubscriptionOutput']
    : never
>(
  subscriptionString: T,
  variables: V,
  next: <T extends R>(payload: T) => unknown
) => {
  // ...
}