Conditional typescript in this Svelte 5 component

[frederikhors]

I have this Svelte 5 code:

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

    type SingleDateProps = BaseProps & {
        range?: false;
        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,
        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?

[JLAcostaEC]

As far as I know the first parameter of an event is the type of the event itself (e: Event) => {} you should do the following: (e: Event) => handleChange(e, dates)

<DateComponent
    onchange={(e) => handleChange(e, dates)}
/>

[JLAcostaEC]

Of course this applies if onchange does not have a handler like in the example and is directly doing something like:

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

<input {onchange} />

The right thing would be:

<script lang="ts">
    let {
        dates = $bindable(),
        range,
        onchange
    }: Props = $props();
    
    const handleChange = (e, dates) => {
      onchange?.(e, dates);
    }
</script>

<input onchange={(e) => handleChange(e, dates) />

[webJose]

That applies to standard DOM events only. When you write the event (callback), you can do whatever, including hijacking the name of a standard DOM event like onchange.

[webJose]

Most likely the problem is that range is optional. If you don't explicitly set it, TS cannot see that it is false. It will be false | undefined, which doesn't match the type definitions.

Try this:

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

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

Basically, remove range from SingleDateProps.

[JLAcostaEC]

mmmm i think you need to implement TS generics on this.

[JLAcostaEC]

or why not just use onchange?: (e: Date[] | Date | undefined) => void;??

    type Props = {
        range: boolean;
        dates?: Date[] | null;
        onchange?: (e: Date[] | Date | undefined) => void;
    };
    
    let {
        dates = $bindable(),
        range,
        onchange
    }: Props = $props();

TS generics offer fine-grained types, but if you're looking for simplicity, go for the above.

[frederikhors]

@webJose removing range doesn't work unfortunately.

[JLAcostaEC]

sorry i forgot to include it in the example. But just add it hehehe. BTW, check the answer of @brunnerh

[brunnerh]

This looks like a potential bug, bare TS works.

(Type issues belong in language-tools, check existing issues, though.)