How to annonate a SolidJS component using Typescript?

Question

I started to learn about typescript, along with SolidJS and I come across this.

import { Component } from "solid-js"

const Button:Component=({onClick})=>{

    return <button onClick={onClick}>Button</button>
    
}

export default Button

Every component I created is full of error highlights, but the project works normally, even the functions passed in onClick.

A probable vscode misconfiguration? I code in React normally.

The file extension is tsx:

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true,
    "paths": {
      "@": ["./src"],
      "@/*": ["./src/*"],
      "$lib":["./src/lib"],
      "$lib/*":["./src/lib/*"]
    }
  }
}

repository solidjs

Answer 1

The Component type from the core module is used to annotate a SolidJS component. It is generic over Props object.

Lets see its definition:

/**
 * A general `Component` has no implicit `children` prop.  If desired, you can
 * specify one as in `Component<{name: String, children: JSX.Element>}`.
 */
export declare type Component<P = {}> = (props: P) => JSX.Element;

Since your component has only one prop, onClick, and it takes click event as its sole parameter. Click event has the MouseEvent type:

import { Component } from "solid-js"

interface ButtonProps {
  onClick: (event: MouseEvent) => void
}

const Button: Component<ButtonProps> =({ onClick })=>{
  return (
    <button onClick={onClick}>Button</button>
  );
}

export default Button;

Every component I created is full of error highlights, but the project works normally, even the functions passed in onClick.

Typescript is a helper tool, components works as long as they compile to JavaScript without any error.

If you do not provide your own prop type to Component, props will be of plain object because it defaults to P = {}.

You get error because your Button Component expect {} as its prop but your are passing { onClick: (event: MouseEvent) => void }.

A probable vscode misconfiguration? I code in React normally.

Probably it has nothing to do with vscode since it has built-in support for typescript, which means you don't need any extension to use typescript if it is installed in your package.json and has tsconfig.json.

The type signature of Solid component is different than that of React's. In React's terms Solid has only function components, and it does not pass state to its children, so there is no S = {} in Solid's Component type.