背景 SolidJSのコンポーネントとイベントハンドラの型定義について悩んでいたが、公式で解説が乗っていたので、
個人的にまとめることにする。
概要 コンポーネントとイベントハンドラの型定義の方法をまとめていく。
公式ではコンポーネントの型をComponent Types、エベントハンドラの型をEvent Handlersとして記載しているので、 同一の単語を使用していく。
本題 Component Types Component import type { JSX, Component } from 'solid-js'; type Component<P = {}> = (props: P) => JSX.Element; 基本的にはReactのFCと同じような使い型ができ、propsの型をジェネリクスで定義することができる。
戻り値はJSX.Elementになる。
サンプルコード ※公式のコードを参照
import { render } from "solid-js/web"; import { createSignal, Component } from "solid-js"; const Counter: Component = () => { const [count, setCount] = createSignal(0); return ( <button onClick={() => setCount((c) => c+1)}> {count()} </button> ); }; const InitCounter: Component<{initial: number}> = (props) => { const [count, setCount] = createSignal(props.