根据另一个属性值键入 Svelte 组件属性答案

【问题标题】：Type a Svelte components property based on another properties value根据另一个属性值键入 Svelte 组件属性
【发布时间】：2021-06-06 03:59:05
【问题描述】：

在纤细的组件中

<script lang="ts">
    export let multiple: boolean = false;
    export let value: string|string[];

    // ...
</script>

<!-- ... -->

value 属性的类型应该是string 如果multiple == false 和string[] 否则。如何实现？

编辑：这个想法是为组件获得Discriminated Union 效果。

【问题讨论】：

【解决方案1】：

您需要将“值”的类型设为条件类型。为此，您应该声明一个函数，该函数将为您确定并返回类型。可以这样做：

declare function f<T extends boolean>(x: T): T extends false ? string : string[];

然后你可以定义你的 props 并且 'value' 的类型将被设置为 string，除非组件声明将 'multiple' 设置为 true，其中 'value' 的类型将变为 string[]。

export let multiple: boolean = false;
export let value = f(multiple);

【讨论】：

如果我正确理解了您的答案，value 的类型由f 的返回类型引用。这与直接使用 export let value: string|string[] = multiple ? [] : '' 之类的内容有何不同。但是这个问题对我来说似乎仍然没有解决，因为value 可以从组件的外部设置。在这种情况下，类型检查仍然应该起作用。
使用let value: string|string[] = multiple ? [] : '' 仍然只将value 设置为联合类型。 f 函数对于使类型有条件是必需的。因为value 和multiple 是从父组件设置的，所以条件类型检查应该在父组件和子组件中进行，以完全避免value 成为联合类型。