jsx - Typescript types for Solid-js components

Question

How do I convert the first example from the Solid-JS documentation to be valid typescript?

import { render } from "solid-js/web"

const HelloMessage = props => <div>Hello {props.name}</div>

render(() => <HelloMessage name="Taylor" />, document.getElementById("hello-example"))

I'm getting an error about props having no type hint, specifically Parameter 'props' implicitly has an 'any' type.

With react I would use React.FC, but I can't find the equivalent with Solid-JS.

question from:https://stackoverflow.com/questions/66065357/typescript-types-for-solid-js-components

Answer 1

I found the solution, is using the Component generic:

import {render} from 'solid-js/web'
import {Component} from 'solid-js'

const HelloMessage: Component<{name: string}> = ({name}) => <div>Hello {name}</div>

render(() => <HelloMessage name="Taylor" />, document.getElementById("hello-example"))