Svelte default props are conflicted between TypeScript's props type and useDefaultProps causing an unusable output

[Th1nkK1D]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Preact
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/playground/?code=JYWwDg9gTgLgBAbzgVwM4FMAi6BmBDZAGxgAUoIxU4BfOHckOAcgAEAjZYQgE3SgDpgEAPQhgMCKmComAbgBQ84ADsYffAGN0cMhSoJ5cOADc8hZOgD8ALjioYUFQHMF1RegAekWHF74i8DjIyhowQspwALIAngDCEOAQyuiqABRg5JS2upQAlIiGKBjY%2FsQ5qKkGRkam5ui2TAAW6ISEEEwANIXUuQqFUOgwyFARADzcwMYAfAgZevy1FtSjwhPTrkA

Expected Behaviour

If the default value is given in useDefaultProps, it should be used as the default value instead of undefined.

<script context="module" lang="ts">
  interface Props {
    value?: string;
  }
</script>

<script lang="ts">
  export let value: Props["value"] = "hello"; // <- Focus here
</script>

<div>{value}</div>

PS. Playground doesn't not support TypeScript yet.

Actual Behaviour

Both default values given in useDefaultProps and undefined from optional property declared in the props type with TypeScript show up. Make the code unusable because of invalid syntax.

<script context="module" lang="ts">
  interface Props {
    value?: string;
  }
</script>

<script lang="ts">
  export let value: Props["value"] = (undefined = "hello"); // <- Focus here
</script>

<div>{value}</div>

Additional Information

No response