时间戳

首页 > 解决方案 > 打字稿：具有枚举类型参数的函数分配给具有字符串参数类型的回调

reactjs - 打字稿：具有枚举类型参数的函数分配给具有字符串参数类型的回调

问题描述

我有一个带有回调的下拉组件onSelect:(option: string) => void

我在一个应用程序中将它用作排序选择器，其中选项是枚举类型：

enum SORT_OPTIONS {
  LATEST = 'LATEST',
  OLDEST = 'OLDEST'
}
const onSortSelect = (val: SORT_OPTIONS) => {...}
<MyDropdown onSelect={onSortSelect} ... />

打字稿抱怨：

Type '(val: SORT_OPTIONS) => void' is not assignable to type '(option: string) => void'.
  Types of parameters 'val' and 'option' are incompatible.
    Type 'string' is not assignable to type 'SORT_OPTIONS'.  TS2322

这有点违反直觉但很有意义，因为在MyDropdown一个字符串option中将传递给onSortSelect回调，这需要一个枚举值。

问题是在这里修复类型的最佳方法是什么？IMO 两个函数都输入正确，onSelect应该接受任何字符串，因为MyDropdown可以在任何上下文中使用。onSortSelect应该只接受SORT_OPTIONS。

目前我正在投射 onSortSelect 的类型：<MyDropdown onSelect={onSortSelect as (val:string) => void} ... />但感觉很冗长

标签： reactjstypescript

解决方案

您的回调处理onSelect:(option: string) => void

这意味着它将任何字符串传递给句柄，例如：hello、、test等等。

但是您const onSortSelect = (val: SORT_OPTIONS) => {...}只需要字符串的子集：LATEST、OLDEST。

因此，TypeScript 警告您不能将整个集合传递给需要子集的函数。

要解决此问题，您需要将onSelect处理程序更新为：

onSelect:(option: SORT_OPTIONS) => void

推荐阅读