やあ。TypeScriptの世界へようこそ。
「型定義」なんて言葉を聞くと、なんだか数学の授業みたいで身構えてしまうかもしれないね。でも大丈夫。TypeScriptの「Mapped Types（マップド型）」は、実は「魔法のコピー機」みたいなものなんだ。
今日は、この魔法を使って、君が書いたコードを劇的にスマートにする方法を、一緒に紐解いていこう。
—
そもそも「Mapped Types」って何者？
例えば、君がオンラインショップの「商品データ」を作っているとしよう。
type Product = {
name: string;
price: number;
stock: number;
};
これだけで十分便利だよね。でも、開発が進むとこんな要望が出てくるはずだ。
「商品情報を更新する時、全部の項目を入力しなくてもいいようにしたい（任意項目にしたい）」とか、「読み取り専用（readonly）にしたい」とか。
普通に書くと、いちいち新しく型を書かなきゃいけない。
`type OptionalProduct = { name?: string; price?: number; … }` ……あぁ、面倒くさい！
ここで登場するのが Mapped Types。「既存の型をベースに、ルールをひとつ決めるだけで、全項目を一括変換する」という、まさに魔法のコピー機なんだ。
—
魔法のコピー機を動かしてみよう
Mapped Typesの基本形は、こんな形をしているよ。
type NewType = {
[Key in keyof OldType]: OldType[Key];
};
呪文みたいに見える？ 大丈夫、分解すれば簡単さ。
1. `keyof OldType`: 「元の型にある項目（name, price, stock）を全部リストアップして！」
2. `Key in …`: 「そのリストを一つずつ取り出して、Keyと呼ぼう」
3. `[Key]`: 「一つずつ、この新しい型に貼り付けていくよ」
これだけだとただのコピーだけど、ここに少し「味付け」をするのが、プロの技なんだ。
1. 全項目を「任意（Optional）」にする魔法
「入力は自由でいいよ」という時は、`?` を付けるだけ。
// 既存の型をベースに、全項目を「あってもなくてもいい（?）」に変更する魔法
type PartialProduct = {
[Key in keyof Product]?: Product[Key];
};
// これで { name?: string; price?: number; stock?: number; } と書いたのと同じ効果！
2. 全項目を「読み取り専用（readonly）」にする魔法
「大事なデータだから、後から書き換えさせたくない！」という時は、`readonly` を付ける。
// 商品データを「閲覧専用」にする魔法
type ReadonlyProduct = {
readonly [Key in keyof Product]: Product[Key];
};
—
少しだけ応用：キーの名前を変えてみる（再マッピング）
これができれば君ももう中級者だ。
「APIから来たデータは `user_name` だけど、アプリ内では `userName` って呼びたいな…」なんて時、いちいち手動で直すのはやめよう。`as` というキーワードを使うんだ。
type User = {
user_name: string;
user_age: number;
};
// 名前を加工して、新しいキーを作る魔法
type CamelCaseUser = {
[Key in keyof User as `camel${Capitalize
};
// 結果： { camelUser_name: string; camelUser_age: number; } のような型ができる！
「なんだか複雑に見える」と思ったかな？ でもね、これは「データという名の荷物を、別の箱に詰め替える」作業をしているだけなんだ。最初は分からなくて当然。何度もエディタで書いて、エラーと仲良くなるうちに、必ず指が勝手に覚えるようになるよ。
—
現場のチーフアーキテクトからのアドバイス
君がもし「型定義を書くのが面倒だな」と感じ始めたら、それは成長の証だ。TypeScriptが面倒だと感じるのは、君が「もっと楽に、もっと安全に書く方法はないか？」と頭を使い始めている証拠だからね。
今日覚えて帰ってほしいポイント：
- Mapped Typesは「自動変換ルール」を作るもの。
- `[Key in keyof Type]` は「全部の項目をループするよ」という合図。
- `?` や `readonly` を添えるだけで、型は劇的に便利になる。
最初から完璧を目指さなくていい。「この型、あとで使うかもしれないから、今の型をベースに少しだけ加工しておこうかな」といった軽い気持ちで、まずは `Partial` や `Readonly` といった標準的なMapped Typesから触ってみてほしい。
TypeScriptは、君の「うっかりミス」を未然に防いでくれる最強のパートナーだ。そのパートナーと一緒に、明日のコードをもっと楽しく、もっと美しく書いていこう。
分からないことがあれば、いつでもまた聞いてくれ。応援しているよ。
コメント