Skip to content

Commit

Permalink
Document DirectiveFunctions
Browse files Browse the repository at this point in the history
  • Loading branch information
edemaine committed Aug 6, 2023
1 parent 1f97bdb commit 7071449
Showing 1 changed file with 16 additions and 3 deletions.
19 changes: 16 additions & 3 deletions langs/en/guides/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -575,7 +575,7 @@ declare module "solid-js" {

If you define custom directives for Solid's
[`use:___` attributes](https://www.solidjs.com/docs/latest/api#use%3A___),
you can type them in the `Directives` interface, like so:
you can type them by extending the `DirectiveFunctions` interface, like so:

```tsx
function model(element: HTMLInputElement, value: Accessor<Signal<string>>) {
Expand All @@ -586,8 +586,8 @@ function model(element: HTMLInputElement, value: Accessor<Signal<string>>) {

declare module "solid-js" {
namespace JSX {
interface Directives { // use:model
model: Signal<string>;
interface DirectiveFunctions { // use:model
model: typeof model;
}
}
}
Expand All @@ -597,6 +597,19 @@ let [name, setName] = createSignal('');
<input type="text" use:model={[name, setName]} />;
```

If you just want to constrain the second argument to the directive function,
you can extend the older `Directives` interface:

```tsx
declare module "solid-js" {
namespace JSX {
interface Directives { // use:model
model: Signal<string>;
}
}
}
```

If you're `import`ing a directive `d` from another module, and `d` is used only
as a directive `use:d`, then TypeScript (or more precisely,
[`babel-preset-typescript`](https://babeljs.io/docs/en/babel-preset-typescript))
Expand Down

0 comments on commit 7071449

Please sign in to comment.