やあ。TypeScriptの世界へようこそ。
最初は「型？ 型定義？ なんだか窮屈だな」と感じるかもしれないね。でも大丈夫。TypeScriptは君のコードを守ってくれる、最高の相棒になるはずだよ。
今日は、TypeScriptの魔法の中でも特に実用的で、現場のエンジニアが毎日お世話になっている「typeof演算子」についてお話ししよう。
—
TypeScriptの「型」って、結局なんなの？
例え話をしよう。君がキッチンでお料理をする場面を想像してみてほしい。
小麦粉が入った瓶には「小麦粉」、お砂糖の瓶には「お砂糖」とラベルを貼るよね。もし中身が空っぽで、ラベルもなかったらどうなるだろう？ 間違えてお砂糖の代わりに塩を入れて、ケーキを台無しにしてしまうかもしれない。
TypeScriptの「型」は、まさにこの「ラベル貼り」なんだ。
「この変数には数字しか入れないよ！」「これは文字列専用だよ！」と宣言しておくことで、プログラムが実行される前に、「おっと、それ入れるとエラーになるよ！」と教えてくれる。これがTypeScriptの最大の強みなんだ。
—
typeof演算子：値から「ラベル」を逆算する魔法
さて、ここからが本題だ。普通、型定義は自分で書くものだけど、「すでにあるデータから、型を勝手に読み取ってほしい」と思うことはないかな？
例えば、お買い物リストを作ったとしよう。
// 買い物リストのデータ（値）
const shoppingList = {
item: “りんご”,
price: 200,
isDiscount: false
};
このデータを見て、「ああ、`item`は文字列で、`price`は数字で、`isDiscount`は真偽値（boolean）だね」と、わざわざ自分で型を書き直すのは少し面倒だよね。
そこで登場するのが、`typeof`演算子だ。
// typeof を使うと、値から型を「抽出」できる
// つまり、「shoppingListという値の形を、型として保存してね」という命令だ
type ShoppingItem = typeof shoppingList;
/
裏側では、以下のように解釈されているのと同じ状態になる！
type ShoppingItem = {
item: string;
price: number;
isDiscount: boolean;
}
/
なぜこれを使うと嬉しいのか？
君が現場の最前線に出ると、データはどんどん更新される。もし`shoppingList`に後から「個数」という項目が追加されたらどうなる？
- 手動で型を書いている場合： 型定義も書き直さないとエラーになる（忘れがちで怖い！）
- typeofを使っている場合： 値を書き換えるだけで、型も自動的に追従してくれる！
「あ！型を直すの忘れてた！」という、現場でよくある悲劇を未然に防げるんだ。これぞ、賢いエンジニアの生存戦略というわけさ。
—
初学者がつまずきやすい「落とし穴」
ここで一つだけ、注意してほしいことがあるんだ。
`typeof`は「値（実行時に存在するデータ）」から型を作るものだということ。
例えば、HTMLの``タグから値を取得したり、APIからデータを受け取ったりするときに大活躍するけれど、「まだ存在しないもの」に対しては使えない。
// ダメな例：変数定義の前に使おうとしても、TypeScriptは困ってしまう
// type MyType = typeof unknownVariable; // エラー！「まだ何者か分からないもの」からは抽出できない
最初は、「値が先、型は後！」という順番だけ覚えておけば大丈夫。焦る必要はないよ。
—
現場のチーフアーキテクトからのアドバイス
「型定義を完璧に書かなきゃ！」と気負いすぎないでほしい。
最初は`any`（なんでもあり）を使ってしまってもいい。徐々に`typeof`のような道具を使って、少しずつ「ラベル」を貼る範囲を広げていけばいいんだ。
TypeScriptは、君を縛るための鎖じゃない。君が書いたコードの品質を担保し、将来の自分を助けるための「最強の保険」なんだから。
もしエラーが出ても、それはTypeScriptが「ここ、ちょっと怪しいよ！気をつけよう！」と優しく声をかけてくれている証拠。そう思えば、真っ赤なエラーメッセージも、少しだけ頼もしく見えてくるはずだよ。
今日学んだ`typeof`、ぜひ明日のコードで試してみて。君のコーディングが、もっと楽に、もっと楽しくなることを願っているよ！
コメント