Partial dan Required di TypeScript: Contoh dan Deep Partial

Partial<T> adalah utility type bawaan yang membuat setiap property T menjadi opsional. Ini tipe yang paling pas untuk update atau patch: pemanggil hanya mengirim field yang berubah.

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

function updateUser(user: User, changes: Partial<User>): User {
  return { ...user, ...changes };
}

const ada: User = { id: 1, name: "Ada", email: "ada@example.com" };

const renamed = updateUser(ada, { name: "Ada Lovelace" });
const moved = updateUser(ada, { email: "ada@analytical.org" });

console.log(renamed); // { id: 1, name: 'Ada Lovelace', email: 'ada@example.com' }
console.log(moved.email); // ada@analytical.org

Partial<User> adalah { id?: number; name?: string; email?: string }. Compiler tetap mengecek field yang kamu kirim: { nmae: "x" } atau { name: 42 } adalah error, dan itulah yang membuat Partial lebih baik daripada parameter object atau any yang longgar.

Bagaimana Partial Didefinisikan

Partial adalah mapped type satu baris di standard library TypeScript:

type Partial<T> = {
  [P in keyof T]?: T[P];
};

Untuk setiap key P milik T, tipe ini mendeklarasikan property opsional dengan tipe yang sama. Karena melakukan mapping atas keyof T, ia mempertahankan readonly pada property yang memilikinya. Karena hanya tipe biasa, ia tidak berpengaruh saat runtime: object yang dikirim sebagai changes tetap object yang sama.

Membaca dari Partial Menghasilkan T | undefined

Setiap property di Partial<T> mungkin tidak ada, jadi membacanya menghasilkan tipe property itu ditambah undefined. Compiler memaksamu menangani kasus yang kosong:

interface Options {
  retries: number;
  timeoutMs: number;
  verbose: boolean;
}

const defaults: Options = { retries: 3, timeoutMs: 5000, verbose: false };

function connect(opts: Partial<Options> = {}) {
  const retries = opts.retries ?? defaults.retries; // number
  // opts.timeoutMs * 2 would be error TS18048: 'opts.timeoutMs' is possibly 'undefined'.
  const full: Options = { ...defaults, ...opts };
  console.log(retries, full);
}

connect({ verbose: true });
// 3 { retries: 3, timeoutMs: 5000, verbose: true }
connect();
// 3 { retries: 3, timeoutMs: 5000, verbose: false }

{ ...defaults, ...opts } adalah cara yang biasa untuk mengubah Partial<Options> kembali menjadi Options yang lengkap: spread nilai default lebih dulu, lalu biarkan nilai yang diberikan menimpanya.

Jebakan undefined Eksplisit

Property opsional boleh tidak ada, tetapi juga boleh hadir dengan nilai undefined. Object spread menyalin undefined itu menimpa nilai aslinya, dan tipe hasilnya tidak menunjukkan hal itu:

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

function update(user: User, changes: Partial<User>): User {
  return { ...user, ...changes };
}

const u = update({ name: "Ada", email: "ada@example.com" }, { name: undefined });
console.log(u);             // { name: undefined, email: 'ada@example.com' }
console.log(typeof u.name); // undefined, although the type says string

// Fix: drop undefined values before merging
function updateSafe(user: User, changes: Partial<User>): User {
  const defined = Object.fromEntries(
    Object.entries(changes).filter(([, v]) => v !== undefined),
  ) as Partial<User>;
  return { ...user, ...defined };
}
console.log(updateSafe({ name: "Ada", email: "ada@example.com" }, { name: undefined }));
// { name: 'Ada', email: 'ada@example.com' }

Masalah ini muncul saat patch dibangun dari form atau query string yang field kosongnya menjadi undefined. Opsi compiler exactOptionalPropertyTypes (bukan bagian dari strict) membuat { name: undefined } menjadi error kompilasi untuk name?: string, kecuali kamu menulis name?: string | undefined, sehingga masalahnya dicegah sejak awal.

Partial Bersifat Dangkal

Partial hanya membuat property di level teratas menjadi opsional. Object bersarang, kalau kamu mengirimnya, harus lengkap:

// This does not compile: Partial only reaches the first level
interface Settings {
  theme: string;
  editor: { fontSize: number; tabSize: number };
}

const patch: Partial<Settings> = {
  editor: { fontSize: 16 },
};
console.log(patch);

index.ts(8,3): error TS2741: Property 'tabSize' is missing in type '{ fontSize: number; }' but required in type '{ fontSize: number; tabSize: number; }'.

Property editor memang opsional, tetapi begitu hadir, tipenya tetap { fontSize: number; tabSize: number }, tidak berubah. Untuk object pengaturan, patch API, dan test fixture, kamu sering menginginkan property opsional di setiap level. Untuk itu dibutuhkan tipe rekursif.

DeepPartial: Partial yang Rekursif

TypeScript tidak punya versi deep bawaan, tetapi cukup beberapa baris untuk membuatnya. Fungsi dan array dibiarkan apa adanya, karena membuat elemen array opsional akan mengizinkan [undefined]:

type DeepPartial<T> =
  T extends (...args: any[]) => unknown ? T :
  T extends readonly unknown[] ? T :
  T extends object ? { [K in keyof T]?: DeepPartial<T[K]> } :
  T;

interface Settings {
  theme: string;
  editor: { fontSize: number; tabSize: number };
  recent: string[];
}

const defaults: Settings = {
  theme: "dark",
  editor: { fontSize: 14, tabSize: 2 },
  recent: [],
};

function applySettings(base: Settings, patch: DeepPartial<Settings>): Settings {
  return { ...base, ...patch, editor: { ...base.editor, ...patch.editor } };
}

const patch: DeepPartial<Settings> = { editor: { fontSize: 16 } }; // OK now
console.log(applySettings(defaults, patch));
// { theme: 'dark', editor: { fontSize: 16, tabSize: 2 }, recent: [] }

Tipenya rekursif; penggabungannya tidak. applySettings menggabungkan editor secara manual karena object spread juga dangkal. Fungsi deep merge generic tersedia di library seperti lodash (merge), dan pemberian tipenya lebih sulit daripada tipe di atas.

Required: Kebalikan dari Partial

Required<T> menghapus ? dari setiap property. Tipe ini didefinisikan dengan modifier -?, yang juga menghapus undefined dari tipe setiap property:

interface ServerConfig {
  host: string;
  port?: number;
  tls?: boolean;
}

type ResolvedConfig = Required<ServerConfig>; // { host: string; port: number; tls: boolean }

function resolve(config: ServerConfig): ResolvedConfig {
  return { port: 80, tls: false, ...config };
}

const cfg = resolve({ host: "example.com", tls: true });
console.log(cfg.port + 1, cfg.tls); // 81 true
// @ts-expect-error: Property 'tls' is missing in type '{ host: string; port: number; }'
const incomplete: ResolvedConfig = { host: "a", port: 1 };

Polanya sama seperti Partial, hanya terbalik: pengguna API mengirim konfigurasi yang longgar, lalu kode di dalamnya bekerja dengan versi Required yang semua nilainya dipastikan ada. Spread-nya punya celah yang sama dengan fungsi update di atas: pemanggil yang mengirim port: undefined secara eksplisit menimpa nilai default dengan undefined, dan compiler menerimanya kecuali exactOptionalPropertyTypes aktif. Required bersifat dangkal dengan cara yang sama seperti Partial.

Membuat Hanya Sebagian Property Opsional atau Wajib

Partial dan Required berlaku untuk setiap property. Untuk mengubah beberapa saja, pecah tipenya dengan Pick dan Omit lalu gabungkan lagi:

type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
type RequiredBy<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

interface Post {
  id: number;
  title: string;
  body?: string;
}

type NewPost = PartialBy<Post, "id">;      // id optional, title required, body optional
type Published = RequiredBy<Post, "body">; // body now required