Passing optional props causes all `$set` calls to require them (TS)

[Bilge]

Describe the bug

When a component with only optional props is instantiated without any props, this bug does not manifest. However, when specifying a component with some of its optional props, e.g. new Component({props: {Beta: 'Beta'}}), TypeScript now becomes aware that Component has a prop called Beta, and any and all $set calls will suddenly require Beta to be present, otherwise a fatal TS compilation error is thrown:

TS2345: Argument of type '{ Charlie: string; }' is not assignable to parameter of type 'Partial<{ Beta: string }>'.
Object literal may only specify known properties, and 'Charlie' does not exist in type 'Partial<{ Beta: string; }>'.

Reproduction

<!-- Component.svelte -->
<script lang="ts">
    export let Beta: string|null = null;
    export let Charlie: string|null = null;
</script>

// My.ts
const c = new Component({
    target: Alfa,
    props: {
        Beta: 'Beta',
    },
});

c.$set({
    // TS2345!
    Charlie: 'Charlie',
});

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 9.99 GB / 31.94 GB
  Binaries:
    Node: 18.14.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 116.0.5845.111
    Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.54)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    svelte: ^4.2.0 => 4.2.0
    webpack: ^5.11.0 => 5.88.2

Severity

blocking all usage of svelte

[msf-caesar]

Try with modifying the $set call to only include the optional props that are present. In this case, remove the Charlie prop from the $set call.

[jasonlyu123]

This is because SvelteComponent is a generic component in v4. If you instantiate it with {Beta: 'Beta'}, Then the generic is inferred as it makes all other props invalid. But you can explicitly specify the generic, like

new Component<{ Beta?: string, Charlie?: string  }>()

TypeScript Playground Example

If you're directly importing the component from a svelte file and seeing this problem. You can enable the Svelte TypeScript Plugin in your editor. It should type the component for you. The config is svelte.enable-ts-plugin for VSCode, and if you're on another editor, follow this doc to set up

And if this is in a function where you pass the component constructor as a parameter. You need to type the component generic properly.

[dummdidumm]

Closing this is a TS limitation and explicitly typing solves this. Also, class components are deprecated in Svelte 5.