カテゴリ: TypeScript 更新日: 2026/05/06

TypeScriptのExcludeとExtractを徹底解説!型を自由に操る方法

TypeScriptで`Exclude<T, U>`と`Extract<T, U>`の違いと使い方
TypeScriptで`Exclude<T, U>`と`Extract<T, U>`の違いと使い方

先生と生徒の会話形式で理解しよう

生徒

「TypeScriptを使っていると、たくさんの型の中から特定の型だけを取り出したり、逆に除外したりしたい場面があるのですが、どうすればいいですか?」

先生

「そんな時に便利なのが、ExcludeとExtractというユーティリティ型です。これらを使うと、複数の選択肢の中から必要なものだけを絞り込んだり、不要なものを取り除いたりできますよ。」

生徒

「難しそうですね。初心者でも使いこなせますか?」

先生

「大丈夫です!身近な例えを使いながら、基本的な仕組みから順番に解説していきますね。それでは、一緒に見ていきましょう!」

1. ユーティリティ型とは何ですか?

1. ユーティリティ型とは何ですか?
1. ユーティリティ型とは何ですか?

TypeScriptを学び始めると、ユーティリティ型という言葉を耳にすることが増えます。これは、すでにある型を元にして、新しい型を簡単に作り出すための「便利ツール」のようなものです。

例えば、果物の名前がたくさん入ったリストがあるとします。そのリストから「赤い果物だけを選びたい」とか「りんご以外を抜き出したい」といった操作をしたいときに、一つ一つ手作業で書き直すのは大変です。ユーティリティ型を使えば、コンピュータに指示を出すだけで、自動的に新しいリストを作ってくれるのです。

今回はその中でも、型を取り除くExclude(エクスクルード)と、型を抽出するExtract(エクストラクト)という二つの強力な味方について詳しく紹介します。これらを覚えると、プログラミングの効率が劇的に上がりますよ。

2. Excludeの使い方!特定の型を除外する

2. Excludeの使い方!特定の型を除外する
2. Excludeの使い方!特定の型を除外する

まずはExcludeから見ていきましょう。英語のExcludeには「除外する」や「締め出す」という意味があります。プログラミングにおいてもそのままで、「ある型の集まりから、指定した型だけを取り除く」という役割を持っています。

例えば、飲み物のメニューとして「コーヒー」「紅茶」「オレンジジュース」の三つがあるとします。この中から「カフェインが含まれるもの(コーヒーと紅茶)以外」を選びたい場合、Excludeを使ってオレンジジュースだけを残すことができます。

これをTypeScriptのコードで表現すると、以下のようになります。


type Drink = "coffee" | "tea" | "juice";

// "coffee" と "tea" を除外して、新しい型を作る
type CaffeineFree = Exclude<Drink, "coffee" | "tea">;

// 結果として、CaffeineFree は "juice" だけになります
let myDrink: CaffeineFree = "juice";

このように、最初のカッコの中に「元の型」を書き、二番目のカッコの中に「消したい型」を書くだけです。これだけで、不要なものを省いた新しい型が完成します。

3. Extractの使い方!共通する型を取り出す

3. Extractの使い方!共通する型を取り出す
3. Extractの使い方!共通する型を取り出す

次はExtractです。Extractは英語で「抽出する」や「抜き出す」という意味です。Excludeとは逆で、「ある型の集まりの中から、指定した型に一致するものだけを残す」という動きをします。

先ほどの飲み物の例で考えてみましょう。たくさんの飲み物がある中から、「お茶の仲間だけを抜き出したい」というときに便利です。複数の型を比較して、重なっている部分だけを救い出すイメージですね。

具体的なプログラムの書き方を確認してみましょう。


type Animals = "dog" | "cat" | "bird" | "fish";
type Pets = "dog" | "cat" | "hamster";

// Animals の中から、Pets にも含まれているものだけを抜き出す
type MyPets = Extract<Animals, Pets>;

// 結果として、MyPets は "dog" か "cat" になります
let pet: MyPets = "dog";

実行結果を確認すると、両方のグループに存在していた「犬(dog)」と「猫(cat)」だけが選ばれているのがわかります。共通点を見つけるのが得意なツールと言えますね。

4. ユニオン型という重要な概念

4. ユニオン型という重要な概念
4. ユニオン型という重要な概念

ここで少し用語の解説を挟みます。ExcludeやExtractを語る上で欠かせないのがユニオン型です。ユニオンとは「連合」や「結合」という意味で、TypeScriptでは「AまたはB」のように複数の候補を縦線(|)でつないだ型のことを指します。

パソコンの操作に慣れていない方向けに例えると、ランチのセットメニューで「パンかライスを選べます」という状態がユニオン型です。どちらが来ても間違いではありませんよね?

ExcludeやExtractは、この「選択肢のリスト(ユニオン型)」に対して、フィルタリングを行う作業をしているのです。リストから特定の項目を消したり、特定の項目だけを選んだりすることで、より厳密なプログラムを作ることができるようになります。

5. 条件付き型(Conditional Types)の仕組み

5. 条件付き型(Conditional Types)の仕組み
5. 条件付き型(Conditional Types)の仕組み

少し難しいお話になりますが、なぜExcludeやExtractがこのような動きをできるのか、その裏側の仕組みについて触れておきます。これらはMapped Types(マップドタイプス)やConditional Types(コンディショナルタイプス)という技術をベースにしています。

これは、コンピュータが「もし型Aが型Bに含まれるなら、型を消す。そうでなければそのまま残す」といった判断を自動で行っているからです。まるで魔法のように見えますが、実は一つ一つの型に対して「君は除外対象かな?」と順番にチェックを入れているのです。

初心者の方は、今の段階では「TypeScriptが裏側で一生懸命仕分け作業をしてくれているんだな」と理解しておくだけで十分です。自分で複雑な仕組みを作る必要はなく、用意された便利な道具を使いこなすことが上達への近道です。

6. 実践的な活用シーン!エラーを防ぐ工夫

6. 実践的な活用シーン!エラーを防ぐ工夫
6. 実践的な活用シーン!エラーを防ぐ工夫

実際の開発現場では、これらはどのように使われるのでしょうか?よくあるのは、関数の引数(渡すデータ)を制限したいときです。

例えば、Webサイトの背景色を「赤、青、緑、白、黒」から選べるとします。しかし、文字が見えなくなるのを防ぐために「白と黒」だけは使わせたくない、という場面があります。ここでExcludeが活躍します。


type AllColors = "red" | "blue" | "green" | "white" | "black";

// 白と黒を除外した、安全な色の型を作る
type SafeColors = Exclude<AllColors, "white" | "black">;

function setBackgroundColor(color: SafeColors) {
    console.log(color + "に背景を変更しました。");
}

// これはOK
setBackgroundColor("red");

// これはエラーになります(コンパイル時に間違いを教えてくれる)
// setBackgroundColor("white");

redに背景を変更しました。

このように、あらかじめ「ダメなもの」を取り除いておくことで、間違って白を指定して文字が見えなくなるといったミスを未然に防ぐことができます。これが型安全という、TypeScript最大のメリットです。

7. Extractを使って型を絞り込む高度なテクニック

7. Extractを使って型を絞り込む高度なテクニック
7. Extractを使って型を絞り込む高度なテクニック

Extractは、特定のパターンに一致する型だけを取り出すときにも非常に役立ちます。例えば、たくさんの設定項目がある中で、特定の名前で始まるものだけをまとめたいといった場合です。

プログラミングの世界では、型が複雑になりがちですが、Extractを使えば「この種類のデータだけを扱いたい」という意思表示をコードで明確に示せます。これは、他の人があなたのプログラムを読んだときに、「ああ、ここではこのデータだけが重要なんだな」と理解する助けになります。


type TaskStatus = "todo" | "doing" | "done" | "archived" | 1 | 0;

// 文字列(string)のものだけを抜き出す
type StringStatus = Extract<TaskStatus, string>;

// 数値(number)のものだけを抜き出す
type NumericStatus = Extract<TaskStatus, number>;

let currentStatus: StringStatus = "todo";
let statusCode: NumericStatus = 1;

このように、データの種類(型そのもの)を指定して抜き出すことも可能です。数字と文字が混ざったリストから、数字だけを抽出するといった操作がたった一行で書けるのは非常に便利ですね。

8. 似ている型操作との違いを整理しよう

8. 似ている型操作との違いを整理しよう
8. 似ている型操作との違いを整理しよう

TypeScriptには、他にも型を操作する方法があります。例えば、オブジェクトの特定のプロパティを取り除くOmit(オミット)や、特定のプロパティだけを選ぶPick(ピック)などです。

初心者が混乱しやすいポイントですが、使い分けのコツは「対象が何か」を見ることです。

  • Exclude / Extract:縦線(|)で区切られた「値の候補」を操作する。
  • Omit / Pick:波括弧({})で囲まれた「オブジェクトの項目」を操作する。

この違いを意識するだけで、どの道具を使えばいいか迷わなくなります。まずは「今の型は縦線でつながっているかな?」と確認する癖をつけましょう。もし縦線でつながっているリスト(ユニオン型)であれば、今回学んだExcludeとExtractの出番です。

9. 学習のポイントと次へのステップ

9. 学習のポイントと次へのステップ
9. 学習のポイントと次へのステップ

ここまで読んでいただき、ありがとうございます。型システムは一見難しく見えますが、パズルのピースを組み合わせるような楽しさがあります。最初から全てを完璧に理解しようとしなくても大丈夫です。実際にコードを書いてみて、エラーが出たり消えたりするのを経験しながら覚えていくのが一番の近道です。

もしパソコンの操作に自信がなくても、まずは「型をフィルタリングする便利な仕組みがあるんだな」と覚えているだけで、立派な一歩です。次は、これらの知識を活かして、より実践的なアプリケーションの開発に挑戦してみてください。TypeScriptの強力なサポートがあれば、バグの少ない素晴らしいプログラムが書けるようになるはずです。

カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptの配列から要素を削除する方法(pop, shift, spliceなど)完全ガイド
New2
JavaScript
JavaScriptで配列を作成する方法!リテラル表記とArrayコンストラクタを比較
New3
TypeScript
TypeScriptのUnion型とMapped Typesの活用法!初心者向け解説
New4
JavaScript
JavaScriptのデータ型の違いを表で比較しよう(一覧解説)
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.3
Java&Spring記事人気No3
TypeScript
TypeScriptの始め方:開発環境の構築手順【初心者向け】
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptでJSON操作の注意点を徹底解説!初心者でも安全に扱える方法
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptで関数の型を再利用!ParametersとReturnTypeの使い方を初心者向けに徹底解説
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptの配列の一部を切り出す(slice, spliceの使い方)
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptでJSONを文字列に変換する方法を初心者向けに解説!JSON.stringifyの使い方ガイド
No.8
Java&Spring記事人気No8
TypeScript
TypeScriptで使える基本の型一覧(string, number, booleanなど)