Type 'undefined' is not assignable to type 'Orientation'.

[shyakadavis]

Describe the bug

This could be a follow-up to #621

Right now, when assigning this orientation prop

    export let orientation: $$Props['orientation'] = 'horizontal';

to <SeparatorPrimitive.Root />, you get the error:

 Type 'undefined' is not assignable to type 'Orientation'.

Error: Type '{ class: string; orientation: Orientation | undefined; decorative: boolean | undefined; }' is not assignable to type 'SeparatorProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
  Type '{ class: string; orientation: Orientation | undefined; decorative: boolean | undefined; }' is not assignable to type '{ orientation?: Orientation; decorative?: boolean; asChild?: boolean | undefined; el?: HTMLDivElement | undefined; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
    Types of property 'orientation' are incompatible.
      Type 'Orientation | undefined' is not assignable to type 'Orientation'.
        Type 'undefined' is not assignable to type 'Orientation'. (ts

Would have opened a P.R, but noticed the separator types come from Melt (https://github.com/huntabyte/bits-ui/blob/main/packages/bits-ui/src/lib/bits/separator/types.ts), so please feel free to close if it's an upstream issue.

Thanks.

Reproduction

N/A

Logs

No response

System Info

System:
    OS: macOS 13.6.9
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 11.08 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/Library/Caches/fnm_multishells/32411_1724919883724/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.5.2 - ~/Library/Caches/fnm_multishells/32411_1724919883724/bin/npm
    pnpm: 9.9.0 - ~/Library/pnpm/pnpm
    bun: 0.7.3 - ~/Library/pnpm/bun
    Watchman: 2024.03.18.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 128.0.6613.85
    Safari: 17.6
  npmPackages:
    @sveltejs/kit: ^2.5.25 => 2.5.25
    bits-ui: ^0.21.13 => 0.21.13
    svelte: ^4.2.19 => 4.2.19

Severity

annoyance

[shyakadavis]

Hmm... just noticed similar issues also exist in:

Avatar:

Error: Type '{ delayMs: number | undefined; class: string; }' is not assignable to type 'AvatarProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
  Type '{ delayMs: number | undefined; class: string; }' is not assignable to type '{ delayMs?: number; loadingStatus?: "loading" | "loaded" | "error" | undefined; onLoadingStatusChange?: OnChangeFn<"loading" | "loaded" | "error"> | undefined; asChild?: boolean | undefined; el?: HTMLDivElement | undefined; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
    Types of property 'delayMs' are incompatible.
      Type 'number | undefined' is not assignable to type 'number'.
        Type 'undefined' is not assignable to type 'number'. (ts)

Command:

Error: Type '{ class: string; value: string | undefined; }' is not assignable to type 'CommandProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
  Type '{ class: string; value: string | undefined; }' is not assignable to type '{ state?: Writable<State>; label?: string; shouldFilter?: boolean; filter?: (value: string, search: string) => number; value?: string; onValueChange?: (value: string) => void; loop?: boolean; ids?: Partial<...>; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
    Types of property 'value' are incompatible.
      Type 'string | undefined' is not assignable to type 'string'.
        Type 'undefined' is not assignable to type 'string'. (ts)

Command-Dialog:

Error: Type '{ value: string | undefined; class: string; }' is not assignable to type 'CommandProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
  Type '{ value: string | undefined; class: string; }' is not assignable to type '{ state?: Writable<State>; label?: string; shouldFilter?: boolean; filter?: (value: string, search: string) => number; value?: string; onValueChange?: (value: string) => void; loop?: boolean; ids?: Partial<...>; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
    Types of property 'value' are incompatible.
      Type 'string | undefined' is not assignable to type 'string'.
        Type 'undefined' is not assignable to type 'string'. (ts)

Select-Item:

Error: Type '{ value: unknown; disabled: boolean | undefined; label: string | undefined; class: string; }' is not assignable to type 'SelectItemProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
  Type '{ value: unknown; disabled: boolean | undefined; label: string | undefined; class: string; }' is not assignable to type '{ value: unknown; label?: string; disabled?: boolean; asChild?: boolean | undefined; el?: HTMLDivElement | undefined; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
    Types of property 'label' are incompatible.
      Type 'string | undefined' is not assignable to type 'string'.
        Type 'undefined' is not assignable to type 'string'. (ts)

[shyakadavis]

For now, I'll just turn off "exactOptionalPropertyTypes": false.

Please let me know if I can help with this.

Thanks.

[shyakadavis]

Cc: @Stadly

[Stadly]

I've created a pull requeset in Melt UI that should fix most (probably all) of these: https://github.com/melt-ui/melt-ui/pull/1256. Feel free to give it an upvote :)

[huntabyte]

Yeah @shyakadavis this tsconfig option kinda sucks with Svelte 4 due to how the types are handled with optional props. This should be irrelevant with the Svelte 5 version.