オブジェクトと関数に型をつける

最後の準備運動です。前の章で値にラベルを貼れるようになりました。この章では、オブジェクトと関数にラベルを貼ります。これができると、Reactのpropsの型定義がそのまま読めるようになります。

オブジェクトの型は「中身の設計図」

前の章の商品データ、4つの変数をバラバラに宣言しました。チャプター3で学んだ通り、関連する値はオブジェクトにまとめるのが自然です。では、オブジェクトの型はどう書くか。

const product: { name: string; price: number } = {
  name: "ワイヤレスイヤホン",
  price: 4980,
};

{ name: string; price: number } の部分が型です。「nameという文字列と、priceという数値を持つオブジェクト」という設計図を、そのまま書いています。区切りはカンマではなくセミコロン(;)なことに注意してください。

でも、これを毎回書くのは長い。そこで型に名前をつけます。

型に名前をつける——type宣言

type Product = {
  name: string;
  price: number;
};

const product: Product = {
  name: "ワイヤレスイヤホン",
  price: 4980,
};