Skip to content

Commit fffdfbc

Browse files
authored
document it
1 parent 3038d6d commit fffdfbc

File tree

1 file changed

+18
-0
lines changed

1 file changed

+18
-0
lines changed

documentation/docs/05-misc/03-typescript.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,24 @@ declare namespace svelteHTML {
140140

141141
Then make sure that `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
142142

143+
Since Svelte version 4.2 / `svelte-check` version 3.5 / VS Code extension version 107.10.0 you can also declare the typings by augmenting the the `svelte/elements` module like this:
144+
145+
```js
146+
/// file: additional-svelte-typings.d.ts
147+
import { HTMLButtonAttributes } from 'svelte/elements'
148+
149+
declare module 'svelte/elements' {
150+
export interface SvelteHTMLElements {
151+
'custom-button': HTMLButtonAttributes;
152+
}
153+
154+
// allows for more granular control over what element to add the typings to
155+
export interface HTMLButtonAttributes {
156+
'veryexperimentalattribute'?: string;
157+
}
158+
}
159+
```
160+
143161
## Experimental advanced typings
144162

145163
A few features are missing from taking full advantage of TypeScript in more advanced use cases like typing that a component implements a certain interface, explicitly typing slots, or using generics. These things are possible using experimental advanced type capabilities. See [this RFC](https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md) for more information on how to make use of them.

0 commit comments

Comments
 (0)