Frontend Academy · レッスン

ユーティリティ型：Partial・Required・Pick・Omit

Q: 「ユーティリティ型：Partial・Required・Pick・Omit」で何を学びますか？

組み込みのユーティリティ型で既存の型を変換し、重複なしでバリエーションを作成します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

組み込みのユーティリティ型で既存の型を変換し、重複なしでバリエーションを作成します。

「ユーティリティ型：Partial・Required・Pick・Omit」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

組み込みユーティリティ型

TypeScript には、ほかの型を変換するジェネリックユーティリティ型がいくつか組み込まれています。これにより、似たインターフェースのバリエーションを手作業で書き直す必要がなくなります。

Partial<T>

T のすべてのプロパティをオプショナルにします。すべてのフィールドを指定する必要がない更新やパッチのペイロードに最適です。

interface User { name: string; email: string; age: number; }

function updateUser(id: string, changes: Partial<User>) {
  // changes.name is string | undefined
  // changes.email is string | undefined
}

updateUser('1', { name: 'Bob' }); // only update name

Required<T>

Partial の反対で、すべてのプロパティを必須にし、オプショナル（?）修飾子を削除します。

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

function validate(config: Required<Config>) {
  // All three are now required
  console.log(config.host, config.port, config.debug);
}

Pick<T, K>

T から指定したプロパティだけを持つ型を作成します。大きなオブジェクトから必要なフィールドだけを取り出す場合に便利です。

interface User { id: number; name: string; email: string; password: string; }

type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to client

Omit<T, K>

指定したプロパティを削除した型を作成します。Pick の逆の操作です。

type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }

type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yet

Readonly<T>

すべてのプロパティを readonly にし、再代入を防ぎます。設定オブジェクトや不変データに便利です。

const config: Readonly<Config> = {
  host: 'localhost',
  port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-only

Record<K, V>

キーが K 型、値が V 型のオブジェクト型を作成します。キーが既知のユニオン型である場合、単純なインデックスシグネチャよりも簡潔に記述できます。

type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;

const perms: Permissions = {
  admin:  { canEdit: true,  canDelete: true  },
  editor: { canEdit: true,  canDelete: false },
  viewer: { canEdit: false, canDelete: false },
};

ReturnType<T> と Parameters<T>

関数型の戻り値の型とパラメーターの型を抽出します。型をインポートできないものの、関数のシグネチャを一致させる必要がある場合に便利です。

function fetchUser(id: number) {
  return { id, name: 'Alice' };
}

type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]

Awaited<T>

Promise 型を、解決後の値の型に展開します。非同期関数を扱う場合に便利です。

type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise

async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }

Extract<T, U> と Exclude<T, U>

Extract<T, U> は、T に含まれる U に代入可能な型だけを残します。Exclude<T, U> は、それらを削除します。

type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>;       // 'a' | 'd'

// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // string

ユーティリティ型の組み合わせ

ユーティリティ型を組み合わせることで、より正確な型を作成できます。

type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional

function patch(id: string, data: UpdatePayload<User>) {
  // data can have any subset of mutable user fields
}

確認問題

インターフェースから指定したキーを削除するユーティリティ型はどれですか？

まとめ：ユーティリティ型

Partial はすべてのフィールドをオプショナルにします。Required はオプショナル修飾子を削除します。Pick は指定したキーだけを残します。Omit は指定したキーを削除します。Readonly は変更を防ぎます。Record はユニオン型のキーを値の型に対応付けます。ReturnType と Parameters は関数の型を抽出します。ユーティリティ型を組み合わせて、正確な DTO 型を作成できます。

よくある質問

「ユーティリティ型：Partial・Required・Pick・Omit」レッスンは無料ですか？

はい。「ユーティリティ型：Partial・Required・Pick・Omit」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「ユーティリティ型：Partial・Required・Pick・Omit」で何を学びますか？

組み込みのユーティリティ型で既存の型を変換し、重複なしでバリエーションを作成します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「ユーティリティ型：Partial・Required・Pick・Omit」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る