サンプルコードで身につける: interface — オブジェクトの型に名前を付ける

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1Book という名前を付けて使い回す

interface でオブジェクトの形に名前を付ける、最も基本的な形です。一度定義すれば、波カッコの型を毎回書かずに Book という名前だけで同じ形を何度でも使えます。

TypeScript

interface Book {
  title: string;
  pages: number;
}

const favoriteBook: Book = { title: "TypeScript入門", pages: 320 };
const nextBook: Book = { title: "アルゴリズム図鑑", pages: 240 };

console.log(favoriteBook.title);
console.log(nextBook.title);

2関数の引数を interface で受ける

interface 名は関数の引数の型としてそのまま使えます。引数の波カッコ型が名前1つに置き換わって読みやすくなり、形が合わないオブジェクトを渡すとエラーになる点は変わりません。

TypeScript

interface Product {
  productName: string;
  price: number;
}

function showPrice(product: Product): string {
  return product.productName + ": " + product.price + "円";
}

const coffee: Product = { productName: "コーヒー", price: 480 };
console.log(showPrice(coffee));
console.log(showPrice({ productName: "紅茶", price: 400 }));

3? や readonly も interface で使える

前のレッスンで学んだオプショナルプロパティと readonly は、interface の中でもまったく同じように書けます。ID は固定・自己紹介は任意、という現実のユーザーデータがそのまま型になります。

TypeScript

interface UserProfile {
  readonly userId: number;
  userName: string;
  bio?: string;
}

function showProfile(profile: UserProfile): void {
  console.log("[" + profile.userId + "] " + profile.userName);
  if (profile.bio !== undefined) {
    console.log("自己紹介: " + profile.bio);
  }
}

showProfile({ userId: 1, userName: "Taro", bio: "コーヒーが好きです" });
showProfile({ userId: 2, userName: "Hanako" });

4関数を持つ interface

interface のプロパティには関数型も書けます。「ラベルと変換関数のセット」のように、データと振る舞いをひとまとめにした部品を複数作って差し替える、実務でよくある設計の入り口です。

TypeScript

interface PriceFormatter {
  currencyLabel: string;
  format: (amount: number) => string;
}

const yenFormatter: PriceFormatter = {
  currencyLabel: "円",
  format: function (amount) {
    return amount + "円";
  },
};

const dollarFormatter: PriceFormatter = {
  currencyLabel: "ドル",
  format: function (amount) {
    return "$" + (amount / 100).toFixed(2);
  },
};

console.log(yenFormatter.format(480));
console.log(dollarFormatter.format(480));

5タスク一覧をinterfaceの配列で処理する

実務では「interface を定義し、その配列を filter や map で加工する」流れが毎日のように登場します。API のレスポンス一覧に型を付けて未完了タスクだけ表示する、典型的な処理の縮図です。

TypeScript

interface Task {
  id: number;
  taskTitle: string;
  done: boolean;
}

const tasks: Task[] = [
  { id: 1, taskTitle: "資料作成", done: true },
  { id: 2, taskTitle: "レビュー依頼", done: false },
  { id: 3, taskTitle: "デプロイ", done: false },
];

const remaining = tasks.filter(function (task) {
  return !task.done;
});

console.log("未完了: " + remaining.length + "件");
for (const task of remaining) {
  console.log("- " + task.taskTitle);
}