Optional props: Type is not assignable to type 'IntrinsicAttributes & ...'.

[dominic-simplan]

Describe the bug
I have a component like this:

<script lang="ts">
    export let width = "100%";
    export let height = "100px";

    export let responsive = false;
</script>

<div id="categorySelect" style="width: {width}; height: {height};" />

If I use this component from another component but do not define the width: <Abc height="100%" responsive={true} />, VSCode shows the following error:

Type '{ height: string; responsive: true; }' is not assignable to type 'IntrinsicAttributes & { width: string; height: string; responsive: boolean; }'.
  Property 'width' is missing in type '{ height: string; responsive: true; }' but required in type '{ width: string; height: string; responsive: boolean; }

Therefore I tried explicitly defining width as string | undefined:

<script lang="ts">
    export let width: string | undefined = "100%";
    export let height = "100px";

    export let responsive = false;
</script>

<div id="categorySelect" style="width: {width}; height: {height};" />

Now I get this error:
Type 'true' is not assignable to type 'false'
It complains because I am setting another value than the default value.

Most strangely, adding an event handler for an event which doesn't even exist fixes the errors:
<Abc height="100%" on:bla={e => {}} responsive={true} />

Expected behavior
It should be possible to skip properties with default value or use other values than the default value.

System (please complete the following information):

• OS: Windows 10
• IDE: VSCode 1.47.2
• Plugin/Package: "Svelte for VSCode 101.3.0"

"svelte": "^3.24.0",
"svelte-check": "^0.1.55",
"svelte-loader": "^2.13.6",
"svelte-preprocess": "^4.0.8",
"@tsconfig/svelte": "^1.0.3",
"typescript": "^3.9.7",

tsconfig:

{
    "extends": "@tsconfig/svelte/tsconfig.json",
    "include": [
        "src/**/*",
        "src/node_modules"
    ],
    "exclude": [
        "node_modules/*",
        "dist/*"
    ],
    "compilerOptions": {
        "strict": true,
        "resolveJsonModule": true,
        "sourceMap": true
    }
}

Additional context
This is so strange, maybe something with my setup is wrong?
Related: #276

[jasonlyu123]

Don't worry you just encounter a ton of problems at once.

1. props without type annotation don't got annotate as optional in strict mode.
2. let a = false has a type of false, not boolean. This is a special case, Within all the value types it is a special case we haven't considered.
3. I guess it's because the event handler got transformed into a spread syntax with any type. ts just thought anything could happen so it turns off all the other check.

The event handler issue will be fixed once #303 is merged. It would have a different mechanism.

[dummdidumm]

For 1.: I think it's this line which produces the bug. No prop has a type annotation -> code returns there and the as {..} typing will be omitted, which would contain the logic to mark it as optional. We probably should only return there if it's a js file which cannot have type annotations.

[jasonlyu123]

Also this one I think

language-tools/packages/svelte2tsx/src/svelte2tsx.ts

Line 971 in c6443d4

return `${identifier}: typeof ${key}`;

[jasonlyu123]

What about this one

declare function __sveltets_partial<T>(a: T): Partial<T>
declare function __sveltets_any(dummy: any): any;

function render() {
    let b = false;
    let c = false;
    let d: 1 | 123 = 123;c = __sveltets_any(c);;

    return { b, ...__sveltets_partial({ c: c }), ...__sveltets_partial({ d: d }) }
}

https://www.typescriptlang.org/play/?strictNullChecks=false&ssl=10&ssc=2&pln=1&pc=1#code/CYUwxgNghgTiAEAzArgOzAFwJYHtXwH0CBnANxAgxA2IIAdZsoIAeAFQD4AKKALnjYBKfgAVGWZuw4AoUJFgIU6bHkIlylarSioAnl2DIAtkd38du4fAsBuadKWZc+OKlAwug+AG9p8f-AQ1PAARvAAvEjMxCB2AYHBYBFREDFxAUEY8MD8AIzwAD7wuQBMAMzJpWU2SZFEZBRUNAQWXGCCNnZ+AXAYyDD43qEANPAAdBP1Gk20DDBMEFxDYPxJAL6CoxNjU41a9OLMS9n8wPAb59JrQA

[jasonlyu123]

About the event handler seems like every spread syntax on tag in svelte2tsx would cause the same problem that's nearly every directive with ':'. This is way more problem than I thought.

[dummdidumm]

Quick update:
Of the three bugs only

• let a = false has a type of false, not boolean

still exists, which can be worked around by doing let a: boolean = false

[dummdidumm]

Closing in favor of #588