Tips on annotating a SolidJS component with Typescript

Question

Tips on annotating a SolidJS component with Typescript

I delved into the realm of TypeScript and SolidJS, only to stumble upon this interesting discovery.

https://i.sstatic.net/CGvKm.png

import { Component } from "solid-js"

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

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

export default Button

Despite my components being riddled with error highlights, the project runs smoothly, even the functions passed in onClick.

Could this be a misconfiguration in VSCode? I usually code in React.

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/*"]
    }
  }
}

Check out the repository solidjs

javascript typescript visual-studio-code solid-js

Answer 1

Answer №1

The `Component` type from the core module is utilized for marking a SolidJS component. It is parameterized over the `Props` object.

Let's take a look at its definition:

/**
 * A typical `Component` does not come with an implicit `children` prop. If needed, you can define one like so: `Component<{name: String, children: JSX.Element}>`.
 */
export declare type Component<P = {}> = (props: P) => JSX.Element;

Considering that your component only has one prop, `onClick`, which expects a click event as its argument of type `MouseEvent`:

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;

All my components show errors underlines, but the project functions correctly, including the onClick callbacks.

Typescript serves as a helpful tool, ensuring that components operate smoothly once compiled into error-free JavaScript code.

If you don't specify a particular prop type for `Component`, the props will default to a plain object because it is set to `P = {}` by default.

The reason for the error is that your Button Component anticipates an empty object `{}` as its prop, yet you are supplying `{ onClick: (event: MouseEvent) => void }`.

Could this be a vscode misconfiguration? I usually code in React without issues.

It is unlikely related to vscode since it natively supports typescript, eliminating the need for additional extensions if typescript is included in your `package.json` and configured with a `tsconfig.json` file.

The typing structure of a Solid component differs from that of React. In Solid, all components are essentially function components without passing state down to their children, hence why there is no equivalent of `S = {}` in the `Component` type of Solid.

Answer 2

The `Component` type from the core module is utilized for marking a SolidJS component. It is parameterized over the `Props` object.

Let's take a look at its definition:

/**
 * A typical `Component` does not come with an implicit `children` prop. If needed, you can define one like so: `Component<{name: String, children: JSX.Element}>`.
 */
export declare type Component<P = {}> = (props: P) => JSX.Element;

Considering that your component only has one prop, `onClick`, which expects a click event as its argument of type `MouseEvent`:

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;

All my components show errors underlines, but the project functions correctly, including the onClick callbacks.

Typescript serves as a helpful tool, ensuring that components operate smoothly once compiled into error-free JavaScript code.

If you don't specify a particular prop type for `Component`, the props will default to a plain object because it is set to `P = {}` by default.

The reason for the error is that your Button Component anticipates an empty object `{}` as its prop, yet you are supplying `{ onClick: (event: MouseEvent) => void }`.

Could this be a vscode misconfiguration? I usually code in React without issues.

It is unlikely related to vscode since it natively supports typescript, eliminating the need for additional extensions if typescript is included in your `package.json` and configured with a `tsconfig.json` file.

The typing structure of a Solid component differs from that of React. In Solid, all components are essentially function components without passing state down to their children, hence why there is no equivalent of `S = {}` in the `Component` type of Solid.

Tips on annotating a SolidJS component with Typescript

Answer №1

Similar questions

In JavaScript, loop through an array of arrays and combine them using the concat

What is the reason behind the occurrence of `(User & { _id: Schema.Types.ObjectId; }) | null` when calling findById?

Disabling the ripple effect on the primary action in React Material lists: A Step-by-Step

Interacting with a JavaScript alert by clicking the OK button using C# in a web browser control

Serialize a series of select boxes to optimize for AJAX POST requests

Leveraging external variables within JavaScript

I am utilizing the useEffect hook along with Axios to fetch data from the backend. My goal is to retrieve two arrays of objects in order to render them on the

Keeping state between navigations in Ionic and AngularJS: A guide

Solving the issue of redirecting with while-else loop in Express.js

Encountering issues with posting data on a straightforward Node.js form using routes

Is there a way for me to determine when AJAX-loaded content has completely loaded all of its images?

Click to load an IFRAME upon clicking

In Javascript, you can throw, instantiate a new Error(), and populate its custom properties all in a single line of code

Verify whether the user has reached the bottom of the iframe while scrolling

The index.js file in ReactJs is failing to run completely

Clone all documents from a NodeJS mongoose collection and transfer them to a different server's database

Utilize static members of an imported type within an Aurelia view

What is the best way to set the length of an undefined item in an object to 0 in reactjs?

Having trouble retrieving data from the server for the POST request

Tips for encoding AngularJS ng-model in real-time