将 Typescript 接口值定义为一组字符串或作为参数传递的任何内容

Question

我不确定问题标题的措辞是否正确 - 我正在处理库中的 React 组件，这些组件的某些属性具有一组特定的预定义值。但在每次使用的基础上，需要向界面添加额外的值。到目前为止效果很好：

export interface CompProps<Variant = string> {
  variant?: 'banana' | 'strawberry' | Variant;
}

不过我注意到，在使用该组件时，它现在将接受 variant 属性的任何字符串，并且 IDE 也不会在某些情况下建议这些预定义值情况。

解决这个问题的正确方法是什么？

Answer 1

也许您可以利用默认类型参数来更强烈地键入 variant 属性，因为它目前默认为 'banana' | 'strawberry' | string。

如果将默认参数设置为 never，则可以避免与一般 string 并集，有效地将 variant 强制为 'banana' 或 'strawberry'，这应该给 IDE 一个关于所需值的更强烈的提示。在这里我还添加了一个约束，使得变体是一个字符串，我假设这就是你想要的。

如果要设置 Variant 类型参数，他们可以明确说明他们希望传递哪些字符串，如下所示：

export interface CompProps<Variant extends string = never> {
  variant?: 'banana' | 'strawberry' | Variant;
}

const test: CompProps<'chocolate'> = {variant: 'chocolate'};

然而，使用此解决方案时，组件仍将必须适应最通用的类型（即 CompProps），因此如果预定义值需要在组件中显而易见，它很可能不会非常有益。

将 Typescript 接口值定义为一组字符串或作为参数传递的任何内容

Define a Typescript Interface Value as either a set of strings or whatever was passed as an argument

javascript

components

typescript

reactjs