<h2 id="hd09d460442"><strong>ユーティリティ型</strong>（Utility Types）</h2><p>既存の型を元にして 新しい型を簡単に作るための便利な仕組み のこと。</p><p>たとえば「全てのプロパティを任意（オプショナル）にした型が欲しい」といったときに、自分で一つ一つ書き直さずに、ユーティリティ型を使えば一発で定義できるようになる。</p><h3 id="h21efbacd6a">📄 Required&lt;T&gt;</h3><p>目的: すべてのプロパティを「必須」に変える。</p><pre><code class="language-typescript">type User = { name?: string; age?: number };
type AllRequired = Required&lt;User&gt;;

// → { name: string; age: number }　?のオプショナルな型が消えて、「必須」になる。</code></pre><p>Required&lt;T&gt; を使うことで、if 文などで「あるかどうか？」のチェックをしなくてよくなるのが大きな利点。</p><hr><h3 id="hc7cc1a8e19">📄 Readonly&lt;T&gt;</h3><p>目的: すべてのプロパティを「読み取り専用（変更不可）」にする。</p><pre><code class="language-typescript">type User = { name: string };
const user: Readonly&lt;User&gt; = { name: &quot;Ari&quot; };

user.name = &quot;Taro&quot;; // → ×エラー：読み取り専用</code></pre><hr><h3 id="h4453a0b105">📄 Partial&lt;T&gt;</h3><p>目的: すべてのプロパティを「オプショナル」にする。</p><pre><code class="language-typescript">type User = { name: string; age: number };
type PartialUser = Partial&lt;User&gt;;

// → { name?: string; age?: number }</code></pre><hr><h3 id="h03d210832c">📄 Record&lt;Keys, Type&gt;</h3><p>目的: 指定したキーと型からオブジェクトを作る。</p><pre><code class="language-typescript">type Roles = &quot;admin&quot; | &quot;user&quot;;
type RoleConfig = Record&lt;Roles, boolean&gt;;

// → { admin: boolean; user: boolean }</code></pre><hr><h3 id="h58e93b792e">📄 Pick&lt;T, Keys&gt;</h3><p>目的: 特定のプロパティ「だけ」を抜き出した型を作る。</p><pre><code class="language-typescript">type User = { id: number; name: string; age: number };
type Picked = Pick&lt;User, &quot;id&quot; | &quot;name&quot;&gt;;

// → { id: number; name: string }</code></pre><hr><h3 id="h2f3784feb5">📄 Omit&lt;T, Keys&gt;</h3><p>目的: 特定のプロパティを「除いた」型を作る。</p><pre><code class="language-typescript">type User = { name: string; age: number };
type PartialUser = Omit&lt;User, &quot;age&quot;&gt;;

// → { id: number; name: string }
</code></pre><hr><h3 id="hca3d73c32e">📄 Exclude&lt;T, U&gt;</h3><p>目的: ユニオン型Tから、Uに一致する型を「除く」。</p><pre><code class="language-typescript">type Role = &quot;admin&quot; | &quot;user&quot; | &quot;guest&quot;;
type Limited = Exclude&lt;Role, &quot;guest&quot;&gt;;

// → &quot;admin&quot; | &quot;user&quot;</code></pre><hr><h3 id="ha041fde1fa">📄 Extract&lt;T, U&gt;</h3><p>目的: ユニオン型Tから、Uに一致する型「だけ」を取り出す。</p><pre><code class="language-typescript">type Role = &quot;admin&quot; | &quot;user&quot; | &quot;guest&quot;;
type OnlyGuest = Extract&lt;Role, &quot;guest&quot;&gt;;

// → &quot;guest&quot;</code></pre><hr><h3 id="hd250f720f9">📄 NoInfer&lt;T&gt;</h3><p>目的: ジェネリック型で「型推論を防ぐ」ためのテクニック。</p><pre><code class="language-typescript">function useValue&lt;T, U extends T&gt;(value: T, defaultValue: NoInfer&lt;U&gt;) {
  return value !== undefined ? value : defaultValue;

}</code></pre><p>使い所がやや特殊で、「型推論でUが勝手にTに引っ張られないようにする」用途。</p><hr><h3 id="haa047d3710">📄 NonNullable&lt;T&gt;</h3><p>目的: null と undefined を除いた型を作る。</p><pre><code class="language-typescript">type Name = string | null | undefined;
type SafeName = NonNullable&lt;Name&gt;;

// → string</code></pre><p></p><h2 id="h377411643b">🔧 TypeScriptのユーティリティ型は、「型に対して使えるメソッドのようなもの」</h2><p></p><h3 id="h4053a908f9">例：JavaScriptで値を操作するとき</h3><pre><code class="language-javascript">const user = { name: &quot;Ari&quot;, age: 30 };

const { name } = user; // nameだけ取り出す</code></pre><h3 id="h1b20605af3">例：TypeScriptでは同じように、型に対してこういう操作ができる</h3><pre><code class="language-typescript">type User = { name: string; age: number };

type Picked = Pick&lt;User, &quot;name&quot;&gt;; // 型からnameだけを取り出す</code></pre><p>JavaScriptでは値を操作し、<br>TypeScriptでは型を操作するという違いがある。</p>

TypeScript基礎のユーティリティ型のざっくりまとめ。

TypeScript基礎｜ユーティリティ型（Utility Types）ざっくりまとめ

<h2 id="h5beec4175d">TypeScriptとは？</h2><p>TypeScriptは、JavaScriptに静的型付けの仕組みを加えた上位互換の言語。<br>書いたコードはJavaScriptにトランスパイルされ、あらゆる環境で実行できる。</p><p>プロジェクトが大規模になっても、保守・運用が破綻せずに成長を続けられる状態(スケーラブル)で開発が可能。<br>TypeScriptはこの「スケーラビリティ」に非常に強い。</p><h2 id="h93badda7fe">📝<strong>基本的な型と静的型付け</strong></h2><ul><li><code>number</code>, <code>string</code>, <code>boolean</code>, <code>null</code>, <code>undefined</code>, <code>any</code>, <code>unknown</code></li><li>関数の型注釈（引数・戻り値）</li><li>静的型付けのメリット（型安全、バグ防止）</li></ul><pre><code class="language-typescript">function sum(a: number, b: number): number {
  return a + b;
}</code></pre><p>a: number, b: number → どちらも数値型<br>: number → 戻り値の型指定</p><hr><h2 id="hd295a2e003"><strong>型エイリアス（</strong><code>type</code><strong>）</strong></h2><p>型に名前をつけるための構文。オブジェクト型だけでなく、ユニオン型などあらゆる型を定義できる。</p><pre><code class="language-typescript">type User = {
  name: string;
  age: number;
};</code></pre><hr><h2 id="hbc20342828"><strong> インデックスアクセス型（indexed access types）</strong></h2><p>オブジェクト型の中から、特定のプロパティの型を取り出すための書き方。</p><pre><code class="language-typescript">type User = {
  name: string;
  age: number;
};

type NameType = User[&quot;name&quot;]; // string
type AgeType = User[&quot;age&quot;];   // number</code></pre><p>User[&quot;name&quot;] で、User 型の中の &quot;name&quot; の型（string）を取り出している。これが インデックスアクセス型。</p><h3 id="hbc84694574">🔸ユニオンで複数のキーを指定する</h3><pre><code class="language-typescript">type User = {
  name: string;
  age: number;
  active: boolean;
};

type NameOrAge = User[&quot;name&quot; | &quot;age&quot;]; 
// → string | number</code></pre><p>&quot;name&quot; | &quot;age&quot; という複数のキーを指定すると、それぞれの型をまとめたユニオン型になる。</p><h3 id="hee34f447f3">🔸keyofと組み合わせる</h3><pre><code class="language-typescript">type User = {
  name: string;
  age: number;
};

type UserKeys = keyof User; // &quot;name&quot; | &quot;age&quot;
type AllValues = User[UserKeys]; // string | number</code></pre><p>keyof User　＞　&quot;name&quot; | &quot;age&quot;。<br>User[UserKeys] は User[&quot;name&quot;] | User[&quot;age&quot;] と同じ　＞　string | number。</p><hr><h2 id="h76fc8b7ee9"><strong>ジェネリクス (Generics)</strong></h2><p><strong>「あとで決める型」</strong></p><p>関数やクラス、型に対して「汎用的な型」を与え、使うときに具体的な型を指定できるようにする。</p><p>ジェネリクスを使うと、柔軟さと型安全性の両立ができる。</p><h3 id="hb456612a7b"><strong>🔸 例：普通の関数（型を固定）</strong></h3><p>これは「文字列しか受け取れない」関数。他の型では使えない。</p><pre><code class="language-typescript">function echoString(arg: string): string {
  return arg;
}</code></pre><h3 id="h9c22b60ef7"><strong>🔸 例：型をanyすると柔軟に受け取れる</strong></h3><pre><code class="language-typescript">function echoAny(arg: any): any {
  return arg;
}</code></pre><p>🌀<u>けれど・・・anyは柔軟だけど、型の安全性が失われる。</u><br>下記のコードでは、通常数値に対してtoUpperCase()は実行するとエラーになるが、下記のように間違った使い方をしてもコンパイルエラーにならない。</p><pre><code class="language-typescript">const result = echoAny(123); // 結果は any 型。型補完が効かない
result.toUpperCase(); // 型チェックされていない</code></pre><h3 id="h7c1eeeb901"><strong>🔸 Generics を使った安全な関数</strong></h3><pre><code class="language-typescript">function echo&lt;T&gt;(arg: T): T {
  return arg;
}</code></pre><p>T は 「あとで決める型」。実際に呼び出すときに TypeScript が型を推論してくれる。</p><pre><code class="language-typescript">const result1 = echo(&quot;hello&quot;);  // T は stringと推論される
const result2 = echo(123);      // T は numberと推論される</code></pre><p>そして型が保持される✅</p><pre><code class="language-typescript">const result = echo(123); // T は number
result.toFixed(); // OK 
result.toUpperCase(); // エラー</code></pre><p>上記は、変数resultに関数echoの戻り値を渡している。関数echoには引数にnumber型の123を渡す。<br>変数resultに入るのはnumberと推論される。<br>そのため、resultにtoUpperCase()を適応しようとすると、toUpperCase()はstring にしか存在しないメソッドなので、number 型ではコンパイルエラーになる。</p><hr><h2 id="h8fa483bd42"><strong>ユニオン型(union type)</strong></h2><p>複数の型のうち、どれか一つをとる という型。<br>「この変数はA型またはB型になる可能性がある」と表現したいときに使う。</p><p>|（パイプ）を使って書く。<br>例：初期値がnullの変数を処理する場合、ユニオン型を使うことが可能。</p><pre><code class="language-typescript">let value: string | number;

value = &quot;Hello&quot;; // OK（string）
value = 123;     // OK（number）
value = true;    // エラー（booleanは許可されていない）</code></pre><hr><h2 id="h04d358b058">タプル型 (Tuple)</h2><p>複数の値を決まった順番・型でまとめて扱う型。配列に似ているけど、それぞれの要素の型と順番が固定されている。<br>そのため、配列より厳密に「型の順番」を決めることができ、関数の戻り値や複数の値を返すときに便利。</p><p>例：[string, number] は「1番目が文字列、2番目が数字」という意味。</p><pre><code class="language-typescript">const user: [string, number] = [&quot;Yamada&quot;, 28];</code></pre><ul><li><code>user[0]</code> は必ず文字列（名前）</li><li><code>user[1]</code> は必ず数字（年齢）</li></ul><hr><h2 id="hede8ba0729">Mapped Types（マップ型）</h2><p>既存の型を使って新しい型を動的に生成する。</p><pre><code class="language-typescript">type MyMappedType&lt;T&gt; = {
[P in keyof T]: T[P];
};</code></pre><p>T：元になる型（例: オブジェクトの型）</p><p>P in keyof T：Tのキーすべてを1つずつ取り出して、それに対して処理を行う。（例: &quot;name&quot; | &quot;age&quot;）</p><p>T[P]：そのキーの型</p><h3 id="hbc54df825f">🔸 例1｜基本</h3><pre><code class="language-typescript">type User = {
  name: string;
  age: number;
};

type CopiedUser = {
  [K in keyof User]: User[K];
};
// 結果:
// type CopiedUser = {
//   name: string;
//   age: number;
// }</code></pre><p>User 型はプロパティ name（string）と age（number）を持つことを意味している。<br>CopiedUserのkeyof Userでは、User 型のキー（プロパティ名）だけを取り出したユニオン型を返す。（keyof User // → &quot;name&quot; | &quot;age&quot;）。</p><p>[K in keyof User]: User[K] の部分がMapped Typeの本体。<br>[K in keyof User]: K を &quot;name&quot; と &quot;age&quot; の2つでループする。User[K]: K が &quot;name&quot; のときは string、&quot;age&quot; のときは number。</p><p>自動的に次のような型が生成される。</p><pre><code class="language-typescript">type CopiedUser = {
  name: string; // ← K = &quot;name&quot;, User[K] = User[&quot;name&quot;] = string
  age: number;  // ← K = &quot;age&quot;,  User[K] = User[&quot;age&quot;] = number
}</code></pre><p>＝ 元のUser型を丸ごとコピーしている。</p><p>上記の書き方で、値の型を変えたり（User[K] → boolean など）、オプショナルにしたり（[K in keyof T]?: ...）、readonly を付けたり、柔軟に型を加工することができる。</p><hr><h2 id="h2887b3703e"><strong>条件型（Conditional Types）</strong></h2><p>条件型（Conditional Types）は、型に対して「もし〇〇なら、⬜︎⬜︎する、そうでなければ△△」という条件分岐を行う。<br>JavaScriptの三項演算子（条件 ? 真 : 偽）に似た構文で書く。</p><pre><code class="language-typescript">T extends U ? X : Y</code></pre><p>T extends U：　＞　T が U に代入できる（互換性がある）なら…<br>? X：　＞　そのときの型は X<br>: Y：　＞そうでなければ Y</p><h3 id="h1604c7c52a"><strong>🔸 例：条件型 の基本</strong></h3><pre><code class="language-typescript">type Response&lt;T&gt; = T extends Error ? &quot;ErrorType&quot; : &quot;SuccessType&quot;;

type R1 = Response&lt;Error&gt;;       // &quot;ErrorType&quot;
type R2 = Response&lt;string&gt;;      // &quot;SuccessType&quot;</code></pre><p>T が Error 型であれば &quot;ErrorType&quot;、そうでなければ &quot;SuccessType&quot;となる。<br>T extends Error　＞　条件式（T は Error 型に代入可能か？）<br>? &quot;ErrorType&quot;　＞　条件が true の場合の型<br>: &quot;SuccessType&quot;　＞　条件が false の場合の型</p><h3 id="h129880677c">🔸 分配的条件型（Distributive Conditional Types）</h3><p>条件型をユニオン型に使うと、各要素に分解されて評価される（分配的条件型）という特徴がある。</p><pre><code class="language-typescript">type Check&lt;T&gt; = T extends string ? &quot;String&quot; : &quot;Other&quot;;

type A = Check&lt;&quot;hello&quot; | 123&gt;; 
// 実際の型 → &quot;String&quot; | &quot;Other&quot;</code></pre><p>上記のように、TypeScriptは条件型を各ユニオンメンバーに対して個別に適用し、結果を再びユニオン型としてまとめる。</p><h3 id="h57b566f913">🔸 条件型の応用例｜Exclude 型（ある型を除外する）</h3><p>下記コードの目的は、T から U に含まれる型だけを取り除くこと。<br>つまり、「Tの中でUと一致するものを除外」する。→ （ユーティリティ型のExclude）</p><pre><code class="language-javascript">type MyExclude&lt;T, U&gt; = T extends U ? never : T;

type A = MyExclude&lt;&quot;a&quot; | &quot;b&quot; | &quot;c&quot;, &quot;a&quot; | &quot;c&quot;&gt;;  // &quot;b&quot;</code></pre><p> Tの中の&quot;a&quot; は Uの中の&quot;a&quot; | &quot;c&quot; に含まれる　＞　除外　＞　never<br> Tの中の&quot;b&quot; はUに含まれない　＞　残る<br> Tの中の&quot;c&quot; はUに含まれる　＞　除外　＞　never</p><p>最終的に残るのは&quot;b&quot;のみとなる。</p><hr><h2 id="hb73438ea8b">keyof演算子</h2><p>オブジェクト型のプロパティ名をユニオン型として取り出すために使われる。</p><pre><code class="language-typescript">type Person = {
  name: string;
  age: number;
};

type PersonKeys = keyof Person;  // &quot;name&quot; | &quot;age&quot;</code></pre><p>keyof Person はPerson型 のキー（プロパティ名）を &quot;name&quot; | &quot;age&quot; のようなユニオン型として返す。</p><h3 id="hf37698bd67">🔸 よくある用途｜ジェネリック＋keyof の組み合わせ</h3><pre><code class="language-typescript">function getProperty&lt;T, K extends keyof T&gt;(obj: T, key: K): T[K] {
  return obj[key];
}

const p = { name: &quot;Yamada&quot;, age: 30 };

getProperty(p, &quot;name&quot;); // OK, &quot;Yamada&quot;
getProperty(p, &quot;age&quot;);  // OK, 30
getProperty(p, &quot;email&quot;); //  エラー（存在しないプロパティ）</code></pre><p>getProperty(p, &quot;name&quot;)を実行すると、getProperty&lt;T, K extends keyof T&gt;の T は { name: string; age: number } に推論される。<br>K extends keyof T で「Tのキー（プロパティ名）のどれかだけ許可」という制約をかける。<br>この場合、K は &quot;name&quot; （string型）または &quot;age&quot;（number型） のどれかに限る。K はこのどれか1つしか取れない。<br><br>(obj: T, key: K)の部分は型注釈。objは T 型。プロパティを持つオブジェクトの型。（nameというstringのプロパティと、ageというnumberのプロパティを持つオブジェクト。）key: K の部分は渡された &quot;name&quot;（プロパティ名）となる。</p><p>return obj[key]; ＝obj: T, key: k ＝ p[&quot;name&quot;] ＞  &quot;Yamada&quot;、型は T[K] = string となる。</p><h3 id="h41dd95a485">🔸 よくある用途｜Mapped Typesの組み合わせ</h3><pre><code class="language-typescript">type ReadOnly&lt;T&gt; = {
  readonly [K in keyof T]: T[K];
};

type Person = { name: string; age: number };
type ReadonlyPerson = ReadOnly&lt;Person&gt;;</code></pre><p>ReadOnly&lt;T&gt; はT にオブジェクト型を渡すと、それを読み取り専用に変換する。<br>[K in keyof T]は渡されたオブジェクトの キー（ &quot;name&quot; や &quot;age&quot;）を K という名前でループして処理する。</p><p>readonly [K in keyof T]: T[K]　＞　各プロパティ K に対して、型 T[K]（元の型）を使って、それに readonly 修飾子を付ける。</p><p>結果</p><pre><code class="language-typescript">type ReadonlyPerson = {
  readonly name: string;
  readonly age: number;
};</code></pre><hr><h2 id="h42c03096ef">typeof型演算子</h2><p>ある変数や値から、その“型”を取り出すために使う。</p><pre><code class="language-typescript">const user = {
  name: &quot;Yamada&quot;,
  age: 30
};

type User = typeof user;</code></pre><p><code>user</code> はオブジェクトで、型は <code>{ name: string; age: number }</code>。typeof user によって その型情報を取得して User に代入できる。</p><p>結果</p><pre><code class="language-typescript">type User = {
  name: string;
  age: number;
};</code></pre><h3 id="h3c374432b3">🔸 よくある用途｜変数から型を抽出</h3><pre><code class="language-typescript">const config = {
  host: &quot;localhost&quot;,
  port: 8080
};

type Config = typeof config;

// Config の型は { host: string; port: number }</code></pre><p>💡ReturnType などのユーティリティ型と一緒に使うことが多い。</p><hr><h2 id="h5ed6e76943"> クラス（<code>class</code>）</h2><p>実際のオブジェクトを作る「設計図＋処理」の両方を持つもの。</p><p><u>具体的な役割</u></p><ul><li>オブジェクトの状態（プロパティ）を持つ</li><li>オブジェクトの動作（メソッド）を持つ</li><li>コンストラクタで初期化ができる</li><li>何度も似た構造のオブジェクト（インスタンス）を作れる</li></ul><pre><code class="language-typescript">class Person {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const p = new Person(&quot;Yamada&quot;);
p.greet(); // Hello, my name is Yamada</code></pre><p>クラスはそのままでは使用できない。new＋Class名でインスタンス化して使用する。<br>constructorはクラスからオブジェクト（インスタンス）を作るときに最初に呼ばれる特別なメソッド。</p><p>インスタンスの初期化処理を書く場所で、例えばプロパティに値をセットしたり、初期状態を設定したりできる。</p><p>new Person(&quot;Yamada&quot;)でインスタンスを作るときに、<code>constructor</code> に渡した &quot;Yamada&quot; が引数として入り、<code>this.name</code>に代入されてインスタンスの状態が初期化される。</p><hr><h2 id="h066c15e817"> インターフェース（<code>interface</code>）</h2><p>主にオブジェクトの構造を定義するために使う。「型の契約」。<br>どんなプロパティやメソッドを持つかだけ決めて、具体的な処理は書きません。</p><pre><code class="language-typescript">interface Person {
  name: string;
  age: number;
  greet(): void;
}</code></pre><hr><h2 id="h3d415c61d9">implements（インプリメンツ）</h2><p>クラスが interfaceの設計に従うことを明示的に宣言するキーワード。<br>クラスはそのinterfaceで決められたプロパティやメソッドを必ず実装しなければならない。</p><pre><code class="language-typescript">interface Person {
  name: string;
  age: number;
  greet(): void;
}

class User implements Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, I&apos;m ${this.name}`);
  }
}</code></pre><p>User クラスは Person インターフェースの形に従うので、name と age プロパティ、greet メソッドを必ず持つ。<br>もし何かが足りないとコンパイルエラーになる。</p><p></p><p>上記を使用するには…</p><pre><code class="language-typescript">// インスタンス化
const user = new User(&quot;Yamada&quot;,30);

console.log(user.age); // 30
user.greet(); // Hello, I&apos;m Yamada</code></pre><p>new User(&quot;Yamada&quot;,30) で User クラスのインスタンスを作成。constructor の引数 &quot;Yamada&quot; が name プロパティに、30がageプロパティにセットされる。<br>user は User 型のオブジェクトとなり、greet メソッドを使える。</p><p></p><p></p><p><a href="/blogs/typescript-utility-types" target="_blank" rel="noopener noreferrer"> <strong>ユーティリティ型（Utility Types）について</strong></a></p>

TypeScriptの型の基本をざっくりとまとめる。

TypeScript

TypeScript基礎｜ユーティリティ型（Utility Types）ざっくりまとめ

TypeScript基礎｜型の基礎・知識をざっくりまとめ