SolidJS directives with use:___ throw errors for typescript in JSX

Question

I am converting this forms example that is in JS into TS: https://www.solidjs.com/examples/forms

In doing so, I am encountering a typescript error relating to the directives in html:

It seems that typescript is marking validate and formSubmit as unused variables, and in the jsx code, it is throwing the error:

Property 'use:formSubmit' does not exist on type 'FormHTMLAttributes<HTMLFormElement>'.

Answer 1

You need to extend built-in JSX types first:

declare module "solid-js" {
  namespace JSX {
    interface Directives {}
  }
}

Then make sure directive is not stripped off by Typescript:

true && formSubmit

This is important because you may suppress the type error using a pragma, it will not prevent the directive from being tree-shaken. You can test this by exporting the directive into a separate module. Without the line above, directive will not be included in the compiled code.