Type a Svelte components property based on another properties value

user_8678740 0
Viewed 388

In the svelte component

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

    // ...
</script>

<!-- ... -->

the type of the value property should be string if multiple == false and string[] otherwise. How can this be achieved?

Edit: The idea is to get a Discriminated Union effect for components.

svelte-component svelte-3 svelte typescript
1 Answers

You need to make the type of 'value' a conditional type. To do this you should declare a function that will determine and return the type for you. This can be done like so:

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

Then you can have your props defined and the type of 'value' will be set to string unless the component declaration sets 'multiple' to true where the type of 'value' will become string[].

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