🐛 BUG: Svelte optional props: code works but vscode complains

[felixsanz]

What version of astro are you using?

v1.0.0-beta.40

Are you using an SSR adapter? If so, which one?

no

What package manager are you using?

npm

What operating system are you using?

linux

Describe the Bug

Using typescript this complains on vscode, it tells you that the signature doesn't mach and you're missing a prop.

Component1.astro

---
import Component2 from "./Component2.svelte";
---
<Component2 />

Component2.svelte

<script lang="ts">
  export let optional: string = "none";
</script>

<h1>{optional}</h1>

Link to Minimal Reproducible Example

NA

Participation

• I am willing to submit a pull request for this issue.

[felixsanz]

By the way confirming that the code works 100%, it's just vscode showing an error:

(alias) function Component2(_props: typeof Props): any
import Component2
Type '{}' is not assignable to type 'IntrinsicAttributes & { optional: string }'.
  Type '{}' is missing the following properties from type '{ optional: string }': optional ts(2322)

[Princesseuh]

It seems like the type that Svelte gives us doesn't properly include that a certain props might be optional (notice no ? after the prop inside the error message)

It might be something on our end but I'm feeling like this could be an upstream incompatibly, I'll have to check how Svelte handle this

[felixsanz]

I ported this component from sveltekit + svelte and it works fine there

[shaunchander]

It seems like the type that Svelte gives us doesn't properly include that a certain props might be optional (notice no ? after the prop inside the error message)

It might be something on our end but I'm feeling like this could be an upstream incompatibly, I'll have to check how Svelte handle this

I believe Svelte checks if props have a defined value. If it does then it marks it as optional?

I can also confirm this is an issue on OS X.

Also, I noticed that if you use a union type, for example: export let prop: string | undefined = "", the reported type for prop when using the component is just string. It seems that undefined is just dropped (which could be something on Svelte or Astro's end).

[Princesseuh]

It seems like the type that Svelte gives us doesn't properly include that a certain props might be optional (notice no ? after the prop inside the error message)

It might be something on our end but I'm feeling like this could be an upstream incompatibly, I'll have to check how Svelte handle this

I believe Svelte checks if props have a defined value. If it does then it marks it as optional?

Yeah, this is how it works in Svelte itself, if a prop has a default value it's considered optional

I investigated a bit and the issue here is that due to how we get props for Svelte components (just taking the props parameter used in the render function), we don't get if a prop is optional or not, just a list of the props with no real information

The way the Svelte tooling handle this is through a function that takes two parameters, the optional props and the required ones and return a list with the proper types / optional markers through some TS trickery.

I think we should be able to implement that fairly easily into our tooling too (famous last words)

Also, I noticed that if you use a union type, for example: export let prop: string | undefined = "", the reported type for prop when using the component is just string. It seems that undefined is just dropped (which could be something on Svelte or Astro's end).

This could be a separate issue on our end but I know that the Svelte tooling had some issues with this in the past too. Maybe this will be fixed by fixing the main issue