diff --git a/documentation/docs/05-misc/03-typescript.md b/documentation/docs/05-misc/03-typescript.md index d5772fa157..b88c6f5c9f 100644 --- a/documentation/docs/05-misc/03-typescript.md +++ b/documentation/docs/05-misc/03-typescript.md @@ -140,6 +140,24 @@ declare namespace svelteHTML { 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. +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: + +```js +/// file: additional-svelte-typings.d.ts +import { HTMLButtonAttributes } from 'svelte/elements' + +declare module 'svelte/elements' { + export interface SvelteHTMLElements { + 'custom-button': HTMLButtonAttributes; + } + + // allows for more granular control over what element to add the typings to + export interface HTMLButtonAttributes { + 'veryexperimentalattribute'?: string; + } +} +``` + ## Experimental advanced typings 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.