React TypeScriptの型を検索できるチートシート。props、children、useState、イベント、ref、context、reducer、ジェネリックコンポーネントを、それぞれコピーできるコード付きで紹介します。
ReactとTypeScriptでは、主にコンポーネントのpropsに型を付け、残りは型推論に任せます。propsはinterfaceで記述し、childrenにはReact.ReactNodeを使い、初期値の型が狭すぎるときはuseStateに型引数を渡し、ハンドラーにはReact.ChangeEvent<HTMLInputElement>などのイベント型を選びます。JSXを含むファイルの拡張子は.tsxです。
よく使う型
クリックハンドラーやrefなど、型を付けたいものをチートシートで検索し、その行をコピーしましょう。その後に、context、reducer、ジェネリックコンポーネントの詳しい実例が続きます。
propsのinterfaceにchildren: React.ReactNodeを追加します。ReactNodeは文字列、数値、要素、配列、nullをカバーします。コンポーネントが単一のJSX要素を受け取らなければならない場合にだけ、React.ReactElementを使いましょう。
空の配列では、型チェッカーが推論する材料がありません。要素の型を渡しましょう：useState<string[]>([])。初期値がnullの場合も同様で、useState<User | null>(null)のようにします。
useRef<HTMLInputElement>(null)を呼び、ref={inputRef}で要素に付けます。Reactが要素をマウントするまで、またアンマウントした後もnullになるので、inputRef.currentはnullチェックをしてから読み取りましょう。
現在のReactドキュメントでは、関数コンポーネントがrefを通常のpropとして受け取り、内側の要素に設定する方法が示されています。そのpropにはReact.Ref<HTMLInputElement>と型を付けます。古いコードでは、代わりにコンポーネントをforwardRefで包んでいます。
適切なデフォルトがない場合は、createContext<Value | null>(null)を使い、値がnullなら例外を投げる小さなフックでuseContextを包みます。そうすれば、すべての利用側がnullでない型を受け取り、プロバイダーがない場合はわかりやすいエラーが出ます。
省略可能なpropsはシグネチャでデフォルト値を持ち、childrenは描画可能なものなら何でも受け付けます。
このフックは、プロバイダーの外ではわかりやすいエラーを投げ、内側ではnullでない値を返します。
各caseの中でactionが絞り込まれるので、action.itemは本来あるべき場所にだけ存在します。
Tは呼び出し側が渡すitemsで決まるので、renderItemは正しい型を受け取ります。
親がrefを作成し、子がそれを実際のinputに設定します。
Props
propsオブジェクト
Props
あらゆる種類のchildren
Props
子として要素を1つだけ
Props
いくつかの値に限定したvariant
Props
ネイティブのbutton propsをそのまま渡す
Props
style prop
Props
コールバックprop
State
数値のstate（推論）
State
nullになりうるstate
State
空配列のstate
State
ステータスのユニオン型
State
propとして渡すsetter
Events
テキスト入力の変更
Events
セレクトの変更
Events
ボタンのクリック
Events
フォームの送信
Events
キー入力
Events
ハンドラー全体の型
Refs
DOM要素へのref
Refs
タイマーIDを保持するref
Refs
propとして受け取るref
Context
デフォルトなしのcontext
Reducer
actionのユニオン型
すべて
props
state
イベント
ref
context
reducer
チートシートを検索
event、ref、children...
グループで絞り込み
コピー
{v}行中{n}行を表示
一致する行がありません。短い単語で試してください。
無料で始める · クレジットカード不要