やあ、ようこそ。TypeScriptの世界へ。
私は長年、数えきれないほどのプロジェクトでコードの荒波に揉まれてきたチーフアーキテクトです。
今日は、TypeScriptを学び始めたばかりのあなたが、おそらく一番最初に「おっ、これは魔法みたいだ！」と感動するであろう、`typeof` 演算子による型抽出についてお話ししましょう。
「型を定義する」というと、なんだか几帳面にノートの線を引くような、ちょっと堅苦しい作業に感じるかもしれません。でも、この `typeof` をマスターすれば、もっと自由で、もっと「楽」ができるようになりますよ。
肩の力を抜いて、温かいコーヒーでも飲みながら読んでみてください。
—
1. そもそも「型」って、いちいち書かなきゃダメなの？
プログラミングをしていると、例えば「設定値（設定ファイル）」のようなものを作ることがよくあります。
// Webサイトのテーマカラーを決める「設定値」
const themeColor = {
primary: “#3498db”,
secondary: “#2ecc71”,
background: “#f5f5f5”,
text: “#333333”
};
これに対して型を付けようと思うと、普通はこう書きますよね。
type Theme = {
primary: string;
secondary: string;
background: string;
text: string;
};
const themeColor: Theme = { … };
でも、ちょっと待ってください。「値（中身）」はもう目の前にあるのに、なんでまた同じような「型」を手書きしなきゃいけないんだ？ って思いませんか？ 私は思います（笑）。
現場の泥臭い話をすると、開発が進むにつれて「あ、やっぱり `border` の色も追加したいな」なんてことは日常茶飯事です。そのたびに「値」を書き換え、「型」も書き換える……。これは面倒ですし、いつか必ずどちらかを忘れてエラーの原因になります。
ここで登場するのが、魔法の杖 `typeof` です。
—
2. `typeof` は「現物から型をコピーする」スタンプ
TypeScriptの `typeof` 演算子は、一言で言うと「すでにある実物（値）をチラッと見て、その形をそのまま型として抜き出す」という機能です。
お買い物の例えで考えてみましょう。
あなたは、お気に入りの「マグカップ」と同じサイズのケースが欲しいとします。わざわざ定規でミリ単位のサイズを測って（＝型を手書きして）注文するのは大変ですよね。
それよりも、「このマグカップと同じサイズのやつをください！」と現物を指差すほうがずっと簡単です。それが `typeof` なんです。
さっそくコードを見てみましょう。
// 1. まずは「実物（値）」を作る
const pointCard = {
id: “888-1234”,
points: 1500,
isPremium: true
};
// 2. 「この実物と同じ型」を typeof で一瞬で作る！
type Card = typeof pointCard;
/
これで、変数 Card の中身は自動的にこうなります：
{
id: string;
points: number;
isPremium: boolean;
}
/
// 3. 安心して新しいデータを作れる
const myNewCard: Card = {
id: “999-5678”,
points: 0,
isPremium: false
};
どうですか？ 自分で `string` だの `number` だのと書かなくても、TypeScriptが「はいはい、`pointCard` をマネすればいいんですね、了解！」と、背後で自動的に型を組み立ててくれたんです。
—
3. なぜこれが「現場」で喜ばれるのか？
「単にサボれるだけじゃないの？」と思うかもしれませんが、実はこれが「堅牢なコード」に繋がります。
例えば、あなたが大規模なECサイトを作っていて、商品カテゴリーのリストがあるとしましょう。
// 現場でよくある「カテゴリーリスト」
const CATEGORIES = [“Electronics”, “Books”, “Fashion”, “Home”];
// このリストの中身だけを「型」として使いたい！
// そんな時も typeof と、ちょこっとしたテクニックで解決
type Category = (typeof CATEGORIES)[number];
// ↑これで “Electronics” | “Books” | “Fashion” | “Home” という型になる
もし明日、上司から「新しく『Food』カテゴリーを追加してくれ」と言われたら？
あなたは `CATEGORIES` 配列に `”Food”` を追加するだけ。型定義の方は、`typeof` が勝手に追随してくれるので、修正漏れが起きません。
「一箇所直せば、全部に反映される」。これこそが、私たちエンジニアが愛してやまない「DRY（Don’t Repeat Yourself：繰り返すな）」の精神です。
—
4. つまずきポイント：JavaScriptの `typeof` とは何が違うの？
ここ、初心者の皆さんが一番「えっ？」となるポイントです。実は、JavaScript（実行時）にも `typeof` という言葉が存在します。
- JavaScriptの `typeof`:
プログラムが動いている最中に、「これは数字かな？ 文字かな？」と調べるためのもの。結果は `”string”` や `”object”` という「文字列」で返ってきます。
- TypeScriptの `typeof`:
コードを書いている最中に、エディタ上で「この変数の型を抽出して！」とお願いするもの。結果は「TypeScriptの型」として返ってきます。
見分け方は簡単。「型の定義（`type` や `interface` の右側など）」で使っていれば、それはTypeScriptの魔法です。
const message = “Hello!”;
// これは JavaScript の typeof（値としての判定）
const result = typeof message;
console.log(result); // “string” と表示される
// これは TypeScript の typeof（型としての抽出）
type MessageType = typeof message;
// MessageType は「string型」になる
最初はこんがらがるかもしれませんが、「型を書きたい場所で使えば、型を連れてきてくれるんだな」くらいの理解で大丈夫ですよ。
—
5. 最後に：完璧主義を捨てて、楽しもう
TypeScriptを始めたばかりの頃は、「すべての型を完璧に、美しく定義しなきゃ……」と自分を追い込んでしまいがちです。でも、実務の現場では、この `typeof` のように「今あるものから賢く型を盗む」という柔軟な考え方がとても大切になります。
まずは、身近なオブジェクトや配列に `typeof` を使ってみて、VSCodeでマウスをホバー（上に置く）してみてください。TypeScriptがあなたの代わりに一生懸命、型を導き出してくれる様子が見えるはずです。
「あ、TypeScriptが自分の意図を分かってくれた！」
その瞬間の喜びが、あなたを最高のエンジニアへと成長させてくれます。
大丈夫、一歩ずつ進んでいきましょう。もし分からなくなったら、いつでもこの場所に戻ってきてくださいね。応援していますよ！
コメント