インターフェースとオブジェクト型
interface と type でオブジェクトの形状を表現し、インターフェースを拡張し、? でオプショナルプロパティを、readonly で不変性を指定します。
「インターフェースとオブジェクト型」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
interfaceとtypeの違い
interfaceとtypeは、どちらもオブジェクトの形を記述します。主な違いは、インターフェースはマージ（宣言マージ）でき、一般的に公開APIの形を定義する場合に推奨されることです。型エイリアスは複雑な型に対してより柔軟です。
// interface:
interface User {
id: number;
name: string;
}
// type alias (equivalent for objects):
type User = {
id: number;
name: string;
};インターフェースの定義
interfaceを使ってオブジェクトの形を定義します。すべてのプロパティはデフォルトで必須です。プロパティはセミコロンで区切ります。
interface Product {
id: number;
name: string;
price: number;
description: string;
inStock: boolean;
category: string;
}オプションプロパティとreadonlyプロパティ
?を付けてプロパティをオプションにします。変更を防ぐにはreadonlyを使用します。readonlyはコンパイル時に不変性を保証します。
interface Config {
host: string;
port?: number; // optional: number | undefined
readonly apiKey: string; // can't change after assignment
}
const config: Config = { host: 'localhost', apiKey: 'abc' };
config.port = 8080; // OK
config.apiKey = 'new'; // Error: readonlyインターフェースの拡張
extendsを使うと、別のインターフェースのすべてのプロパティを含む新しいインターフェースを作成できます。多重継承にも対応しています。
interface Animal {
name: string;
sound(): string;
}
interface Dog extends Animal {
breed: string;
fetch(): void;
}
interface ServiceDog extends Dog {
task: string;
}インデックスシグネチャ — 動的なキー
プロパティ名をあらかじめ把握していないものの、値の型が分かっている場合は、インデックスシグネチャを使用します。
interface StringMap {
[key: string]: string;
}
const headers: StringMap = {
'Content-Type': 'application/json',
'Authorization': 'Bearer token123'
};
// Also for translating:
interface Translations {
[locale: string]: { [key: string]: string };
}インターフェースでの関数型
インターフェース内でメソッドシグネチャを定義します。省略記法と完全なプロパティ構文のどちらも使用できます。
interface Logger {
log(message: string): void;
warn(message: string): void;
error(message: string, err?: Error): void;
}
// Also valid:
interface Logger2 {
log: (message: string) => void;
}クラスでのインターフェース実装
クラスは1つ以上のインターフェースをimplementできます。TypeScriptは、クラスがすべての必須メンバーを提供していることを検証します。
interface Serialisable {
serialise(): string;
deserialise(data: string): this;
}
class User implements Serialisable {
constructor(public name: string) {}
serialise() { return JSON.stringify({ name: this.name }); }
deserialise(data: string) {
const obj = JSON.parse(data);
return new User(obj.name) as this;
}
}宣言マージ
同じ名前を持つ複数のinterface宣言は、1つにマージされます。サードパーティーの型を拡張する場合に便利です。型エイリアスはこれに対応していません。
interface Window {
myPlugin: { version: string };
}
// Now window.myPlugin is typed everywhereネストしたオブジェクト型
インターフェースのプロパティ自体にオブジェクト型を持たせることができます。インラインで定義することも、別のインターフェースを参照することも可能です。
interface Order {
id: string;
customer: {
name: string;
email: string;
};
items: Array<{
productId: string;
quantity: number;
price: number;
}>;
total: number;
}構造的型付け — ダックタイピング
TypeScriptは構造的型付けを使用します。値が必須プロパティを少なくとも備えていれば、その型を満たします。明示的なimplementsは必要ありません。正しい形を持つオブジェクトであれば互換性があります。
interface Named {
name: string;
}
function greet(obj: Named) {
console.log(`Hello, ${obj.name}!`);
}
// No 'implements Named' needed:
greet({ name: 'Alice', age: 30 }); // OK — has the name propertyインターフェースによる判別可能なユニオン
ユニオン内のバリエーションを区別するには、リテラル型の判別用プロパティを追加します。TypeScriptは、その判別用プロパティに基づいてswitchやifの中で型を絞り込みます。
interface Circle { kind: 'circle'; radius: number; }
interface Square { kind: 'square'; side: number; }
type Shape = Circle | Square;
function area(shape: Shape): number {
switch (shape.kind) {
case 'circle': return Math.PI * shape.radius ** 2;
case 'square': return shape.side ** 2;
}
}確認問題
TypeScriptにおけるinterfaceとtypeの主な違いは何ですか。
振り返り: インターフェース
interfaceは、必須、オプション、readonlyのプロパティを持つオブジェクトの形を記述します。extendsでインターフェースを拡張できます。インデックスシグネチャは動的なキーに使用します。クラスはインターフェースを実装できます。宣言マージはインターフェース固有の機能です。TypeScriptは構造的型付けを使用するため、明示的な宣言ではなく形が重要です。
よくある質問
「インターフェースとオブジェクト型」レッスンは無料ですか？
はい。「インターフェースとオブジェクト型」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「インターフェースとオブジェクト型」で何を学びますか？
interface と type でオブジェクトの形状を表現し、インターフェースを拡張し、? でオプショナルプロパティを、readonly で不変性を指定します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「インターフェースとオブジェクト型」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。