Props type inference in Svelte 5: infer most, specify some?

[th0rgall]

Hello, I'm doing a sizeable Svelte 4 -> 5 migration, and I've encountered some components which have many props with default values.

In Svelte 4, Svelte/TS could infer the types of the props using their default values. For those props that did not have a default value, it was possible to explicitly specify their type while keeping inference for the rest.

I haven't found a way to do this in Svelte 5 without explicitly specifying the type for each property. Am I missing something?

Here's an excerpt from the codebase with a few default values:

Svelte 4:

  export let accept: string | string[]; // <-- notice this is the only prop with a specific type definition
  export let disabled = false;
  export let maxSize = Infinity;
  export let minSize = 0;
  export let multiple = true;

In Svelte 5, two changes are needed, as far as I could find:

1. Every property has to be explicitly specified in a separate type definition.
2. Every property which has a default ("fallback") now needs to be made optional, otherwise the component user still has to provide it.

  type Props = {
    accept: string | string[];
    disabled: boolean;
    maxSize?: number;
    minSize?: number;
    multiple?: boolean;
  };

  let {
    accept,
    disabled = false,
    maxSize = Infinity,
    minSize = 0,
    multiple = true,
  }: Props = $props();

What doesn't work:

  // Svelte 5: if we try to specify a type only for `accept`, we get errors like:
  //  > Property '.......' does not exist on type '$$ComponentProps'.
  let {
  .... props with default values....
  }: { accept: string | string[] } = $props();

Is the conclusion that Svelte 5 is just unavoidably more verbose in this situation?

[krishkhinchi]

Hii @th0rgall,

In Svelte 5, to mix inferred defaults with explicit types, use Partial or optional props:

interface ExplicitProps { accept: string | string[] }

let {
  accept,
  disabled = false,
  maxSize = Infinity,
  minSize = 0,
  multiple = true,
  preventDropOnDocument = true,
  noClick = false,
  noKeyboard = false,
  noDrag = false,
  noDragEventsBubbling = false,
  containerClasses = '',
  containerStyles = '',
  disableDefaultStyles = false,
  name = ''
}: Partial<ExplicitProps> & typeof $props() = $props();

• Partial<ExplicitProps> → types only required props (accept).
• typeof $props() → keeps inference for defaults.

✅ Rule of thumb: use explicit types for required props, defaults handle inference for the rest.

---

If this answer solved all your doubts, please mark it as solved. If not, please tell me your doubt.

[th0rgall]

Thanks for trying to help, but did you check this answer in practice? This doesn't have any effect. Partial makes props optional, and accept is the only one we don't want to have optional. Moreover, typeof $props() isn't even valid TypeScript, let alone that it would do some weird recursion if it worked. typeof docs state you can only use typeof on identifiers, not on function call expressions.

Honestly, this smells like an AI answer. You have to verify those, always.