Partial と Required のサンプルコード — TypeScript

1Partial で全部を省略可能に

Partial<UserProfile> が「すべてのプロパティに ? が付いた型」になることを、変数への代入で素朴に確かめる例です。一部だけのオブジェクトも空のオブジェクトも受け付けるようになります。

TypeScript

type UserProfile = {
  userName: string;
  age: number;
  bio: string;
};

// Partial<UserProfile> は全プロパティが ? 付きになった型
const editing: Partial<UserProfile> = { userName: "Taro" }; // 一部だけでOK
const untouched: Partial<UserProfile> = {}; // 空でもOK

console.log(editing);
console.log(untouched);
// const full: UserProfile = { userName: "Taro" }; // 元の型は省略不可なのでエラー

2フォーム更新に使う Partial

「変更したい項目だけ渡す」更新関数という、Partial の最も代表的な実務パターンです。スプレッド構文で元のデータに変更分を上書きし、渡さなかった項目はそのまま残ることを確かめます。

TypeScript

type Profile = {
  displayName: string;
  email: string;
  theme: string;
};

// 変更したい項目だけを Partial で受け取り、スプレッドで上書きする
function updateProfile(current: Profile, changes: Partial<Profile>): Profile {
  return { ...current, ...changes };
}

const before: Profile = { displayName: "Taro", email: "taro@example.com", theme: "light" };
const after = updateProfile(before, { theme: "dark" });

console.log(after.theme);
console.log(after.email); // 渡さなかった項目は元のまま

3Required でデフォルト値を埋める

呼び出し側は省略できる緩い型で受け取り、内部では Required で「全項目が必ずある」状態に変換して返す例です。設定オブジェクトのデフォルト値補完という、Required が最も活躍する場面です。

TypeScript

// 呼び出し側は省略できるが、内部では全項目そろえて扱いたい
type ChartOptions = {
  width?: number;
  showLegend?: boolean;
};

// Required<ChartOptions> は ? がすべて外れた型
function fillDefaults(options: ChartOptions): Required<ChartOptions> {
  return {
    width: options.width ?? 600,
    showLegend: options.showLegend ?? true,
  };
}

console.log(fillDefaults({}));
console.log(fillDefaults({ width: 800 }));

4検索条件を Partial で表す

「指定された条件だけで絞り込む」検索処理に Partial を使う例です。省略可能なプロパティは undefined の可能性があるため、条件が指定されているかを確認してから比較する、という絞り込みとの合わせ技になっています。

TypeScript

type Item = {
  category: string;
  price: number;
};

// 検索条件は「指定された項目だけ」で絞り込む
function matchItem(item: Item, condition: Partial<Item>): boolean {
  if (condition.category !== undefined && item.category !== condition.category) {
    return false;
  }
  if (condition.price !== undefined && item.price > condition.price) {
    return false;
  }
  return true;
}

const mug = { category: "kitchen", price: 1200 };
console.log(matchItem(mug, { category: "kitchen" })); // カテゴリだけで判定
console.log(matchItem(mug, { price: 1000 }));         // 価格上限だけで判定

5入力途中は Partial、確定時に検査

複数ステップのフォームのように少しずつ値が埋まるデータを Partial で持ち、最後に全項目を検査して完全な型へ変換する実務パターンです。「未完成かもしれない状態」と「完成した状態」を型で区別できるのが要点です。

TypeScript

type Order = {
  itemName: string;
  quantity: number;
};

// 入力途中は Partial で持ち、確定時に全項目を検査して Order に変換する
function finalizeOrder(draft: Partial<Order>): Order | null {
  if (draft.itemName === undefined || draft.quantity === undefined) {
    return null;
  }
  return { itemName: draft.itemName, quantity: draft.quantity };
}

const draftOrder: Partial<Order> = {};
draftOrder.itemName = "コーヒー豆";
console.log(finalizeOrder(draftOrder)); // quantity が未入力なので null

draftOrder.quantity = 2;
console.log(finalizeOrder(draftOrder)); // 全項目そろったので Order になる

サンプルコードで身につける: Partial と Required

1Partial で全部を省略可能に

2フォーム更新に使う Partial

3Required でデフォルト値を埋める

4検索条件を Partial で表す

5入力途中は Partial、確定時に検査