interface で形を宣言する

01 / 06

形を宣言するもう1つの書き方

オブジェクトの形に名前をつける方法は、じつは2つある。1つは前のレッスンでやった type。もう1つが interface だよ。

interface 名前 { ... } と書く。使うときは type のときとまったく同じで、型を書ける場所に名前を書くだけだ。

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

実行結果

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

02 / 06

見た目のちがいは2つだけ

type とくらべて、書き方のちがいはこの2つだよ。

名前のうしろに = を書かない
閉じかっこのうしろに ; を書かない

type は「形に別名をつける」ので = が要る。interface は「こういう形だと宣言する」ので、関数やクラスと同じく {} で終わるんだ。

type Hito = { namae: string };interface Neko {  namae: string;}const h: Hito = { namae: "ゆい" };const n: Neko = { namae: "みけ" };console.log(h.namae + "と" + n.namae);

実行結果

ゆいとみけ

03 / 06

使い方は `type` と同じ

宣言してしまえば、あとは何も変わらない。変数にも、関数の引数にも、戻り値にも書ける。

中に書けるものも同じで、プロパティの名前と型を並べるだけだよ。

interface Shouhin {  namae: string;  nedan: number;}function shirase(s: Shouhin): void {  console.log(s.namae + "は" + s.nedan + "円");}shirase({ namae: "ぺん", nedan: 120 });

実行結果

ぺんは120円

04 / 06

足りないときのエラー

形が足りないときのエラーにも、つけた名前が出てくる。type のときと同じメッセージだよ。

どちらで宣言したかにかかわらず、TypeScript にとっては「Shouhin という形」でしかないんだ。

interface Shouhin {  namae: string;  nedan: number;}const s: Shouhin = { namae: "りんご" };

実行結果

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

05 / 06

打ちまちがえも見つけてくれる

作るときに名前を打ちまちがえたら、その場で止まる。しかも「書こうとしたのは toshi ですか?」と候補まで出してくれるよ。

エラーが出ても大丈夫。まちがいを教えてくれているだけだから、言われたとおりに直せばいい。

interface Hito {  namae: string;  toshi: number;}const h: Hito = { namae: "ゆい", tosi: 20 };

実行結果

型のエラー: オブジェクト リテラルで指定できるのは既知のプロパティのみですが、'tosi' は型 'Hito' に存在しません。書こうとしたのは 'toshi' ですか?

06 / 06

どちらを使えばいい?

オブジェクトの形を書くだけなら、どちらでもいい。できることはほとんど同じだよ。

チームで書くときは「どちらかにそろえる」ことのほうが大事だ。この教材では、これから先も両方を見かけるように書いていく。読めればいいんだから、細かい使い分けは今は気にしなくて大丈夫。

ここから書いてみよう。この章ではしばらく interface を使うよ。