TypeScript 学習記録 #8(Reactに関わる型定義)
TypeScript 学習記録 #7 の続編。
TypeScript 学習記録シリーズの恐らくラスト。
今回のメインテーマ、「Reactに関わる型定義について」。
今回主に参考にした教材:
見返す用リスト(主に自分用)
TypeScript基礎学習を完走したので、いつでも見返すことの出来るようにリスト化しておく(5/17)
- TypeScript 学習記録 #1(学習ルート策定やTS参考教材一覧)
- TypeScript 学習記録 #2(TS / ESLint / Prettierの環境構築)
- TypeScript 学習記録 #3(基本の型定義・関数の型定義)
- TypeScript 学習記録 #4(オブジェクトと配列の型定義)
- TypeScript 学習記録 #5(ジェネリック型(ジェネリクス))
- TypeScript 学習記録 #6(InterfaceとType Alias)
- TypeScript 学習記録 #7(非同期処理の型定義(Promise))
- TypeScript 学習記録 #8(Reactに関わる型定義)
Reactに関わる型定義
以下のことについて学んだ。
- 関数コンポーネントの型定義
- propsの型定義
- useStateの型定義
以下では、Reactの関数コンポーネントの型定義やpropsの型定義、React hooksの型定義といった、Reactで開発していく上で最低限知っておいたほうが良いだろうというものをまとめた。
関数コンポーネントとpropsの型定義
関数コンポーネントの型定義にはReact.VFC
を使う。似た型でReact.FC
があるが、React.FC
とReact.VFC
の違いについては以下の記事が参考になる。現状ではReact.VFC
推奨とのこと。
props
の型定義は、React.VFC
の型にジェネリクス<T>
を指定する形で定義する。
ジェネリクスとして指定したProps
型以外の属性を受け取ったり、受け取ったprops
の属性がProps
型で定義された属性の全てを満たしていなかったりするとエラーになる。
// 親コンポーネント
const Parent: React.VFC = () => {
return (
<div>
<Child text="Reactに関わる型練習中:D" />
</div>
);
};
/* ------------------------------ */
// 子コンポーネントが受け取る`props`の型定義
type Props = {
text: string;
};
// 子コンポーネント(ジェネリクス<T>を用いて、受け取る`props`の型を指定)
const Child: React.VFC<Props> = (props) => {
// ここで、以下のように分割代入で`props`を展開するのはよく使いそうなので一応メモ
// const { text } = props;
return (
<div>
<h1>{props.text}</h1> {/* "Reactに関わる型練習中:D" と表示される */}
<GrandChild text="孫ちゃんへ">
孫コンポーネントに`children`としてpropsを渡す練習中:D
</GrandChild>
</div>
);
};
/* ------------------------------ */
// 孫コンポーネントが受け取る`props`の型定義(childrenを含む場合の型定義)
type Props = {
text: string;
children: React.ReactNode;
};
// 孫コンポーネント(ジェネリクス<T>を用いて、受け取る`props`の型を指定)
const GrandChild: React.VFC<Props> = (props) => {
return (
<div>
<p>{props.text}</p> {/* "孫ちゃんへ" と表示される */}
<p>{props.children}</p> {/* "孫コンポーネントに`children`としてpropsを渡す練習中:D" と表示される */}
</div>
);
};
追記
propsの型の指定方法について、propsの要素数が1つや2つで、わざわざProps
型として型エイリアスを作るまでもない場合は以下のように書くこともできる。
また、React.VFC
やReact.ReactNode
などの型は、インポート時に分割代入して受け取ることでよりシンプルに書くことができる。
// 型をインポート(分割代入でより簡略化して型情報を受け取ることができる)
import type { ReactNode, VFC } from "react";
// ジェネリクスの部分に直接`props`が受け取る型を指定することができる(2つ以上の型をワンラインで書く場合は以下のように属性の区切りをカンマで区切る)
// また、型のインポート時に、型を分割代入で受け取っているので余分な`React.`の記述をなくすことができる
const GrandChild: VFC<{ text: string, children: ReactNode }> = (props) => {
return (
<div>
<p>{props.text}</p>
<p>{props.children}</p>
</div>
);
};
useStateの型定義
useStateの型定義は、useStateを宣言する時に型を指定する。
useStateに初期値を設定すると、型推論が効いて自動的に型を付けてくれるため、初期値から型が明確に分かる場合などは無理に型注釈をする必要はない。
// useStateにオブジェクトのステートを持たせるとき用の型定義
type UserData = {
id: number;
name: string;
};
const StateSample: React.VFC = () => {
// 例1:初期値から型が明確な場合は型推論に任せる
const [count, setCount] = useState(0);
// 例2:ステートを`null`などでリセットする必要がある場合は、`null`も取ることが出来るようにジェネリクス<T>を用いて型を指定する
const [count, setCount] = useState<number | null>(0);
// 例3:ステートにオブジェクトを持たせる場合は、予め型エイリアスなどで型を定義しておき、その型をジェネリクス<T>で指定する(初期値はその型の構造を満たしている必要がある)
const [user, setUser] = useState<UserData>({ id: 1122, name: "aiko" });
return (
<div>
<h1>{count}</h1>
<h1>{user.name}</h1>
</div>
);
};
eventオブジェクトに対する型定義(イベントハンドラなど)
引数として受け取ることの多いeventオブジェクトの型定義は少し厄介そうだが、onChange
やonClick
などをhoverすると、onChange
やonClick
が引数として受け取るeventオブジェクトの型が書いてあるので、そこを参照するようにする。
例えば、onChange
イベントをhoverすると、(JSX attribute) onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
と書かれているので、そこのe: React.ChangeEvent<HTMLInputElement>
の部分を引数eventの型として定義する。onClick
ならばe: React.MouseEvent<HTMLButtonElement>
というように、各イベントによって指定する型が異なるので都度確認が必要。
各イベントの型はこの記事がわかりやすい(参考:any型で諦めない React.EventCallback)
以下の例は、インプットフォームに何か文字を入力する度に、onChangeイベントが呼ばれてフォームのステートを更新するという処理をTypeScriptで書いたもの。
const HandleEventSample: React.VFC = () => {
// ユーザーが入力したテキストを保持するステート(初期値が空文字なので、型推論によって`string`型が定義される)
const [inputText, setInputText] = useState("");
// ユーザーが入力したテキストでステートを更新する関数
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputText(e.target.value);
};
return (
<div>
<input type="text" value={inputText} onChange={handleInputChange} />
<h1>{inputText}</h1>
</div>
);
};
JSONの型推論(おまけ)
以下のことについて学んだ。
-
typeof
を応用したJSONの型推論-
typeof
を使うことで宣言済みの変数の型を取得することができる。それを応用して、JSONで取得したデータの型をそのまま継承することが出来る。(参考) - 上記の通り、
typeof
を上手く使うことで複雑な構造をしたデータの型を手打ちで打つ必要がなくなるらしい。だが、参考にした動画を見た感じ、一度JSONファイルとしてプロジェクトのディレクトリ内に置いた上で、それをもとにそのデータ構造から型を取得するといった流れだったので、データ構造そのものに変化がある時は結局はそこをいじらないといけないのかなと感じた。まあそれでも手打ちでデータ構造を一つ一つ型定義していくよりは遥かに手間は少ないと思う。
-
ここまでの感想
Reactに関わるTypeScriptの型定義のやり方を学んだ。これで基礎理解としてはほぼほぼ問題ないレベルに来たと思う。正直この1週間で相当強くなった気がする。
あとは実践あるのみ💪
今後の予定
- 【済】非同期処理について学ぶ
- 【済】ReactでのTypeScriptの型定義を学ぶ
- 【済】Next.js×TypeScript×Tailwind×ESLint×Prettierの環境構築方法を学ぶ(入れられたらhuskyとlint-stagedも入れたい)
- しまぶーさん(@shimabu_it)の素晴らしすぎるテンプレートがあったため一旦割愛(→ こちら)
- 【未】じゃけぇさんのReact入門講座をTypeScriptで作り直す
Discussion