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

01 / 05

オブジェクトにも形がある

オブジェクトは、名前つきの値をまとめて持てる入れものだった。JavaScript コースで { namae: "ゆい" } のように書いてきたあれだよ。

TypeScript では、その中にどんな名前の値が入るかまで型に書く。{} の中に 名前: 型 を並べるだけだ。

const hito: { namae: string } = {  namae: "ゆい",};console.log(hito);

実行結果

{ namae: "ゆい" }

02 / 05

中身が2つ以上あるときは、名前: 型 を ; で区切って並べる。

1行に押しこむと長くなるので、改行して縦に並べると読みやすいよ。型を見ただけで「このオブジェクトはこういう形だ」と分かる。

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

実行結果

03 / 05

この型を書くいちばんのごほうびがここだよ。toshi を tosi と打ちまちがえると、その行でエラーになる。

JavaScript なら undefined が返ってきて、計算に混ざって NaN になって、ずっと後ろの行でようやく気づくところだ。しかも似た名前まで教えてくれる。

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

実行結果

型のエラー: プロパティ 'tosi' は型 '{ namae: string; toshi: number; }' に存在していません。'toshi' ですか?

04 / 05

toshi を書くと宣言したのに入れ忘れると、作った時点でエラーになる。

「この形のオブジェクトです」と言った以上、そろっていないものは作らせないということだよ。

const hito: {  namae: string;  toshi: number;} = { namae: "ゆい" };

実行結果

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

05 / 05

逆に、宣言していないプロパティを足してもエラーだよ。

厳しく感じるかもしれないけれど、これのおかげで「置いたつもりの値がどこにも使われていない」という事故が起きなくなる。

形が決まったら、ここから書いてみよう。

const hito: { namae: string } = {  namae: "ゆい",  toshi: 20,};

実行結果

型のエラー: オブジェクト リテラルは既知のプロパティのみ指定できます。'toshi' は型 '{ namae: string; }' に存在しません。