インターフェース(interface)

このレッスンでは、オブジェクトの形を定義するinterfaceの使い方を学びます。「TypeScript interface 使い方」で調べている方向けです。

interfaceは「このオブジェクトはどんなプロパティを持つべきか」を定義する仕組みです。定義した形と違うオブジェクトを作ろうとすると、TypeScriptがエラーで教えてくれます。

サンプルコードでは、interface User { name: string; age: number; }を定義し、その形に沿ったuserオブジェクトを作っています。プロパティが1つでも欠けているとエラーになります。

初心者がよくつまずくのが、interfaceと後で学ぶtype(型エイリアス)の違いです。どちらもオブジェクトの形を定義できますが、interfaceは同じ名前で再度定義して拡張できる(宣言のマージ)という特徴があります。

実際の開発現場では、APIから受け取るデータの形をinterfaceで定義しておくことで、「このデータにはどんな項目が入っているか」をコードだけで把握できるようになります。

📖 お手本コード

interface User {
  name: string;
  age: number;
}

const user: User = { name: "ゆうき", age: 20 };
console.log(`${user.name}(${user.age}歳)`);

✍️ あなたのコード

コードを書いたら「実行する」を押してください

🧪 このサイトではTypeScriptを直接コンパイル・実行できないため、お手本コードと同じ内容を入力できたかをその場で判定します(採点はブラウザ内だけで行われ、どこにも送信されません)。

🎯

ここまでできればゴール達成!
ユーザー情報のような、決まった形のデータを安全に管理できるようになります。