Question

我有一个可重复使用的组件，我经常在整个应用程序中使用该组件来将多个复选框作为一个组显示。

我的问题是传递用于处理检查动作的功能时出现的问题，因为通常将它们专门键入到要显示的复选框中。

type Status = "Enabled" | "Disabled";

function updateStatus(status: Status) {
   // Some side effects
}

但是在我的可重用组件中，我尝试使用必需的props类型使它尽可能通用：

type CheckboxProps = {
    toggleCheckbox: (title: string) => void;
    // Other props
}

显然这失败了。我已经尝试过使道具具有通用性并对其进行扩展，但是两个功能也不能相互扩展。

目前，我在传递它们时使用 as 处理此问题，但我宁愿完全避免这样做。

是否可以通过这种方式对任何类型的字符串文字联合实现通用的prop函数？

Answer 1

您可以将您的类型设为通用。因此，当您初始化它时，可以说它是状态类型。通用点必须在初始化函数之前定义。

type Status = 'Enabled' | 'Disabled';

function updateStatus(status: Status) {
  // Some side effects
}

type CheckboxProps <T extends string> = {
  toggleCheckbox: (title: T) => void;
  // Other props
};

const prop: CheckboxProps<Status> = {
  toggleCheckbox: updateStatus,
};

prop.toggleCheckbox('Disabled');

playground

React Typescript：键入函数以采用通用字符串文字

1 个答案: