【入門編】 typeof型演算子の活用 – TypeScript実践ガイド

こんにちは！TypeScriptの世界へようこそ。チーフアーキテクトの私です。

TypeScriptを書き始めたばかりの頃って、「あれ？型って全部自分で書かなきゃいけないの？めんどくさいな…」って思いませんか？私は昔、画面に広がる真っ赤なエラーの波に心が折れかけました。

でも、大丈夫ですよ。今日はそんなあなたの負担をスッと軽くしてくれる、ちょっと魔法みたいな機能「`typeof`型演算子」のお話をします。

難しい専門用語はなるべく置いておいて、身近な例えから一緒に紐解いていきましょう！

—

1. 「お菓子の型」と「実物のお菓子」の話

TypeScriptの「型」って、なんだか難しく聞こえますよね。
まずは、身近な「お菓子の型抜き」を想像してみてください。

値（Value）：いま目の前にある、実際に食べられる「クッキー」
型（Type）：そのクッキーを作るための「金属の型（クッキー型）」

通常、私たちは「まず型を用意して、その通りにクッキーを焼く」という順番でコードを書きます。

// 1. まず型（設計図）を作る
type User = {
name: string;
age: number;
};

// 2. それに沿った値を作る
const taro: User = { name: “太郎”, age: 25 };

でも、現実のWeb開発では「すでに目の前にある可愛いクッキーを見てから、『あ、この形用の型が欲しいな』と思う瞬間」がよくあるんです。

APIから返ってきたデータや、画面にある設定オブジェクトなど、「もう値はあるんだから、そこから勝手に型を作ってよ！」と言いたくなる場面ですね。

そんなわがままをスマートに叶えてくれるのが、今回紹介する `typeof` 型演算子なんです。

—

2. `typeof` 型演算子ってなに？

JavaScriptにも `typeof` という演算子がありますよね。これは実行時（ランタイム）に「あ、これ文字列だね」「これは数字だね」と調べるためのものでした。

TypeScriptの `typeof` は、それの「型定義の世界バージョン」です。
プログラムが動く前の「コンパイル（型チェック）の段階」で、すでにある値から、その構造をそっくりそのまま「型」として抽出してくれる優れものです。

百聞は一見にしかず、コードを見てみましょう。

// 1. 普通のJavaScriptのオブジェクト（値）を作る
const defaultSettings = {
theme: “dark”,
volume: 80,
notifications: true,
};

// 2. 「このオブジェクトの構造と同じ型を作って！」とTypeScriptにお願いする
//これが typeof の力です
type Settings = typeof defaultSettings;

/
上の `type Settings` は、裏側で自動的に以下のように解釈されています：
{
theme: string;
volume: number;
notifications: boolean;
}
/

どうですか？わざわざ `type Settings = { … }` と手書きで書かなくてよかったんです。これだけでもう、コードの重複（DRY原則の違反）を防げる気がしてワクワクしませんか？

—

3. 現場でよくある「これ、助かる！」な活用シーン

「へえ、便利そうだけど、実際のWeb制作や開発でどんな時に使うの？」って思いますよね。
よくある、現場のリアルなシチュエーションを覗いてみましょう。

シチュエーション①：定数オブジェクトの型を自動化したいとき

アプリケーションを作っていると、「ステータス一覧」や「曜日のマッピング」などをオブジェクトで定義することがよくあります。

// 注文のステータス定義
const ORDER_STATUS = {
PENDING: “保留中”,
SHIPPED: “発送済み”,
DELIVERED: “配達完了”,
CANCELED: “キャンセル”,
} as const; // ※ここにある “as const” がマジックワードです！

// ORDER_STATUSの値から、キーや値の型を自動で作る
type OrderStatus = typeof ORDER_STATUS;
type OrderStatusKey = keyof typeof ORDER_STATUS; // “PENDING” | “SHIPPED” …
type OrderStatusValue = typeof ORDER_STATUS[keyof typeof ORDER_STATUS]; // “保留中” | “発送済み” …

ここで登場した `as const`（アズ・コースト）。これは「このオブジェクトの中身を書き換え不可（読み取り専用）にして、値もただの文字列じゃなくて『そのリテラル文字列そのもの』として扱ってね」というTypeScriptへの強い要望です。

これと `typeof` を組み合わせることで、「定数を変えたら、自動的に型も連動して変わる」という、メンテナンス性の神のようなコードが完成します。

—

シチュエーション②：APIのレスポンスやダミーデータから型を起こすとき

まだバックエンドのAPIが完成していないとき、フロントエンド側で「モック（ダミーデータ）」を用意して開発を進めることがありますよね。

// フロントエンドで作ったダミーのユーザーデータ
const mockUserResponse = {
id: “uuid-12345”,
profile: {
firstName: “太郎”,
lastName: “山田”,
tags: [“A”, “B”, “C”],
},
isActive: true,
};

// このダミーデータから、将来本番で使う型を引っペがして（抽出して）おく
type UserResponse = typeof mockUserResponse;

// この型を使って、別の関数を安全に書く
function printUserSummary(user: UserResponse) {
console.log(`${user.profile.lastName} ${user.profile.firstName} さん`);
}

printUserSummary(mockUserResponse); // ばっちり動きます！

もし後日、ダミーデータに `email: string` が追加されたら？
`typeof` を使っていれば、型定義ファイルをわざわざ探しにいって書き直す手間が減ります（もちろんダミーデータの構造が変わったら型も追従します）。

—

4. つまずきやすいポイントと「お薬」

ここで、初心者の人がよくハマるポイントをそっと共有しておきますね。

つまずき：JavaScriptの `typeof` とごっちゃになる！

JavaScriptの `typeof`：ブラウザやNode.jsが動いている最中（ランタイム）に、`typeof x === “string”` のように使ってデータの種類を文字列で返します。
TypeScriptの `typeof`：コードを書いている最中（コンパイル時）に、変数の型を取り出すために使います。出力されたJavaScriptのコードには、この `typeof` は綺麗さっぱり消え去ります。

「あれ、ブラウザのコンソールで動かそうとしたのにエラーになるぞ？」と思ったときは、この違いを思い出してくださいね。TypeScriptの世界だけの、いわば「開発を便利にするメガネ」のようなものです。

—

まとめ：型は「書く」から「抽出する」時代へ

今回は、値から型をエレガントに引っ張り出す `typeof` 型演算子についてお話ししました。

型をゼロから手書きして疲れていませんか？
すでにそこにある「値（オブジェクトや定数）」を再利用できませんか？

そう考えるだけで、TypeScriptを書くストレスがぐっと減り、コードがより柔軟で頑丈になります。

最初は「へえ、こんな裏技があるんだな」くらいの感覚で大丈夫です。日々のコーディングの中で、「あ、ここ、さっきの `typeof` でいけるかも！」と閃いた瞬間から、あなたのTypeScriptスキルは確実にワンランクアップしています。

それでは、また次回のアーキテクチャ談議でお会いしましょう。あなたの快適なTypeScriptライフを応援しています！