Interfaceによるオブジェクト形状の定義

ようこそ

基本的なインターフェース

interface User {
  id: number;
  name: string;
  email: string;
}
const alice: User = { id: 1, name: 'Alice', email: 'a@b.com' };

?による省略可能なプロパティ

interface Config {
  host: string;
  port?: number;     // optional
  timeout?: number;  // optional
}

Readonlyプロパティ

interface Point {
  readonly x: number;
  readonly y: number;
}
const p: Point = { x: 5, y: 10 };
// p.x = 0; // Error!

メソッドシグネチャ

interface Animal {
  name: string;
  speak(): string;
  move(distance: number): void;
}

インデックスシグネチャ

interface StringMap {
  [key: string]: string;
}
const headers: StringMap = {
  'content-type': 'application/json',
  'accept': 'text/html',
};

構造的型付け

interface Named { name: string; }
function greet(obj: Named) { console.log(obj.name); }
greet({ name: 'Alice', age: 30 }); // Extra props OK when not a literal

余剰プロパティチェック

interface Config { host: string; }
// const c: Config = { host: 'localhost', extra: 1 }; // Error on literal
const obj = { host: 'localhost', extra: 1 };
const c: Config = obj; // OK — not a fresh literal

関数型のインターフェース

interface Greeter {
  (name: string): string;
}
const greet: Greeter = name => 'Hello, ' + name;

ネストしたインターフェース

interface Address { street: string; city: string; }
interface Person { name: string; address: Address; }
const p: Person = { name: 'Alice', address: { street: '1 Main', city: 'NY' } };

インターフェースとクラスインスタンスの比較

interface Saveable { save(): Promise<void>; }
class UserService implements Saveable {
  async save() { /* ... */ }
}

クイックチェック

まとめ