propsに型を付ける
props に型が無いと何が困るか
React入門では、props をこう受け取っていました。
function ItemCard(props) {
return <p>{props.title}</p>;
}これを TypeScript で書くと、props の型が分からないと言われます。分からないまま進むと、props.titel と打ち間違えても誰も止めてくれません。画面に何も出ず、原因を探して 10 分溶かす。よくある事故です。
型を書けば、打ち間違えたその場で赤い波線が出ます。
Props の型を書く
受け取るものの形を type で書き、引数に付けます。
type ItemCardProps = {
title: string;
price: number;
};
function ItemCard(props: ItemCardProps) {
return (
<div className="card">
<p>{props.title}</p>
<p>{props.price} 円</p>
</div>
);
}これで <ItemCard title="スニーカー" /> のように price を忘れると、渡す側が怒られます。部品が何を必要としているかが、型として書いてある状態です。これを「部品の契約」と呼びます。
分割代入で受け取る
毎回 props. と書くのは長いので、引数のところで分けて受け取るのが普通です。
function ItemCard({ title, price }: ItemCardProps) {
return (
<div className="card">
<p>{title}</p>
<p>{price} 円</p>
</div>
);
}中身は同じです。以降このコースでは、この書き方で統一します。
データの型は別に切り出す
商品そのものの形は、カード以外の場所でも使います。一覧でも詳細でもカートでも同じ商品を扱うからです。だから商品の型は独立させて、props の型はそれを使う形にします。
type Item = {
id: string;
title: string;
price: number;
};
type ItemCardProps = {
item: Item;
};props を title と price にばらして渡すと、商品に項目が増えるたびに全部の呼び出しを直すことになります。item を丸ごと渡せば、増えても渡す側は変わりません。
演習
ItemCard が商品を props で受け取るように、型から書きます。