Complaining about custom HTML Attributes on tags

[michaelslec]

Hello,

the HTMLProps interface in svelte2tsx complains when you give custom attributes to HTML tags. For example,

<div bp="grid"></div>

results in the following error: Property 'bp' does not exist on type 'HTMLProps<HTMLDivElement>'.

I've tried to augment the module, but to no success as my project is out of scope of the plugin. There are a couple options I know of:

1. Provide some method of manual module augmentation
2. Allow arbitrary attributes on HTMLProps

[michaelslec]

Solution

Add *.d.ts inside your src/ directory. Example: src/types/svelte.d.ts

Inside of src/types/svelte.d.ts, add:

declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    bp?: string; // Your type here
  }
}

Finally, ensure your tsconfig.json has: "include": ["src/**/*"]

Notes:

• Some sources state you need a "typeRoots: []" directive in your tsconfig.json for TypeScript to get the types properly. This wasn't the case for me. I'm not sure why.

Sources: svelte/language-tools TypeScript Module Augmentation