【入門】TypeScript Interface の使い方とメリット

【入門】TypeScript Interface の使い方とメリット：詳細徹底解説

はじめに：なぜTypeScriptのInterfaceを学ぶべきなのか？

現代のソフトウェア開発において、JavaScriptはその柔軟性と表現力の高さから広く利用されています。しかし、その「動的型付け」という性質は、大規模なアプリケーション開発やチーム開発において、時に予期せぬバグやメンテナンス性の低下を引き起こす原因となります。特に、関数やオブジェクトがどのような構造を持つべきか（どのようなプロパティやメソッドを持つのか）がコードを読んだだけでは分かりにくいという問題があります。

ここで登場するのが、JavaScriptに「静的型付け」の概念をもたらす TypeScript です。TypeScriptは、JavaScriptに型情報を追加することで、開発の早期段階でエラーを発見したり、コードの意図をより明確にしたりすることを可能にします。

TypeScriptの強力な機能の一つに Interface（インターフェース） があります。Interfaceは、オブジェクトや関数の「形」や「契約」を定義するために使用されます。これにより、「このオブジェクトは必ずこのプロパティとこのメソッドを持っているはずだ」ということをコード上で明示的に示すことができるようになります。

この記事では、TypeScriptのInterfaceについて、その基本的な使い方から応用的な概念、そして使うことで得られる多くのメリットについて、入門者の方でも理解できるよう詳細かつ丁寧に解説していきます。約5000語というボリュームで、Interfaceに関する疑問を解消し、明日からのTypeScript開発に活かせる知識を習得することを目指します。

さあ、TypeScriptのInterfaceの世界へ踏み出しましょう。

1. Interfaceとは何か？ – 契約としての役割

Interface（インターフェース）とは、簡単に言えば 「オブジェクトが持つべきプロパティやメソッドの集合を定義するもの」 です。これは、まるで建築における設計図や、契約書のようなものです。

例えば、「ユーザー情報」を表すオブジェクトを考えます。このオブジェクトは「名前（文字列）」と「年齢（数値）」と「メールアドレス（文字列）」を持っているべきだ、という設計があったとします。Interfaceを使えば、この「設計」をTypeScriptのコードとして表現できます。

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

この User Interfaceは、「このInterfaceを満たすオブジェクトは、name という名前の文字列型のプロパティ、age という名前の数値型のプロパティ、email という名前の文字列型のプロパティを必ず持っていなければならない」という 契約 を定義しています。

このInterfaceを使ってオブジェクトに型を付けると、TypeScriptはオブジェクトがその契約を満たしているかチェックしてくれます。

“`typescript
// OK: Interface User の契約を満たしている
const user1: User = {
name: “Alice”,
age: 30,
email: “[email protected]”
};

// エラー: age プロパティがないため契約違反
// Property ‘age’ is missing in type ‘{ name: string; email: string; }’ but required in type ‘User’.
// const user2: User = {
// name: “Bob”,
// email: “[email protected]”
// };

// エラー: name プロパティの型が違うため契約違反
// Type ‘number’ is not assignable to type ‘string’.
// const user3: User = {
// name: 123,
// age: 25,
// email: “[email protected]”
// };
“`

このように、Interfaceを使うことで、どのようなデータ構造を持つべきか を明確に定義し、それに基づいた型チェックをコンパイル段階で行うことができます。これにより、実行時になるまで気づけなかった型の不整合によるエラーを事前に防ぐことができるのです。

JavaScriptでは、このような構造の定義はコメントやドキュメントに頼るしかありませんでしたが、TypeScriptのInterfaceはこれをコードとして表現し、型チェックの仕組みと連携させることで、より堅牢な開発を支援します。

2. Interfaceの基本的な使い方 – プロパティの定義

Interfaceの最も基本的な使い方は、オブジェクトが持つべきプロパティとその型を定義することです。

構文は以下の通りです。

typescript
interface InterfaceName {
propertyName1: Type1;
propertyName2: Type2;
// ...
}

• interface キーワードで始めます。
• Interface名は大文字で始めるのが一般的です（PascalCase）。
• 波括弧 {} の中に、プロパティ名と : に続けてその型を記述します。プロパティの定義は ; または , で区切りますが、どちらを使っても構いません。一般的には ; が使われることが多いです。

例：製品情報を表すInterface

“`typescript
interface Product {
id: number;
name: string;
price: number;
inStock: boolean;
}

const product1: Product = {
id: 101,
name: “Laptop”,
price: 120000,
inStock: true
};

// エラー: inStock プロパティがない
// Property ‘inStock’ is missing in type ‘{ id: number; name: string; price: number; }’ but required in type ‘Product’.
// const product2: Product = {
// id: 102,
// name: “Mouse”,
// price: 2500
// };

// エラー: price プロパティの型が違う (文字列になっている)
// Type ‘string’ is not assignable to type ‘number’.
// const product3: Product = {
// id: 103,
// name: “Keyboard”,
// price: “5000”, // <– 型が違う
// inStock: true
// };
“`

このように、定義されたInterfaceに沿わないオブジェクトを代入しようとすると、TypeScriptコンパイラがエラーを検出してくれます。これは、開発の早期段階で間違いに気づけるため、デバッグの手間を大幅に減らすことにつながります。

3. Interfaceのプロパティ：必須、オプショナル、読み取り専用、インデックスシグネチャ

Interfaceで定義するプロパティには、いくつかの種類があります。これらの柔軟な定義方法を知ることで、より現実世界のデータ構造に合わせたInterfaceを作成できます。

3.1. 必須プロパティ (Required Properties)

これまでに見てきたプロパティはすべて必須プロパティです。Interfaceで定義されたプロパティは、デフォルトで必須となります。そのInterfaceを満たすオブジェクトは、定義されたプロパティをすべて持っている必要があります。

“`typescript
interface Book {
title: string;
author: string;
pages: number; // 必須プロパティ
}

const book1: Book = { // OK: 全て必須プロパティを持っている
title: “TypeScript Guide”,
author: “Someone”,
pages: 500
};

// エラー: pages が必須なのに存在しない
// Property ‘pages’ is missing in type ‘{ title: string; author: string; }’ but required in type ‘Book’.
// const book2: Book = {
// title: “JavaScript Basics”,
// author: “Another Person”
// };
“`

3.2. オプショナルプロパティ (Optional Properties)

プロパティの中には、必ずしも存在するとは限らないものもあります。例えば、ユーザー情報に「電話番号」のプロパティがあるとして、すべてのユーザーが電話番号を登録しているとは限りません。このような場合に便利なのが オプショナルプロパティ です。プロパティ名の末尾に ? を付けることで、そのプロパティが必須ではないことを示します。

“`typescript
interface UserProfile {
name: string;
age?: number; // オプショナルプロパティ
phone?: string; // オプショナルプロパティ
email: string;
}

// OK: age, phone がなくても良い
const profile1: UserProfile = {
name: “Alice”,
email: “[email protected]”
};

// OK: age, phone があっても良い
const profile2: UserProfile = {
name: “Bob”,
age: 25,
phone: “090-1234-5678”,
email: “[email protected]”
};

// OK: age だけあっても良い
const profile3: UserProfile = {
name: “Charlie”,
age: 30,
email: “[email protected]”
};

// エラー: 必須プロパティである email がない
// Property ‘email’ is missing in type ‘{ name: string; }’ but required in type ‘UserProfile’.
// const profile4: UserProfile = {
// name: “David”
// };
“`

オプショナルプロパティを使うことで、様々な形状のオブジェクトを受け入れられるInterfaceを定義できます。また、コードを読み取る側は、そのプロパティが undefined である可能性を考慮する必要があることが明確になります。

3.3. 読み取り専用プロパティ (Readonly Properties)

オブジェクトの中には、一度設定したらその後変更されるべきではないプロパティがあります。例えば、オブジェクトの id や、設定情報などです。このような場合に 読み取り専用プロパティ を使用します。プロパティ名の前に readonly キーワードを付けます。

“`typescript
interface Config {
readonly version: string;
readonly buildNumber: number;
apiUrl: string; // これは読み取り専用ではない
}

const appConfig: Config = {
version: “1.0.0”,
buildNumber: 101,
apiUrl: “https://api.example.com”
};

// OK: 読み取り専用ではないプロパティは変更できる
appConfig.apiUrl = “https://new-api.example.com”;

// エラー: 読み取り専用プロパティは変更できない
// Cannot assign to ‘version’ because it is a read-only property.
// appConfig.version = “1.1.0”;

// エラー: 読み取り専用プロパティは変更できない
// Cannot assign to ‘buildNumber’ because it is a read-only property.
// appConfig.buildNumber = 102;
“`

readonly は、初期化時（オブジェクト作成時など）に値を設定することはできますが、それ以降の代入による変更を防ぎます。これは、意図しないデータの書き換えを防ぎ、コードの安全性を高めるのに役立ちます。

3.4. インデックスシグネチャ (Index Signatures)

Interfaceでプロパティ名を具体的に列挙するのではなく、「キーが特定の型で、その値も特定の型であるようなプロパティを複数持つ可能性があるオブジェクト」を表現したい場合があります。これは、辞書やマップのようなデータ構造を表現する際に便利です。このような場合に インデックスシグネチャ を使用します。

インデックスシグネチャは、以下のように定義します。

“`typescript
interface InterfaceName {

}
“`

• [index: IndexType] の部分がインデックスシグネチャです。
• IndexType は、プロパティのキーの型です。TypeScriptでは、文字列 (string) または 数値 (number) のいずれかである必要があります。シンボル (symbol) も可能ですが一般的ではありません。
• ValueType は、そのキーに対応するプロパティの値の型です。

3.4.1. 文字列インデックスシグネチャ

キーが文字列で、値が特定の型であるようなオブジェクトを定義する場合に使用します。

“`typescript
interface StringMap {
[key: string]: string; // キーは文字列、値も文字列
}

const myMap: StringMap = {
greeting: “Hello”,
message: “World”,
language: “en”
};

// OK: string 型のキーで string 型の値を持つプロパティを追加できる
myMap[“status”] = “active”;
myMap.errorCode = “E1001”;

// エラー: 値の型が string ではない
// Type ‘number’ is not assignable to type ‘string’.
// myMap.count = 10;
“`

3.4.2. 数値インデックスシグネチャ

キーが数値で、値が特定の型であるようなオブジェクトを定義する場合に使用します。これは、配列のような構造や、数値のキーを持つオブジェクトを表現するのに使えます。

“`typescript
interface NumberArray {
[index: number]: string; // キーは数値、値は文字列
}

const myArr: NumberArray = [“Apple”, “Banana”, “Cherry”];

// OK: number 型のキーで string 型の値を取得・設定できる
console.log(myArr[0]); // “Apple”
myArr[3] = “Date”;

// エラー: 値の型が string ではない
// Type ‘number’ is not assignable to type ‘string’.
// myArr[4] = 123;
“`

JavaScriptにおいて、オブジェクトの数値キーは内部的に文字列に変換されます。例えば obj[0] は obj["0"] と同じです。TypeScriptの数値インデックスシグネチャは、このようなJavaScriptの挙動を考慮しており、数値キーを通してアクセスされるプロパティの型をチェックするために使用されます。

3.4.3. インデックスシグネチャと他のプロパティの併用

Interfaceでは、具体的なプロパティとインデックスシグネチャを組み合わせて定義することも可能です。ただし、その場合、具体的なプロパティの型は、インデックスシグネチャの値の型と互換性があるか、そのサブタイプである必要があります。

“`typescript
interface UserDictionary {
[id: string]: { name: string; age: number }; // キーは文字列、値は特定のオブジェクト型
adminUser?: { name: string; age: number }; // オプショナルな特定のプロパティ (インデックスシグネチャの値の型と互換性あり)
}

const users: UserDictionary = {
“user-123”: { name: “Alice”, age: 30 },
“user-456”: { name: “Bob”, age: 25 }
};

// OK: インデックスシグネチャに沿って追加
users[“user-789”] = { name: “Charlie”, age: 35 };

// OK: adminUser を追加 (値の型がインデックスシグネチャの値の型と互換性がある)
users.adminUser = { name: “Admin”, age: 50 };

// エラー: 値の型がインデックスシグネチャの値の型と互換性がない
// Type ‘{ name: string; }’ is not assignable to type ‘{ name: string; age: number; }’.
// Property ‘age’ is missing in type ‘{ name: string; }’ but required in type ‘{ name: string; age: number; }’.
// users[“user-xxx”] = { name: “Invalid” };
“`

インデックスシグネチャは、オブジェクトのプロパティが動的に追加・参照されるような場面で非常に強力な型付けを提供します。

4. Interfaceのメソッド

Interfaceは、オブジェクトが持つべきプロパティだけでなく、メソッド（関数型のプロパティ）も定義できます。

メソッドの定義方法は、通常の関数シグネチャに似ています。プロパティ名の後に括弧 () で引数を定義し、コロン : の後に戻り値の型を記述します。

“`typescript
interface Greeter {
greeting: string; // プロパティ
sayHello(): void; // メソッド (引数なし、戻り値なし)
greet(name: string): string; // メソッド (string 型の引数、string 型の戻り値)
}

// Greeter Interface を実装するオブジェクト
const myGreeter: Greeter = {
greeting: “Hello”,
sayHello: function() {
console.log(this.greeting); // メソッド内でプロパティにアクセス
},
greet: (name: string) => {
// アロー関数では this の扱いが異なるため注意が必要 (ここでは myGreeter オブジェクトを指さない)
// この例では this.greeting は undefined になる可能性あり
return ${this.greeting} ${name}; // NG: this の型推論に注意
}
};

// 通常の関数式でメソッドを定義する場合 (this の型推論が期待通りになりやすい)
const anotherGreeter: Greeter = {
greeting: “Hi”,
sayHello: function() { // function キーワードを使う
console.log(this.greeting); // OK: this が Greeter オブジェクトを指す
},
greet: function(name: string): string { // function キーワードを使う
return ${this.greeting} ${name}; // OK: this が Greeter オブジェクトを指す
}
};

myGreeter.sayHello(); // “Hello” (ただし this の問題に注意)
console.log(myGreeter.greet(“Alice”)); // “undefined Alice” (アロー関数による this の問題)

anotherGreeter.sayHello(); // “Hi”
console.log(anotherGreeter.greet(“Bob”)); // “Hi Bob”

// エラー: sayHello メソッドがない
// Property ‘sayHello’ is missing in type ‘{ greeting: string; greet: (name: string) => string; }’ but required in type ‘Greeter’.
// const invalidGreeter: Greeter = {
// greeting: “Yo”,
// greet: (name) => Yo ${name}
// };

// エラー: greet メソッドの引数や戻り値の型が違う
// Type ‘(n: number) => number’ is not assignable to type ‘(name: string) => string’.
// Types of parameters ‘n’ and ‘name’ are incompatible.
// Type ‘number’ is not assignable to type ‘string’.
// const typeMismatchedGreeter: Greeter = {
// greeting: “Hey”,
// sayHello: () => console.log(“Hey”),
// greet: (n: number) => n + 1 // <– 型が違う
// };
“`

メソッドを定義する際は、引数の型と戻り値の型を正確に指定することが重要です。これにより、そのメソッドを呼び出す側は、どのような引数を渡せばよく、どのような型の値が返ってくるかを明確に知ることができます。これは、特にライブラリやモジュールとして機能を提供する際に、利用者にとって非常に有益な情報となります。

また、Interfaceを介してオブジェクトのメソッドに型を付ける場合、そのメソッド内で this を参照することがあります。TypeScriptでは、メソッドの this の型を推論しようとしますが、JavaScriptの this は呼び出し方によって参照先が変わるため、特にアロー関数を使う場合は注意が必要です。function キーワードでメソッドを定義すると、そのメソッドが属するオブジェクトが this の型として推論されやすくなります。Interfaceのメソッドシグネチャに this の型を明示的に記述することも可能ですが、これはやや発展的な内容になります。

5. Interfaceとオブジェクトリテラル

Interfaceは、既存のオブジェクトリテラルに型を付けるためによく使用されます。

“`typescript
interface Point {
x: number;
y: number;
}

const point1: Point = { x: 10, y: 20 }; // OK

// エラー: y プロパティがない
// Property ‘y’ is missing in type ‘{ x: number; }’ but required in type ‘Point’.
// const point2: Point = { x: 5 };
“`

しかし、ここで注意すべき点があります。TypeScriptは、オブジェクトリテラルをInterfaceに直接代入する際に、余分なプロパティ (Excess Property Checks) がないか追加でチェックを行います。

“`typescript
interface Point {
x: number;
y: number;
}

// エラー: z プロパティは Point Interface に定義されていない
// Object literal may only specify known properties, and ‘z’ does not exist in type ‘Point’.
// const point3: Point = { x: 10, y: 20, z: 30 };
“`

この「余分なプロパティチェック」は、オブジェクトリテラルを直接代入する場合にのみ発生する特別なチェックです。これは、typo（タイポ）のような間違いを早期に検出するための便利な機能です。例えば、y を意図して x: 10, yy: 20 と書いてしまった場合にエラーとして教えてくれます。

このチェックを回避したい場合は、いくつか方法があります。

1. 型アサーションを使用する (as InterfaceName): オブジェクトリテラルをInterfaceの型として「これはこういう型である」と主張します。ただし、これはTypeScriptの型チェックを一時的に無効化するため、本当にその型である保証がない場合は注意が必要です。

   “`typescript
   interface Point {
   x: number;
   y: number;
   }

   // OK: 型アサーションにより余分なプロパティチェックが回避される
   const point3 = { x: 10, y: 20, z: 30 } as Point;
   console.log(point3.z); // 実行時は z プロパティが存在する
   “`

   型アサーションを使うと、TypeScriptコンパイラはプログラマを信頼し、その型であると仮定します。そのため、実行時には z プロパティにアクセスできますが、TypeScriptの型システム上は Point 型として扱われるため、例えば point3.z にアクセスしようとしてもコンパイルエラーにはなりませんが、他のInterfaceに代入する際に問題が発生する可能性があります。安易な型アサーションは避けるべきです。

2. 一時変数に代入する: オブジェクトリテラルを一度別の変数に代入し、その変数にInterfaceの型を付けます。この場合、余分なプロパティチェックは発生しません。（厳密には、代入される変数に明示的な型注釈がない場合に発生しませんが、Interfaceに代入するケースでは、Interfaceを満たす変数に代入するため余分なプロパティチェックは発生しません）

   “`typescript
   interface Point {
   x: number;
   y: number;
   }

   const pointWithZ = { x: 10, y: 20, z: 30 };
   const point4: Point = pointWithZ; // OK: 余分なプロパティチェックは発生しない
   console.log(point4); // { x: 10, y: 20, z: 30 }
   // console.log(point4.z); // エラー: Point 型には z プロパティがない
   “`

   この方法は、元のオブジェクトが実際に余分なプロパティを持っているが、Interfaceの型としてはその部分を無視したい場合に有効です。

3. インデックスシグネチャを使用する: Interfaceにインデックスシグネチャを追加することで、未知のプロパティが存在することを許容します。

   “`typescript
   interface PointWithUnknown {
   x: number;
   y: number;
   [propName: string]: any; // string キーを持つ任意の型のプロパティを許容
   }

   const point5: PointWithUnknown = { x: 10, y: 20, z: 30, color: “red” }; // OK
   console.log(point5.z); // 実行時は z プロパティにアクセスできる
   console.log(point5.color); // 実行時は color プロパティにアクセスできる
   “`

   これは、Interfaceが定義する必須プロパティに加えて、任意のプロパティを持つ可能性があるオブジェクトを表現する場合に適切です。ただし、any を使うと型安全性が失われるため、より具体的な型で表現できないか検討すべきです。

これらの回避策のうち、ほとんどの場合は余分なプロパティチェックは歓迎されるべき機能であり、タイポを疑うべきです。どうしても余分なプロパティを許容したい場合は、一時変数に代入するか、インデックスシグネチャを検討するのが良いでしょう。型アサーションは、最終手段として、その意味を十分に理解した上で使用する必要があります。

6. Interfaceと関数型

Interfaceは、オブジェクトの型定義だけでなく、関数そのものの型 を定義するためにも使用できます。これは、特定のシグネチャ（引数の型と数、戻り値の型）を持つ関数が必要な場合に便利です。

関数型をInterfaceで定義するには、Interface内に コールシグネチャ (Call Signature) を記述します。これは、プロパティ名を記述せず、直接関数の引数リストと戻り値の型を記述する方法です。

“`typescript
interface SearchFunc {
(source: string, subString: string): boolean; // コールシグネチャ
}

// SearchFunc Interface を満たす関数
const mySearch: SearchFunc = function(source: string, sub: string): boolean {
const result = source.search(sub);
return result > -1;
};

// OK: シグネチャが一致している
const anotherSearch: SearchFunc = (src, sub) => src.includes(sub);

// エラー: 引数の数が違う
// Type ‘(source: string) => boolean’ is not assignable to type ‘SearchFunc’.
// Types of parameters ‘source’ and ‘subString’ are incompatible.
// Type ‘undefined’ is not assignable to type ‘string’.
// const invalidSearch1: SearchFunc = function(source: string): boolean {
// return source.length > 0;
// };

// エラー: 戻り値の型が違う
// Type ‘(source: string, subString: string) => number’ is not assignable to type ‘SearchFunc’.
// Type ‘number’ is not assignable to type ‘boolean’.
// const invalidSearch2: SearchFunc = function(source: string, subString: string): number {
// return source.indexOf(subString);
// };
“`

このようにInterfaceに関数型を定義することで、特定のシグネチャを持つ関数を求める場面で、その要件を明確にコードで表現できます。

関数型エイリアス (type) との比較

関数型の定義には、Interfaceのコールシグネチャの他に 型エイリアス (type) を使う方法もあります。

“`typescript
type SearchFuncType = (source: string, subString: string) => boolean;

const mySearchWithType: SearchFuncType = function(source, sub) {
return source.search(sub) > -1;
};
“`

Interfaceのコールシグネチャと型エイリアスによる関数型の定義は、ほとんどの場合で互換性があり、どちらを使っても同じように振る舞います。どちらを選ぶかは、プロジェクトのコーディング規約や個人の好みによることが多いですが、一般的に、オブジェクトの形を定義する場合はInterface、よりプリミティブな型やUnion/Intersection型、タプルなどの複合型、あるいは関数型自体をシンプルに定義する場合はtypeが使われる傾向があります。

Interfaceに関数型を定義することの利点は、Interfaceに他のプロパティやメソッドも同時に定義できる点です。

“`typescript
interface GreetingFunctionWithConfig {
(name: string): string; // コールシグネチャ (関数型)
defaultGreeting: string; // プロパティ
}

const englishGreeter: GreetingFunctionWithConfig = (name: string) => {
return ${englishGreeter.defaultGreeting} ${name};
};
englishGreeter.defaultGreeting = “Hello”;

console.log(englishGreeter(“Alice”)); // “Hello Alice”

// エラー: defaultGreeting プロパティがない
// Property ‘defaultGreeting’ is missing in type ‘(name: string) => string’ but required in type ‘GreetingFunctionWithConfig’.
// const frenchGreeter: GreetingFunctionWithConfig = (name: string) => Bonjour ${name};
// frenchGreeter(“Bob”);
“`

このように、関数自体にプロパティを持たせたいような特殊なケースでは、Interfaceでコールシグネチャとプロパティを同時に定義するのが有効です。（JavaScriptの関数は第一級オブジェクトであり、プロパティを持つことができます）

7. Interfaceとクラス

Interfaceは、クラスが満たすべき契約を定義するためにも利用されます。クラス定義で implements キーワードを使用することで、「このクラスは指定されたInterfaceの契約を満たす」ということを明示的に示します。

“`typescript
interface Shape {
color: string;
getArea(): number;
}

// Shape Interface を実装するクラス
class Circle implements Shape {
color: string;
radius: number; // Shape Interface には定義されていないが、クラス独自のプロパティは持てる

constructor(color: string, radius: number) {
this.color = color;
this.radius = radius;
}

getArea(): number {
return Math.PI * this.radius * this.radius;
}
}

// Shape Interface を実装する別のクラス
class Rectangle implements Shape {
color: string;
width: number;
height: number;

constructor(color: string, width: number, height: number) {
this.color = color;
this.width = width;
this.height = height;
}

getArea(): number {
return this.width * this.height;
}

// Shape Interface には定義されていないが、クラス独自のメソッドも持てる
getPerimeter(): number {
return 2 * (this.width + this.height);
}
}

// Interface の型を使って変数宣言することで、実装の詳細を隠蔽できる (ポリモーフィズム)
const myShape1: Shape = new Circle(“red”, 5);
const myShape2: Shape = new Rectangle(“blue”, 10, 20);

console.log(myShape1.getArea()); // 円の面積
console.log(myShape2.getArea()); // 四角形の面積

// エラー: Shape Interface には radius プロパティがない
// Property ‘radius’ does not exist on type ‘Shape’.
// console.log(myShape1.radius);

// エラー: Shape Interface には getPerimeter メソッドがない
// Property ‘getPerimeter’ does not exist on type ‘Shape’.
// console.log(myShape2.getPerimeter());
“`

implements を使うことで、TypeScriptは Circle クラスと Rectangle クラスが Shape Interfaceで定義されているすべてのプロパティとメソッド（ここでは color プロパティと getArea() メソッド）を持っているかチェックします。もしInterfaceの契約を満たしていない場合、コンパイルエラーが発生します。

また、Interfaceの型 (Shape) を使って変数 (myShape1, myShape2) を宣言することで、その変数は Shape Interfaceで定義されたメンバー（color, getArea()) にのみアクセスできるようになります。これは、オブジェクトの具体的な型（Circle や Rectangle）に依存しないコードを書くことを可能にし、コードの柔軟性や保守性を高めます（いわゆるポリモーフィズム）。

Interfaceはpublicメンバーにのみ適用される

TypeScriptのInterfaceは、クラスの public なプロパティとメソッドにのみ適用されます。private や protected なメンバーは、Interfaceの実装チェックの対象外となります。これは、Interfaceが外部からどのようにオブジェクトを利用できるか、という「契約」を定義するものであるためです。

“`typescript
interface Counter {
value: number; // public プロパティを想定
increment(): void; // public メソッドを想定
}

class SimpleCounter implements Counter {
// public value: number; // public はデフォルトなので省略可
value: number;
private _step: number; // private メンバーは Interface の対象外

constructor(initialValue: number, step: number) {
this.value = initialValue;
this._step = step;
}

// public increment(): void { // public はデフォルトなので省略可
increment(): void {
this.value += this._step;
}

// private メソッドも Interface の対象外
private logStep(): void {
console.log(Step is: ${this._step});
}
}

const counter: Counter = new SimpleCounter(0, 1);
console.log(counter.value); // 0
counter.increment();
console.log(counter.value); // 1

// エラー: _step は private なので外部からアクセスできない
// Property ‘_step’ is private and only accessible within class ‘SimpleCounter’.
// console.log(counter._step);

// SimpleCounter のインスタンスとしては private メンバーにアクセスできる
const simpleCounterInstance = new SimpleCounter(10, 5);
// console.log(simpleCounterInstance._step); // エラー (private)
// simpleCounterInstance.logStep(); // エラー (private)
“`

implements を使用することで、クラスの設計段階から特定のInterfaceの要件を満たすように強制できるため、より構造化された、予測可能なコードを作成できます。

8. Interfaceの拡張 (継承)

Interfaceは、他のInterfaceを 拡張 (extends) することができます。これは、既存のInterfaceの定義を再利用しつつ、新しいプロパティやメソッドを追加したい場合に便利です。

Interfaceの拡張は、extends キーワードを使用します。

“`typescript
// 基本的なユーザー情報
interface BasicUser {
id: number;
name: string;
}

// BasicUser を拡張し、詳細情報を追加
interface AdvancedUser extends BasicUser {
email: string;
age: number;
}

// BasicUser を拡張し、ロール情報を追加
interface AdminUser extends BasicUser {
role: “admin” | “super_admin”;
permissions: string[];
}

// AdvancedUser Interface を満たすオブジェクト
const userDetails: AdvancedUser = {
id: 1,
name: “Alice”,
email: “[email protected]”,
age: 30
};

// AdminUser Interface を満たすオブジェクト
const adminDetails: AdminUser = {
id: 2,
name: “Bob”,
role: “admin”,
permissions: [“read”, “write”]
};

// BasicUser Interface を満たすオブジェクト (AdvancedUser/AdminUser オブジェクトも BasicUser Interface を満たす)
const basicUser: BasicUser = {
id: 3,
name: “Charlie”
};

const basicUserFromAdvanced: BasicUser = userDetails; // OK
const basicUserFromAdmin: BasicUser = adminDetails; // OK
“`

AdvancedUser Interfaceは BasicUser Interfaceを拡張しているため、AdvancedUser を満たすオブジェクトは、BasicUser が持つ id と name に加えて、AdvancedUser 独自の email と age プロパティも持つ必要があります。

多重継承

Interfaceは、複数のInterfaceを同時に拡張することも可能です。これは、複数の異なる契約を組み合わせた新しい契約を定義したい場合に便利です。

“`typescript
// 位置情報を持つInterface
interface HasPosition {
x: number;
y: number;
}

// 色情報を持つInterface
interface HasColor {
color: string;
}

// HasPosition と HasColor を両方拡張する Interface
interface ColoredPoint extends HasPosition, HasColor {
// 継承したプロパティに加えて、新しいプロパティやメソッドを追加できる
visible: boolean;
}

// ColoredPoint Interface を満たすオブジェクト
const myColoredPoint: ColoredPoint = {
x: 10,
y: 20,
color: “red”,
visible: true
};

// エラー: HasPosition と HasColor 両方の契約を満たしていないといけない
// Property ‘color’ is missing in type ‘{ x: number; y: number; visible: boolean; }’ but required in type ‘HasColor’.
// const invalidColoredPoint: ColoredPoint = {
// x: 5, y: 5, visible: false // color が足りない
// };
“`

多重継承を利用することで、既存のInterfaceの部品を組み合わせて、複雑なデータ構造のInterfaceを効率的に定義できます。

継承されたプロパティ/メソッドの上書き (型の互換性)

Interfaceを拡張する際に、継承元と同じ名前のプロパティやメソッドを定義することも可能ですが、その場合、継承元の型と互換性がある（より具体的な型であるか、同じ型である） 必要があります。

“`typescript
interface Animal {
name: string;
sound(): string;
}

interface Dog extends Animal {
// name: number; // エラー: 継承元の string より具体的な型ではない
name: string; // OK: 同じ型
// name: “pochi”; // OK: “pochi” は string のリテラル型で、string より具体的な型 (サブタイプ)

// sound(): number; // エラー: 継承元の string より具体的な型ではない
sound(): string; // OK: 同じ型
sound(): “bowwow”; // OK: “bowwow” は string のリテラル型で、string より具体的な型
}
“`

これは、派生したInterfaceの型を継承元のInterfaceの型として扱った場合に型安全性が保たれるようにするための制約です（リスコフの置換原則に似ています）。例えば Dog 型のオブジェクトを Animal 型の変数に代入した場合でも、Animal 型としてアクセスできる sound() メソッドが string を返すことが保証されている必要があります。

Interfaceの継承は、共通のプロパティやメソッドを持つ様々なオブジェクトの型を定義する際に、コードの重複を減らし、Interface間の関係性を明確にするのに役立ちます。

9. InterfaceとType Aliases (type) の違い

TypeScriptでは、Interfaceと非常によく似た機能として Type Aliases（型エイリアス） があります。type キーワードを使用して、既存の型に別名（エイリアス）を付ける機能です。

“`typescript
// Interface でオブジェクトの型を定義
interface PointInterface {
x: number;
y: number;
}

// Type Alias でオブジェクトの型を定義
type PointType = {
x: number;
y: number;
};

const pointI: PointInterface = { x: 1, y: 2 }; // OK
const pointT: PointType = { x: 3, y: 4 }; // OK
“`

ほとんどのオブジェクトの型定義において、InterfaceとType Aliasesは同じように使うことができます。しかし、両者にはいくつかの違いがあります。

主な違い:

1. 拡張性 (Extensibility):

   • Interface: 別のInterfaceを extends キーワードで拡張できます。また、後述する Declaration Merging（宣言のマージ）によって、同じ名前のInterfaceを複数定義し、それらが自動的に結合されることで拡張されます。
   • Type Aliases: 別のType Aliasを直接 extends する機能はありません。型エイリアスを拡張するような振る舞いを実現するには、Intersection Type (&) を使用します。Declaration Merging も利用できません。

   “`typescript
   // Interface の拡張
   interface ButtonProps {
   onClick: () => void;
   }
   interface SubmitButtonProps extends ButtonProps { // 拡張できる
   submitText: string;
   }

   // Type Alias の拡張 (Intersection Type を使う)
   type DivProps = {
   className?: string;
   };
   type ContainerProps = DivProps & { // & で結合
   children: React.ReactNode;
   };

   // Interface の Declaration Merging (後述)
   interface Box {
   width: number;
   }
   interface Box { // 同じ名前で再定義するとマージされる
   height: number;
   }
   // これにより、 Box は { width: number; height: number; } となる
   “`

2. Declaration Merging (宣言のマージ):

   • Interface: 同じスコープ内で同じ名前のInterfaceを複数定義した場合、それらは自動的にマージ（結合）されます。これは、既存のInterfaceに新しいメンバーを追加したい場合に便利です。特に、ライブラリの型定義ファイルを拡張する際などに使われます。
   • Type Aliases: Declaration Merging は利用できません。同じ名前のType Aliasを複数定義するとエラーになります。

   “`typescript
   // Interface はマージされる
   interface Event {
   timestamp: number;
   }
   interface Event { // 同じ Event Interface を再定義
   type: string;
   }
   // 最終的に Event は { timestamp: number; type: string; } となる

   // Type Alias はマージされない (エラーになる)
   // type MyAlias = { a: string; };
   // type MyAlias = { b: number; }; // Error: Duplicate identifier ‘MyAlias’.
   “`

3. 表現できる型の種類:

   • Interface: 主にオブジェクトの型（プロパティ、メソッド、コールシグネチャ、コンストラクトシグネチャ、インデックスシグネチャ）を定義するために使用されます。
   • Type Aliases: プリミティブ型 (string, number, boolean, null, undefined, symbol, bigint)、Literal Types、Union Types (|)、Intersection Types (&)、Tuple Types、Conditional Types など、より広範な型を表現したり、既存の型に別名を付けたりできます。オブジェクトの型も定義できます。

   “`typescript
   // Type Alias で Union Type を定義
   type Status = “active” | “inactive” | “pending”;
   let currentStatus: Status = “active”; // OK
   // currentStatus = “unknown”; // Error

   // Type Alias で Tuple Type を定義
   type Coordinate = [number, number];
   const pos: Coordinate = [10, 20]; // OK
   // const invalidPos: Coordinate = [10, “twenty”]; // Error

   // Interface では Union や Tuple を直接定義することはできない
   // interface StatusInterface = “active” | “inactive”; // Error
   // interface CoordinateInterface = [number, number]; // Error
   “`

どちらを選ぶべきか？

• オブジェクトの型を定義する場合：InterfaceとType Aliasのどちらを使っても構いませんが、一般的にオブジェクトの形を定義する際は Interface が推奨される傾向があります。特に、その型が将来的に他のInterfaceによって拡張される可能性がある場合や、Declaration Merging の恩恵を受けたい場合はInterfaceが良いでしょう。
• オブジェクト以外の型を定義する場合（プリミティブ、Union、Intersection、Tupleなど）：これらの型に名前を付けたい場合は、Type Aliases を使う必要があります。
• 関数型を定義する場合：Interfaceのコールシグネチャ、またはType Aliasの関数型定義のどちらでも可能ですが、シンプルに関数型だけを定義するならType Aliasの方が簡潔かもしれません。関数にプロパティも持たせるならInterfaceが良いでしょう。

多くのケースでは、InterfaceとType Aliasは交換可能に見えますが、上記の違いを理解しておくことで、より適切な方を選択できるようになります。特に、拡張性やDeclaration Mergingの必要性が判断基準となります。現代のTypeScript開発においては、オブジェクトの型にはInterface、それ以外の型や Union/Intersection などの複雑な型には Type Alias を使う、という使い分けが一般的になりつつあります。

10. Interfaceの高度なトピック (入門から次のステップへ)

Interfaceの基本的な使い方を理解したところで、さらに強力な機能であるGenericsとの組み合わせや、Declaration Mergingといった少し進んだトピックについても触れておきましょう。これらは入門レベルから一歩進んだTypeScript開発で役立ちます。

10.1. GenericsとInterface

Generics（ジェネリクス） は、型を抽象化し、再利用可能なコンポーネントを作成するための機能です。InterfaceとGenericsを組み合わせることで、様々な型のプロパティやメソッドを持つ、汎用的なInterfaceを定義できます。

例えば、特定の型のアイテムを格納するコンテナを表すInterfaceを考えます。

“`typescript
// T は型パラメータ (Type Parameter)
interface Container {
value: T; // value プロパティの型は、Interfaceを使うときに指定される型 T となる
get(): T;
set(value: T): void;
}

// string 型の Container
const stringContainer: Container = {
value: “hello”,
get: function() { return this.value; },
set: function(newValue) { this.value = newValue; }
};

console.log(stringContainer.get()); // “hello”
stringContainer.set(“world”);
console.log(stringContainer.get()); // “world”
// stringContainer.set(123); // エラー: number 型は string 型に代入できない

// number 型の Container
const numberContainer: Container = {
value: 123,
get: function() { return this.value; },
set: function(newValue) { this.value = newValue; }
};

console.log(numberContainer.get()); // 123
numberContainer.set(456);
console.log(numberContainer.get()); // 456
// numberContainer.set(“abc”); // エラー: string 型は number 型に代入できない
“`

Interface名の後に山括弧 <T> を付けることで、型パラメータ T を定義します。この T は、Interface内でプロパティやメソッドの型として使用できます。Interfaceを利用する際には、Container<string> や Container<number> のように、具体的な型を指定します。これにより、同じ Container というInterfaceの定義を使い回しつつ、様々な型に対応できる柔軟な型付けが可能になります。

Genericsは、配列 (Array<T>) や Promise (Promise<T>) など、TypeScriptの標準ライブラリでも広く使われている非常に強力な機能です。Interfaceと組み合わせることで、より複雑で再利用性の高い型定義を作成できます。

10.2. Declaration Merging (宣言のマージ)

Interfaceの節で少し触れましたが、TypeScriptでは同じスコープ内で同じ名前のInterfaceを複数定義した場合、それらの定義が自動的にマージされて一つのInterfaceと見なされる Declaration Merging という仕組みがあります。

“`typescript
// 最初の定義
interface Box {
width: number;
}

// 同じ名前で追加の定義
interface Box {
height: number;
}

// さらに追加
interface Box {
depth: number;
}

// これにより、Box Interface は以下のようになります
/
interface Box {
width: number;
height: number;
depth: number;
}
/

const myBox: Box = {
width: 10,
height: 20,
depth: 30
};

// エラー: depth が足りない
// Property ‘depth’ is missing in type ‘{ width: number; height: number; }’ but required in type ‘Box’.
// const incompleteBox: Box = {
// width: 5,
// height: 10
// };
“`

Declaration Merging は、Interfaceに後からプロパティやメソッドを追加したい場合に便利です。特に、既存のJavaScriptライブラリに対してTypeScriptの型定義ファイル (.d.ts ファイル) を提供したり、標準的なJavaScriptオブジェクト（Array, String, Date など）に独自のプロパティやメソッドの型定義を追加したりする際に利用されます。

例えば、JavaScriptの Array オブジェクトに独自の first() メソッドを追加するランタイムコードがあるとします。その型定義を追加したい場合に、Declaration Merging を利用して既存の Array Interfaceを拡張できます。

“`typescript
// JavaScript の Array.prototype に first() メソッドを追加するランタイムコードを想定
// Array.prototype.first = function() { return this.length > 0 ? this[0] : undefined; };

// TypeScript で Array Interface を拡張する
interface Array { // 標準の Array Interface にマージされる
first(): T | undefined; // 新しいメソッドの型定義を追加
}

const numbers = [1, 2, 3];
const firstNum: number | undefined = numbers.first(); // OK
console.log(firstNum); // 1

const emptyArr: string[] = [];
const firstStr: string | undefined = emptyArr.first(); // OK
console.log(firstStr); // undefined

// エラー: first メソッドがないとみなされる (Interface 拡張がなければ)
// Property ‘first’ does not exist on type ‘number[]’.
// const numbersWithoutMerge = [1, 2, 3];
// numbersWithoutMerge.first(); // <- Interface 拡張がない場合のエラー
“`

Declaration Mergingは、Interfaceの強力な機能の一つですが、意図しないマージを防ぐために、同じ名前のInterfaceを定義する際には注意が必要です。

11. Interfaceを使うメリット

これまでInterfaceの様々な使い方を見てきましたが、Interfaceを使うことで具体的にどのようなメリットが得られるのでしょうか。TypeScriptで開発する上でInterfaceがなぜ重要視されるのか、その理由を改めて整理しましょう。

1. コードの可読性と保守性の向上:

   • Interfaceは、オブジェクトや関数の期待される「形」を明確に定義します。これにより、コードを読む人がそのデータ構造を容易に理解できるようになります。「この関数は User Interfaceを満たすオブジェクトを受け取り、Order Interfaceを満たすオブジェクトを返す」といった情報がコード上で一目瞭然になります。
   • 複雑なオブジェクトの構造もInterfaceとして切り出すことで、コードの本体がシンプルになり、見通しが良くなります。

2. 早期のエラー検出 (開発段階でのバグ削減):

   • TypeScriptコンパイラは、Interfaceの定義に基づいて厳格な型チェックを行います。 Interfaceの契約を満たさないオブジェクトの代入や、存在しないプロパティへのアクセスなどを、コードを実行する前に検出してエラーとして報告してくれます。
   • これにより、実行時エラーになりがちな型に関するバグを開発の早い段階で見つけることができ、デバッグにかかる時間と労力を大幅に削減できます。これは、特に大規模なアプリケーション開発において非常に重要なメリットです。

3. チーム開発におけるコミュニケーション促進:

   • Interfaceは、モジュール間やチームメンバー間でのデータの受け渡しに関する「契約」として機能します。「このAPIエンドポイントは ApiResponse Interface の形式でデータを返す」「この関数は Config Interface を満たす設定オブジェクトを引数として取る」といった合意を、Interfaceというコードとして共有できます。
   • これにより、口頭やドキュメントだけでは曖昧になりがちな仕様を明確にし、チームメンバー間の誤解を防ぎ、スムーズな連携を促進します。

4. リファクタリングの容易さ:

   • Interfaceによってコード間の依存関係が型として明確になっているため、データ構造の変更が必要になった場合でも、影響範囲を特定しやすくなります。Interfaceの定義を変更すれば、そのInterfaceを利用しているすべての箇所でコンパイルエラーが発生するため、どこを修正すれば良いかがすぐに分かります。
   • 型情報がないJavaScriptコードと比較して、TypeScriptコードははるかに安全かつ効率的にリファクタリングできます。

5. エディタの補完機能強化:

   • Interfaceによって型情報が豊富になることで、Visual Studio Codeなどの対応エディタやIDEのコード補完機能やホバー時の情報表示が格段に賢くなります。
   • オブジェクトの変数名の後に . を打つと、そのInterfaceに定義されているプロパティやメソッドの候補が表示されるため、タイプミスを防ぎ、開発スピードが向上します。また、関数にカーソルを合わせると、期待される引数の型や戻り値の型が表示され、ドキュメントを参照する手間が省けます。

6. 設計思考の促進:

   • Interfaceを定義する過程で、「このオブジェクトにはどのようなプロパティが必要か？」「このモジュールが提供する機能（メソッド）は何か？」といったことを自然と考えるようになります。
   • これは、コードを書く前に設計をしっかり行うという良い習慣を促進し、より構造的でメンテナンスしやすいコードを書く助けとなります。

これらのメリットは、TypeScriptを採用する最大の理由と直結しています。Interfaceは、静的型付けの恩恵を最大限に引き出すための中心的な役割を担っているのです。

12. 実践的なInterfaceの活用例

Interfaceがどのように実際の開発で活用されているか、いくつかの具体例を見てみましょう。

12.1. APIレスポンスの型定義

Webアプリケーション開発では、APIから受け取るJSONデータの構造をInterfaceで定義することが非常に一般的です。

“`typescript
// ユーザー情報を取得するAPIレスポンスの型定義
interface UserResponse {
id: number;
username: string;
email: string;
isActive: boolean;
createdAt: string; // 日付は文字列として受け取ることが多い
profile?: { // ネストされたオブジェクトも定義できる
firstName: string;
lastName: string;
bio?: string;
};
roles: string[]; // 配列の型も定義できる
}

async function fetchUser(userId: number): Promise {
const response = await fetch(/api/users/${userId});
if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}
// fetch の response.json() はデフォルトでは any を返すことが多い
// ここで UserResponse 型として扱うことで、型安全性を確保
const userData: UserResponse = await response.json();
return userData;
}

// 関数の呼び出しと、受け取ったデータの利用
async function displayUser(userId: number) {
try {
const user = await fetchUser(userId); // user は UserResponse 型になる

console.log(`User ID: ${user.id}`);
console.log(`Username: ${user.username}`);
console.log(`Email: ${user.email}`);
console.log(`Status: ${user.isActive ? 'Active' : 'Inactive'}`);

// オプショナルプロパティにアクセスする際は安全なアクセス (?.) を使うと便利
if (user.profile) {
  console.log(`Name: ${user.profile.firstName} ${user.profile.lastName}`);
  if (user.profile.bio) {
    console.log(`Bio: ${user.profile.bio}`);
  }
}

console.log(`Roles: ${user.roles.join(', ')}`);

// エラー: APIレスポンスの型に存在しないプロパティにアクセスしようとする
// Property 'passwordHash' does not exist on type 'UserResponse'.
// console.log(user.passwordHash);

} catch (error) {
console.error(“Failed to fetch user:”, error);
}
}

displayUser(123);
“`

APIレスポンスのInterfaceを定義することで、取得したJSONデータが期待通りの構造を持っていることを保証でき、そのデータを安全に扱うことができます。存在しないプロパティへのアクセスを防いだり、プロパティの型が違うことによるエラーを防いだりできます。

12.2. 関数の引数・戻り値の型定義

Interfaceは、複雑なオブジェクトを引数や戻り値としてやり取りする関数の型定義にも役立ちます。

“`typescript
interface CircleConfig {
centerX: number;
centerY: number;
radius: number;
color?: string; // オプショナル
}

interface CircleInfo {
area: number;
circumference: number;
description: string;
}

// CircleConfig を引数に取り、CircleInfo を返す関数
function calculateCircleInfo(config: CircleConfig): CircleInfo {
// 引数 config は CircleConfig Interface に従って型チェックされる
if (config.radius <= 0) {
throw new Error(“Radius must be positive.”);
}

const area = Math.PI * config.radius * config.radius;
const circumference = 2 * Math.PI * config.radius;
const description = Circle at (${config.centerX}, ${config.centerY}) with radius ${config.radius};

// 戻り値が CircleInfo Interface に従って型チェックされる
return {
area: area,
circumference: circumference,
description: description
};
}

// OK: CircleConfig Interface を満たす引数
const circle1Config: CircleConfig = { centerX: 0, centerY: 0, radius: 10 };
const circle1Info = calculateCircleInfo(circle1Config);
console.log(circle1Info.area);

// エラー: 半径が足りない (必須プロパティ欠落)
// Property ‘radius’ is missing in type ‘{ centerX: number; centerY: number; color: string; }’ but required in type ‘CircleConfig’.
// const circle2Config = { centerX: 5, centerY: 5, color: “blue” };
// const circle2Info = calculateCircleInfo(circle2Config);

// エラー: 戻り値の型を間違って受け取ろうとする (コンパイル時に検出)
// Type ‘CircleInfo’ is not assignable to type ‘{ area: number; }’.
// Property ‘circumference’ is missing in type ‘CircleInfo’ but required in type ‘{ area: number; }’.
// const justArea: { area: number } = calculateCircleInfo(circle1Config);
“`

このように、関数のシグネチャでInterfaceを使用することで、その関数がどのような構造のオブジェクトを受け取り、どのような構造のオブジェクトを返すのかが明確になります。これは、関数の利用方法を誤ることによるバグを防ぎ、コードの信頼性を高めます。

12.3. ライブラリの型定義ファイル (.d.ts)

Interfaceは、JavaScriptで書かれたライブラリやモジュールに対して、TypeScriptの型情報を提供する型定義ファイル (.d.ts ファイル) で広く利用されています。

例えば、以下のようなシンプルなJavaScriptライブラリがあるとします。

javascript
// my-library.js
export function createGreeter(greeting) {
return {
message: greeting,
sayHello: function() {
console.log(this.message);
}
};
}

このJavaScriptライブラリを使うTypeScriptコードで型安全性を得るためには、.d.ts ファイルを作成し、Interfaceを使って型を定義します。

“`typescript
// my-library.d.ts
export interface Greeter {
message: string;
sayHello(): void;
}

export function createGreeter(greeting: string): Greeter;
“`

この .d.ts ファイルがあることで、元のJavaScriptコードを変更することなく、TypeScript側で型チェックやコード補完の恩恵を受けられるようになります。

“`typescript
// consumer.ts (my-library を利用するコード)
import { createGreeter, Greeter } from ‘./my-library’; // .d.ts ファイルから型情報が読み込まれる

const greeterInstance: Greeter = createGreeter(“Hello from Library!”);

greeterInstance.sayHello(); // OK, 型情報があるのでメソッドが補完される
// greeterInstance.message = 123; // エラー: string 型が必要

// エラー: createGreeter 関数は string 型の引数が必要
// createGreeter(123);
“`

多くのJavaScriptライブラリ（React, Vue, Node.jsなど）は、公式にTypeScriptの型定義ファイルを提供しています。これらのファイルの中身を見ると、Interfaceが多用されていることが分かります。Interfaceは、既存のJavaScript資産とTypeScriptを連携させる上で非常に重要な役割を果たしています。

13. よくある疑問・注意点

Interfaceを使う上で、初心者の方が疑問に思うことや、注意すべき点をいくつか解説します。

13.1. Interfaceは実行時には存在しない

TypeScriptのInterfaceは、コンパイル時に型チェックのためにのみ使用されるものであり、コンパイルされて生成されるJavaScriptコードには一切残りません。これは、EnumやNamespaceの一部のように、コンパイル後もJavaScriptとして存在するTypeScriptの機能とは異なる点です。

“`typescript
interface MyInterface {
prop: string;
}

function processData(data: MyInterface) {
console.log(data.prop);
}

// コンパイル後の JavaScript (例えば ESNext をターゲットとした場合)
/
function processData(data) {
console.log(data.prop);
}
/
“`

Interfaceの定義はコンパイル後のコードには含まれないため、Interfaceを使って実行時に何かを判断したり、Interface名を文字列として取得したりすることはできません。Interfaceはあくまで「開発時の型チェックのためのメタ情報」と考えるべきです。

13.2. interface と type の選び方に関する補足

InterfaceとType Aliasesのどちらを使うべきかについては、プロジェクトやチームによって方針が分かれることもあります。

• Interfaceを推奨する考え方: オブジェクトの型定義には一貫してInterfaceを使うことで、Declaration Merging による拡張の可能性を残し、オブジェクトの形を定義するという目的を明確にする。Union/Intersectionなどの複合型やプリミティブ型に名前を付ける場合にのみtypeを使う。
• Type Aliasを推奨する考え方: オブジェクトの型定義も含め、すべての型定義にtypeを使い、一貫性を保つ。拡張が必要な場合はIntersection Type (&) を利用する。Declaration Mergingは特定のケース（ライブラリ拡張など）以外ではあまり使わない。

どちらのアプローチにもメリット・デメリットがあります。重要なのは、プロジェクト内で一貫したルールを定め、それに従うことです。ただし、上述の「拡張性」「Declaration Merging」「表現できる型の種類」といった明確な違いがあるため、それらを理解した上で使い分けるのが最も柔軟な方法と言えます。特にオブジェクトの「形」を定義する際はInterface、それ以外はType Aliasという使い分けは非常に理にかなっています。

13.3. 複雑な型定義へのアプローチ

Interfaceはオブジェクトの型定義をシンプルに保つのに適していますが、現実世界のデータ構造はより複雑な場合があります。ネストされたオブジェクト、配列、Union Type、Intersection Typeなどが組み合わさることもよくあります。

“`typescript
interface Article {
id: string;
title: string;
content: string;
author: { // ネストされたオブジェクト
id: number;
name: string;
};
tags: string[]; // 文字列の配列
status: “draft” | “published” | “archived”; // Literal Union Type
publishedAt?: string | null; // オプショナル、string または null の可能性あり
}

interface Comment {
id: number;
articleId: string;
authorId: number;
text: string;
createdAt: string;
// Union Type と Intersection Type を組み合わせる例 (Interface だけでは難しい)
// author: { type: “user”; userId: number; username: string; } | { type: “guest”; guestName: string; }
}

// 複数の型定義を組み合わせる (Intersection Type を type で定義)
type ArticleWithComments = Article & {
comments: Comment[];
};

// Interface は主にオブジェクトの基本的な構造定義に使い、
// より複雑な組み合わせ（Union, Intersection, Tupleなど）や別名付けには type を使う
“`

このように、Interfaceだけでは表現できない複雑な型は、Type AliasesやUnion/Intersection Typeなどの他のTypeScriptの型システム機能と組み合わせて表現します。Interfaceは、あくまでオブジェクトの「基本的な枠組み」や「契約」を定義するための強力なツールとして捉えましょう。

14. まとめ：Interfaceがもたらす開発体験の向上

この記事では、TypeScriptのInterfaceについて、その基本的な使い方から、プロパティやメソッドの様々な定義方法、他のTypeScript機能（関数型、クラス、Generics）との連携、そしてInterfaceとType Aliasesの違い、最後にInterfaceを使うことの具体的なメリットと活用例について詳細に解説しました。

Interfaceは単なる構文の一つではなく、コードの意図を明確にし、開発の早期段階でバグを検出するための強力なツール です。Interfaceによってデータ構造の「契約」が定義されることで、コードの可読性、保守性、そしてチーム開発における連携が大きく向上します。また、優れたエディタのサポートと組み合わせることで、開発効率も飛躍的に高まります。

TypeScriptを学ぶ上で、Interfaceは間違いなく最も重要な概念の一つです。この記事で解説した内容を理解し、実際のコーディングで積極的にInterfaceを活用することで、より堅牢でメンテナンスしやすいTypeScriptコードを書くことができるようになるはずです。

最初はInterfaceを定義することが手間に感じるかもしれません。しかし、Interfaceを書くことは、コードの設計について考える良い機会でもあります。少しずつでもInterfaceを使い始め、そのメリットを体感してみてください。きっと、TypeScriptを使った開発体験がより快適で生産的なものになるはずです。

Interfaceをマスターした次のステップとして、Union Type, Intersection Type, Literal Types, Utility Types (Partial, Readonly, Pick, Omitなど)、Conditional Types など、TypeScriptのさらに強力な型システム機能についても学んでいくと、より柔軟で表現力の高い型定義が可能になります。

この記事が、あなたのTypeScript学習の一助となれば幸いです。Happy Coding!