Conditional typescript in this component

Question

I have this Svelte 5 code:

<script lang="ts">
    type BaseProps = {
        required?: boolean;
    };

    type SingleDateProps = BaseProps & {
        range?: false | undefined;
        dates?: Date | null;
        onchange?: (e: Date | undefined) => void;
    };

    type RangeDateProps = BaseProps & {
        range: true;
        dates?: Date[] | null;
        onchange?: (e: Date[] | undefined) => void;
    };

    type Props = SingleDateProps | RangeDateProps;

    let {
        dates = $bindable(),
        range = false,
        onchange
    }: Props = $props();
</script>

in this component the dates are properly seen like dates: Date[] | undefined (note the range prop):

<DateComponent
    range
    onchange={(dates) => {
        // use dates here
    }}
/>

if I use this component instead (without the range prop):

<DateComponent
    onchange={(dates) => {
        // use dates here
    }}
/>

dates now is seeing like any:

Parameter 'dates' implicitly has an 'any' type. ts(7006)

(parameter) dates: any

Why?

brunnerh · Accepted Answer · 2025-06-05 18:18:31Z

1

Looks like a bug, bare TS works.

answered Jun 5 at 18:18

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

José Ramírez · Accepted Answer · 2025-10-22 00:39:55Z

Use generics. The following works:

<script lang="ts" generics="T extends boolean = false">
    import Self from './Test.svelte';

    type Props = {
        range?: T;
        dates?: T extends false ? Date : [Date, Date];
        onChange?: (dates: T extends true ? [Date, Date] : Date) => void;
    };

    let {
        range,
        dates,
        onChange
    }: Props = $props();
</script>

<Self range dates={[new Date(), new Date()]} onChange={(dates) => {}} />
<Self dates={new Date()} onChange={(date) => {}} />

How It Works

Using generics in components usually require a default type because, at least at present time, the Svelte language tools cannot infer the type of T when the property that defines T is not specified, which is the case for the range property.

Anyway, copy the code snippet into a Test.svelte file in your IDE and verify the types of properties and the parameter types in the onChange callback. They should all be OK.

Collectives™ on Stack Overflow

Conditional typescript in this component

2 Answers 2

Comments

How It Works

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

How It Works

Comments

Your Answer

Sign up or log in

Post as a guest

Related