Svelte typescript: Props with default values cause Type error of missing props

[Dulanjala007]

//component code

<script lang="typescript">
  export let name= '';
</script>

when component is added without providing the Prop "name", vs code shows this error
component = Service

Type '{ service: Service; }' is not assignable to type 'IntrinsicAttributes & { service: Service; className: string; }'.
  Property 'name' is missing in type '{ service: Service; }' but required in type '{ service: Service; name: string; }'

Currently I'm getting rid of this by adding explicit types

<script lang="typescript">
  export let name: string | undefined = '';
</script>

we shouldn't have to do this right, can't we infer the type from the default value assignment?
or are there any other syntax (like '?') to make this more cleaner....
or am I doing something wrong?

[jasonlyu123]

A proposal of this has been discussed here #214 (comment) Might be a good way to improve how the props is determined to be optional

[dummdidumm]

We did originally not do this because it seemed very hard to track down if the initializer itself is initialized.

Example:

let a: string;
export let b = a;

@jasonlyu123 Or is this no longer relevant / did you find a way to deal with this?

[jasonlyu123]

Oh! That's an issue. No. I don't have any solution for this.

[dummdidumm]

Maybe we could at least relax and fix it for 90% of the cases like this: If initializer is not a variable, mark it as optional.

[jasonlyu123]

Svelte dev build actually has required props checking. It only checks if the variable declaration has initialize expression.
REPL: https://svelte.dev/repl/cf729f684c904678915c52eaf97788b9?version=3.23.2

this is how it checks:

https://github.com/sveltejs/svelte/blob/38de3b2e9f46925be12ce43f55c424b49ddfb0af/src/compiler/compile/render_dom/index.ts#L173

https://github.com/sveltejs/svelte/blob/0e2bc352dfeeacf1bdba8c43dacceac15a85f337/src/compiler/compile/Component.ts#L616

https://github.com/sveltejs/svelte/blob/bad7443eb3c9e9e6f6b3c53ba255bab95c10f087/src/compiler/compile/utils/scope.ts#L4

https://github.com/Rich-Harris/periscopic/blob/d7a820b04e1f88b452313ab3e54771b352f0defb/src/index.ts#L125

[dummdidumm]

Thought about this some more: I think we should mark props as optional as soon as any kind of initializer is given. Typescript itself will make sure that usages are correct, so this is safe to do.

[PatrickG]

Thought about this some more: I think we should mark props as optional as soon as any kind of initializer is given. Typescript itself will make sure that usages are correct, so this is safe to do.

Sounds reasonable.
I could rebase my branch and create a PR with my changes.

[dummdidumm]

Sounds good! One thing about your changes: you removed the undefined check. I think this is still needed because else it is marked as required even if the user types export let bla: string | undefined .

[PatrickG]

That's true, like I explained in #214 (comment), this is the correct behavior in my opinion.
Also, if a variable has no initializer and you do not pass the prop to the component, Svelte will log a warning.

But if you think we should still mark a variable as optional if it has the undefined type, I can revert this.

[dummdidumm]

Mhm, that's true, it's more in line with how the svelte compiler treats it. Also it's a difference in strict mode if you type a prop as undefined or optional I think. You convinced me 😄