Question

假设我有一个one这样的Select组件。为了简单起见，我们忽略了其他道具。

现在我们的Select组件仅收到两个道具：

set 一组字符串Select组件会将其呈现为Option一堆组件。
defaultValue 是初始选择的选项，它是 set 道具价值之一。

我假设有两种情况。这种情况下，无需警告即可正常运行

<Select set={["peter", "tom", "jos"]} defaultValue={"tom"} />

在编辑器中应注意第二种情况，因为未设置'ben'。

<Select set={["peter", "tom", "jos"]}  defaultValue={'ben'} />

我们可以在第二种情况下进行静态检查，而不是运行时检查吗？

Answer 1

您可以为此类组件定义类型。它必须是通用组件，它将推断作为set属性传入的字符串文字的类型：

function Select<T extends V[], V extends string>(p: { set: T, defaultValue: T[number] }) {
    return <div></div>
}
let s = () => <Select set={["peter", "tom", "jos"]} defaultValue="tom" />


let s2 = () => <Select set={["peter", "tom", "jos"]}  defaultValue="ben" /> // err

在不更改原始Select的定义的情况下，您唯一的选择是使用辅助函数进行检查：

function Select(p: { set: string[], defaultValue: string }) {
    return <div></div>
}
function SelectData<T extends V[], V extends string>(p: { set: T, defaultValue: T[number] }) : { set: string[], defaultValue: string } {
    return p
}
let s = () => <Select {... SelectData({ set: ["peter", "tom", "jos"], defaultValue:"tom" })} />


let s2 = () => <Select {... SelectData({ set: ["peter", "tom", "jos"], defaultValue:"ben" })} /> // err

是否可以确定参数是否为给定的收集类型之一？

1 个答案: