question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
dummdidummcommented, Aug 18, 2020

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

0reactions
dummdidummcommented, Oct 2, 2020

Closing in favor of #588

Read more comments on GitHub >

github_iconTop Results From Across the Web

json - Type '{}' is not assignable to type 'IntrinsicAttributes ...
I solved a lot of "not assignable to type 'IntrinsicAttributes ... In interface SearchBarProps , optionalArgument becomes an optional ...
Read more >
Is not assignable to type intrinsicattributes - Kodlogs.net
So now let's try running `IntrinsicAttributes(x)` again: Here is an example. To add the props type, simply specify the component type correctly:
Read more >
Deciphering TypeScript's React errors | by Fiona Hopkins |
Type '{}' is TypeScript describing that second, props argument. is not assignable to — The old standby. There's an inconsistency in the types!...
Read more >
Sharing Component Props Using Type Information
SFC type is a generic which accepts props as the first argument and optional state as the second. We defined the type information...
Read more >
Typescript Property XXX does not exist on type ... - Edureka
I'm working on a project with Typescript, React and Redux (all ... XXX does not exist on type IntrinsicAttributes IntrinsicClassAttributes.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found