型に名前をつける

01 / 05

同じ形を何度も書くのはつらい

前のレッスンで気づいたはず。オブジェクトの型は、変数のたび・関数の引数のたびにまるごと書き直すことになる。

しかも直すときが大変だよ。プロパティを1つ足したくなったら、書いた場所を全部探して直さないといけない。1か所でも直し忘れるとエラーになる。

そこで、形に名前をつける。

02 / 05

`type` で名前をつける

type 名前 = 形; と書くと、その形に名前がつく。名前は先頭を大文字にするのが習わしだよ。変数と見分けがつきやすくなる。

名前をつけたら、あとはその1語を型のところに書くだけだ。

type Hito = {  namae: string;  toshi: number;};const yui: Hito = { namae: "ゆい", toshi: 20 };console.log(yui);

実行結果

{ namae: "ゆい", toshi: 20 }

03 / 05

一度作れば何回でも使える

同じ形のものをいくつ作っても、書くのは Hito の4文字だけ。

プロパティを足したくなったら、type の宣言を1か所直せばいい。使っているところで足りなくなれば、TypeScript が全部教えてくれるよ。

type Hito = {  namae: string;  toshi: number;};const a: Hito = { namae: "ゆい", toshi: 20 };const b: Hito = { namae: "りん", toshi: 21 };console.log(a.toshi + b.toshi);

実行結果

04 / 05

関数の引数にも戻り値にも使える

名前をつけた型は、型を書ける場所ならどこにでも書ける。関数の引数、戻り値、それから変数。

関数の見出しが1行に収まるようになって、何を受け取って何を返すのかがひと目で分かるようになるよ。

type Hito = {  namae: string;  toshi: number;};function yobu(h: Hito): string {  return h.namae + "さん";}console.log(yobu({ namae: "みなと", toshi: 22 }));

実行結果

みなとさん

05 / 05

エラーも名前で教えてくれる

形が足りないときのエラーに、つけた名前が出てくる。「型 Hito では必須です」と言われれば、どの宣言を見に行けばいいかすぐ分かるよ。

名前をつけるのは、読む人（三日後の自分をふくむ）への説明でもあるんだ。ここから書いてみよう。

type Hito = {  namae: string;  toshi: number;};const h: Hito = { namae: "ゆい" };

実行結果

型のエラー: プロパティ 'toshi' は型 '{ namae: string; }' にありませんが、型 'Hito' では必須です。