TypeScriptのインターフェイス徹底解説！基本から応用まで

TypeScriptを使うと、型安全なコードを書くことができます。

その中でも「インターフェイス」は、オブジェクトの構造を定義し、コードの可読性や保守性を向上させる便利な機能です。

たとえば、大規模なプロジェクトでデータのやり取りを行うとき、型が明確に定義されていないと予期しないバグが発生する可能性があります。

しかし、インターフェイスを活用することで、エディタの補完機能を最大限に活かしつつ、より安全で効率的な開発が可能になります。

本記事では、

「TypeScriptのインターフェイス徹底解説！基本から応用まで」

と題して、TypeScriptのインターフェイスについて基本から応用まで詳しく解説していきます。ぜひ学んで、開発に活かしてみてください！

インターフェイスの基本
インターフェイスの応用
まとめ

インターフェイスの基本

シンプルなインターフェイスの定義

インターフェイスは、オブジェクトの型を定義するために使用されます。

// ユーザー情報を表すインターフェイス
interface User {
  name: string;  // 名前
  age: number;   // 年齢
}

// インターフェイスを使ったオブジェクト
const user: User = {
  name: "田中太郎",
  age: 30
};

ゆーや

上の例では、User というインターフェイスを定義し、それを使って型安全なオブジェクトを作成しています。

オプショナルプロパティ（?）

プロパティを必須ではなく、任意にしたい場合は ? を使います。

interface User {
  name: string;
  age: number;
  email?: string; // オプショナルプロパティ
}

const user1: User = {
  name: "佐藤花子",
  age: 25
};

const user2: User = {
  name: "山田一郎",
  age: 40,
  email: "yamada@example.com"
};

ゆーや

逆にオプショナルプロパティをつけないと「必須」になるので注意しよう！

readonly プロパティ

readonly を使うと、プロパティの変更を防ぐことができます。

interface User {
  readonly id: number; // 読み取り専用
  name: string;
}

const user: User = {
  id: 1,
  name: "鈴木二郎"
};

// user.id = 2; // エラー: 読み取り専用のプロパティは変更不可

インターフェイスの応用

インターフェイスの拡張 (extends)

既存のインターフェイスを拡張して、新しいインターフェイスを作ることができます。

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

interface Employee extends Person {
  company: string; // 追加プロパティ
}

const employee: Employee = {
  name: "田中一郎",
  age: 35,
  company: "ABC株式会社"
};

ゆーや

classの継承と同じだね！

インデックスシグネチャ

キーの名前が事前にわからない場合に、インデックスシグネチャを使って動的なプロパティを持たせることができます。

interface Dictionary {
  [key: string]: string; // 任意のキーに対して文字列の値を持つ
}

const colors: Dictionary = {
  red: "#ff0000",
  green: "#00ff00",
  blue: "#0000ff"
};

ゆーや

インデックスシグネチャは要するに「都合よく増やせるように枠を用意する」と理解しておけばOK！通常の定義と並べて使用することもできるよ！

関数の型定義

インターフェイスは関数の型定義にも使用できます。

interface MathOperation {
  (a: number, b: number): number; // 2つの数値を受け取り数値を返す関数
}

const add: MathOperation = (x, y) => x + y;
const multiply: MathOperation = (x, y) => x * y;

console.log(add(5, 3)); // 8
console.log(multiply(4, 2)); // 8

ゆーや

引数の数と型、戻り値の型を指定できるよ！

クラスとインターフェイス

クラスは implements を使ってインターフェイスの仕様を守ることができます。

interface Animal {
  name: string;
  makeSound(): void; // メソッド定義
}

class Dog implements Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound() {
    console.log("ワンワン！");
  }
}

const myDog = new Dog("ポチ");
myDog.makeSound(); // ワンワン！