CODEWITHSUNDEEP
reactjstypescriptjsxtsxsolid-js
SmoothTraderKen
SmoothTraderKen

Reputation: 652

Property 'X' does not exist on type 'HTMLAttributes<HTMLDivElement>'.ts(2322)

I had the following error when I use JSX sample code in TSX.

(property) use:sortable: true

Type '{ children: any; "use:sortable": true; class: string; classList: { "opacity-25": boolean; "transition-transform": boolean; }; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.

  Property 'use:sortable' does not exist on type 'HTMLAttributes<HTMLDivElement>'.ts(2322)

ts(2322)

enter image description here

and

Type 'Element' is not assignable to type '(Element | ((activeDraggable: Draggable) => Element)) & Element'.
  Type 'number' is not assignable to type '(Element | ((activeDraggable: Draggable) => Element)) & Element'.ts(2322)
drag-overlay.d.ts(4, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & DragOverlayProps & { children?: Element; }'

enter image description here

I tried

interface HTMLAttributes<HTMLDivElement> {
  "use:sortable": boolean
}

but, for some reason, nothing worked to avoid the error.

Any ideas?

The entire code is

Sortable list (vertical) in https://solid-dnd.com/#examples

Upvotes: 0

Views: 1428

Answers (1)

snnsnn
snnsnn

Reputation: 13698

Custom directives requires additional type annotations which is covered in the documentation:

To register with TypeScript extend the JSX namespace.

declare module "solid-js" {
  namespace JSX {
    interface Directives {
      model: [() => any, (v: any) => any];
    }
  }
}

Above code adds a custom directive called model which is used like so:

<input type="text" use:model={[name, setName]} />

For more information please take a look at the custom directives section:

https://www.solidjs.com/docs/latest#use___

Upvotes: 1

Related Questions