インターフェースの定義

2週間 ago

user

1 minute

TypeScriptのinterfaceは、オブジェクトの構造（プロパティの名前・型）を定義する型のテンプレートです。
オブジェクトの型注釈、クラスの型定義、関数のシグネチャ定義など、さまざまな用途で使用されます。

🧱 基本構文

interface InterfaceName {
  プロパティ名: 型;
  ...
}

🧪 オブジェクトの構造定義に使う

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

const user: User = {
  name: "Taro",
  age: 28
};

オブジェクトの「設計図」を記述
型エイリアス（type）でも同様のことが可能

🎛 任意プロパティ（Optional Property）

interface Article {
  title: string;
  content?: string; // optional（省略可能）
}

const post: Article = {
  title: "TypeScript入門"
};

? をつけることで存在しなくても OK になる

🔒 読み取り専用（readonly）

interface Config {
  readonly id: string;
  name: string;
}

const cfg: Config = { id: "abc123", name: "設定A" };
// cfg.id = "new"; // ❌ エラー：readonly のため書き換え不可

🔁 インターフェースの継承（extends）

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const shiba: Dog = {
  name: "Pochi",
  breed: "Shiba"
};

interface は他のインターフェースを継承可能
複数継承もできる（,区切り）

⚙ 関数の型定義にも使える

interface Greeter {
  (name: string): string;
}

const greet: Greeter = (name) => `Hello, ${name}`;

📌 クラスに適用する（implements）

interface Person {
  name: string;
  greet(): void;
}

class Employee implements Person {
  constructor(public name: string) {}

  greet(): void {
    console.log(`Hi, I'm ${this.name}`);
  }
}

クラスに「この構造を実装すべし」と要求できる

interface を使うことで、オブジェクト設計が型安全かつ明示的になります。