use directive typescript error

When i try to use the use: directive i get the error

Type '{ type: string; placeholder: string; value: string; "use:test": true; oninput: (e: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement; }) => void; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
  Property 'use:test' does not exist on type 'InputHTMLAttributes<HTMLInputElement>'.ts(2322)

Type '{ type: string; placeholder: string; value: string; "use:test": true; oninput: (e: InputEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement; }) => void; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
  Property 'use:test' does not exist on type 'InputHTMLAttributes<HTMLInputElement>'.ts(2322)

I tried to put

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

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

into types.d.ts but then it would not recognize any of the other solidjs imports

7 Replies

lxsmnsyc•7mo ago

you just put the model and not your directive in question. if you follow through the tutorial model is an example directive

Blankeos•5mo ago

@lxsmnsyc 🤖 Any clues how to fix this? I'm stuck

Blankeos•5mo ago

I also did this

Blankeos•5mo ago

Solved it, it took a couple of playing around with it tho. But I think that took longer than expected. With the amount of questions asking this, I'm wondering why... Are the docs just not sufficiently conveying it? All I personally did was: Define this in the d.ts

// vite-env.d.ts
declare global {
  declare module "solid-js" {
    namespace JSX {
      interface Directives {
        form: (node: HTMLFormElement) => void;
      }
    }
  }
}

// vite-env.d.ts
declare global {
  declare module "solid-js" {
    namespace JSX {
      interface Directives {
        form: (node: HTMLFormElement) => void;
      }
    }
  }
}

lxsmnsyc•5mo ago

your value type for the property is also wrong. it should be form: boolean the type refers to the JSX property, not the directive's type so if you want use:foo="bar", you do foo: string

Blankeos•5mo ago

Thanks @lxsmnsyc 🤖 !

Gaming

Programming

use directive typescript error