データの形を、ひとつにまとめる

バラバラの値を「申請1件」にまとめる

const expense = {
  applicant: "佐藤",
  amount: 1200,
  hasReceipt: true
};

console.log(expense.amount);

波括弧で、名前と値の組をまとめたものがオブジェクトです。applicantやamountをプロパティと呼びます。ドットで項目を指定し、expense.amountならこの申請の金額を取り出します。

関係する値をひとまとまりにすると、氏名だけ別の申請のものになるような取り違えを減らしやすくなります。オブジェクトは「申請書1枚」、配列は「申請書の束」と考えましょう。

typeで、共通のひな形に名前を付ける

type Expense = {
  applicant: string;
  amount: number;
  hasReceipt: boolean;
  memo?: string;
};

const expense: Expense = {
  applicant: "佐藤",
  amount: 1200,
  hasReceipt: true
};

type Expenseは、このデータの形に名前を付けています。以後、: Expenseと書けば共通の約束が使えます。memo?の疑問符はその項目を省略できるという印。最初の3項目は必須で、メモは任意です。

interfaceも、形の約束を表せる

interface Expense {
  applicant: string;
  amount: number;
  hasReceipt: boolean;
  memo?: string;
}

この例ではtypeと同じ形を、interfaceでも表せます。機能には違いがありますが、入門では「項目名と型をまとめている」と読めれば十分です。typeかinterfaceかより、必要な情報が正しく表現されているかが業務側の確認ポイントです。

一覧の型と、変更してはいけない項目

type Expense = {
  readonly id: string;
  applicant: string;
  amount: number;
};

const expenses: Expense[] = [
  { id: "E-001", applicant: "佐藤", amount: 1200 },
  { id: "E-002", applicant: "田中", amount: 800 }
];

Expense[]は申請の一覧。readonlyは、型のチェック上、そのプロパティへの書き換えを制限する印です。IDのようにうっかり変えたくない値に使えます。

仕様の相談：コメントを必須にしたい

上司から「差戻しのときだけコメントを必須にしてほしい」と言われました。単にmemo?: stringと書くだけでは、どんな状態でも省略できます。「文字列必須」でも空文字""は文字列です。

開発担当には、「どの状態で」「何文字以上を」「画面と保存先の両方で」検査するかを確認します。型に表せる条件もありますが、ひな形の約束と、実際の入力内容の検査を合わせて考えることが大切です。