サンプルコードで身につける: type エイリアス

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

1座標の型に名前を付ける

type でオブジェクトの型に別名を付ける、最も基本的な形です。interface と同じように、一度名前を付ければ複数の変数で同じ形を使い回せます。

TypeScript

type Coordinate = {
  x: number;
  y: number;
};

const startPoint: Coordinate = { x: 0, y: 0 };
const goalPoint: Coordinate = { x: 3, y: 4 };

console.log(startPoint);
console.log(goalPoint);
console.log("xの移動量: " + (goalPoint.x - startPoint.x));

2プリミティブ型にも名前を付けられる

type は interface と違い、number や string そのものにも別名を付けられます。型としては元と同じですが、「この number は円である」という意味がコードに残り、関数の意図が読み取りやすくなります。

TypeScript

type Yen = number;
type EmailAddress = string;

const lunchPrice: Yen = 850;
const contactEmail: EmailAddress = "taro@example.com";

function applyTax(price: Yen): Yen {
  return Math.floor(price * 1.1);
}

console.log(applyTax(lunchPrice));
console.log(contactEmail);

3配列やタプルへの別名

要素の型が複雑になりがちな配列やタプルも、type で名前を付けると意図が明確になります。[string, number] より NameAndAge の方が「何の組か」が一目で伝わる、命名の効果を示す例です。

TypeScript

type TemperatureLog = number[];
type NameAndAge = [string, number];

const weeklyTemperatures: TemperatureLog = [21.5, 23.0, 19.8];
const entry: NameAndAge = ["Taro", 28];

console.log(weeklyTemperatures);

const [personName, personAge] = entry;
console.log(personName + "は" + personAge + "歳");

4関数型に名前を付けて使い回す

(input: string) => boolean のような関数型も type で名前を付けられます。同じ形のチェック関数を何種類も作るバリデーション処理など、関数を部品として揃えたい場面の定番です。

TypeScript

type Validator = (input: string) => boolean;

const notEmpty: Validator = function (input) {
  return input.length > 0;
};

const isPostalCode: Validator = function (input) {
  return /^[0-9]{3}-[0-9]{4}$/.test(input);
};

console.log(notEmpty("hello"));
console.log(notEmpty(""));
console.log(isPostalCode("100-0001"));
console.log(isPostalCode("abc"));

5型を組み合わせてカートを表現する

小さな type を定義し、それを別の type の中で使って大きな構造を組み立てるのが実務の進め方です。CartItem の配列を持つ Cart のように、型同士の関係がそのままデータ設計の図になります。

TypeScript

type CartItem = {
  itemName: string;
  unitPrice: number;
  quantity: number;
};

type Cart = {
  items: CartItem[];
};

const myCart: Cart = {
  items: [
    { itemName: "コーヒー豆", unitPrice: 1200, quantity: 2 },
    { itemName: "ドリッパー", unitPrice: 800, quantity: 1 },
  ],
};

let total = 0;
for (const item of myCart.items) {
  total += item.unitPrice * item.quantity;
}
console.log("合計: " + total + "円");