TypeScriptの「型操作」は、魔法の小箱！Readonly, Pick, Omitでコードを整理しよう
こんにちは！TypeScriptの世界へようこそ。
「型定義ってなんだか難しそう…」「`string`とか`number`を書くだけで精一杯だよ」という声、よく聞きます。大丈夫です、最初はみんなそうですよ。
今日は、そんな皆さんが少しずつ型に慣れてきたところで、「型を自由自在に操る魔法の道具」をご紹介します。これを知ると、コードが劇的にスッキリして、「あ、TypeScriptって実は気が利く相棒なんだな」と思えるはずです。
—
1. 「お買い物リスト」でイメージしてみよう
まずは、私たちが普段使う「お買い物リスト」をTypeScriptで書いてみます。
type ShoppingList = {
item: string; // 買うもの
price: number; // 値段
isBought: boolean; // 買ったかどうか
};
この型は、とても便利ですよね。でも、開発が進むとこんな要望が出てきます。
- 「このリスト、途中で書き換えられちゃ困るよ！」
- 「名前だけが必要な場面もあるな…」
- 「買ったかどうかは今は知らなくていいや」
ここで登場するのが、Readonly, Pick, Omit という強力なサポーターたちです。
—
2. 絶対に書き換えさせない！「Readonly」
`Readonly`は、その名の通り「読み取り専用」にする魔法です。
例えば、大切な見積書や、一度決めたら変更してはいけない設定値などに使います。付箋を貼って「このデータにはペンを入れないでね！」と書き込むような感覚です。
// Readonlyを付けると、後から書き換えることができなくなります
type FixedList = Readonly
const myItem: FixedList = {
item: “高級コーヒー豆”,
price: 2000,
isBought: false
};
// myItem.price = 1000; // ← これをやろうとすると、TypeScriptが「ダメ！」と怒ってくれます
もし書き換えようとすると、エディタが赤線を引いて教えてくれます。「うっかりミス」を防ぐ、頼もしい門番ですね。
—
3. 必要なものだけ抜き取る！「Pick」
次は、お買い物リストの中から「名前だけ」「値段だけ」を抜き出したいとき。`Pick`（ピック）を使います。これは、棚から好きなアイテムだけを手に取るようなイメージです。
// ShoppingListの中から、itemとpriceだけを抜き出す
type ItemAndPrice = Pick
const product: ItemAndPrice = {
item: “ノートPC”,
price: 150000
// isBought: true // ← ここにisBoughtを書こうとすると「そんなの聞いてないよ」と怒られます
};
「あれもこれも」ではなく、「これだけ！」と指定できるので、関数にデータを渡すときなどに、「余計なデータが混ざらないようにする」という安全策になります。
—
4. いらないものを捨てる！「Omit」
最後は`Omit`（オミット）です。これは「〜を除外する」という意味。`Pick`が「必要なものを選ぶ」なら、`Omit`は「不要なものをゴミ箱に捨てる」イメージですね。
// ShoppingListから、isBoughtだけを捨てた新しい型を作る
type ItemWithoutStatus = Omit
const simpleItem: ItemWithoutStatus = {
item: “リンゴ”,
price: 150
};
「項目がたくさんある型だけど、この1つだけは使わないんだよな」という時に、わざわざ新しい型をゼロから書かなくてもいいんです。既存の型を再利用できるので、コードがとてもスマートになります。
—
まとめ：型は「守り」であり「武器」になる
今日紹介した3つのツールは、現場のエンジニアが毎日使っている「お守り」のようなものです。
- Readonly: 間違いを防ぐ門番
- Pick: 必要なものだけ選ぶ目利き
- Omit: 不要なものを除く断捨離
最初は難しく感じるかもしれませんが、全部一度に覚えなくて大丈夫。まずは「あ、これPickで抜き出せるかも？」とふと思い出すだけで、あなたのTypeScriptライフは確実にワンランク上のものになります。
型定義は、ただの制約ではありません。「自分やチームの未来の自分を守るための、優しいルール」なんです。
焦らず、少しずつ使いこなしてみてくださいね。応援しています！
コメント