Conditional Type dan infer TypeScript, dengan Contoh

Conditional type memilih di antara dua tipe dengan sebuah tes yang bentuknya mirip ternary JavaScript: T extends U ? X : Y. Kalau T bisa diberikan ke U, hasilnya X; kalau tidak, hasilnya Y.

type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<"hello">; // "yes"
type B = IsString<42>;      // "no"

// A practical one: the type of a "message" property, if there is one
type MessageOf<T> = T extends { message: unknown } ? T["message"] : never;

type ErrText = MessageOf<{ message: string; code: number }>; // string
type Nothing = MessageOf<{ code: number }>;                  // never

const a: A = "yes";
const text: ErrText = "disk full";
console.log(a, text); // yes disk full

extends di sini berarti "bisa diberikan ke", hubungan yang sama yang dipakai compiler saat kamu memberikan nilai ke sebuah variabel. Conditional type hanya ada saat kompilasi; tipe ini dihapus dari output JavaScript.

Sintaksnya

type Result = CheckedType extends TestType ? TrueType : FalseType;

Conditional type menjadi berguna bersama generic, di mana tipe yang diperiksa adalah type parameter yang baru mendapat tipe konkret belakangan. Di cabang true, TypeScript tahu bahwa tipe yang diperiksa cocok dengan tesnya, jadi T["message"] di atas diizinkan meskipun T polos tidak punya property message.

Conditional type juga bisa bersarang, seperti ternary yang dirangkai:

type TypeName<T> =
  T extends string ? "string" :
  T extends number ? "number" :
  T extends boolean ? "boolean" :
  T extends undefined ? "undefined" :
  "object";

function typeName<T>(value: T): TypeName<T> {
  return typeof value as TypeName<T>;
}

console.log(typeName("hi"), typeName(3), typeName(true)); // string number boolean
const n: TypeName<number[]> = "object";
console.log(n); // object

as TypeName<T> di badan fungsi itu tidak opsional, seperti yang ditunjukkan bagian berikutnya.

Tipe Kembalian Kondisional Butuh Assertion

Fungsi yang tipe kembaliannya adalah conditional type atas type parameter miliknya sendiri tidak bisa langsung mengembalikan salah satu cabang. TypeScript tidak mempersempit T di dalam badan fungsi, jadi ia tidak bisa tahu cabang mana yang berlaku:

// This does not compile: TypeScript cannot pick a branch of Flip<T> inside the body
type Flip<T> = T extends string ? number : string;

function flip<T extends string | number>(x: T): Flip<T> {
  return typeof x === "string" ? x.length : String(x);
}

console.log(flip("abc"), flip(7));

index.ts(5,34): error TS2322: Type 'number' is not assignable to type 'Flip<T>'.
index.ts(5,45): error TS2322: Type 'string' is not assignable to type 'Flip<T>'.

Ada dua perbaikan yang umum: overload, yang menyatakan setiap pasangan input dan output serta memeriksa pemanggil dengan tepat, atau assertion di implementasinya.

// Fix 1: overloads
function flip(x: string): number;
function flip(x: number): string;
function flip(x: string | number): string | number {
  return typeof x === "string" ? x.length : String(x);
}

const len = flip("abc"); // number
const str = flip(7);     // string
console.log(len + 1, str.padStart(3, "0")); // 4 007

// Fix 2: keep the conditional type and assert inside the body
type Flip<T> = T extends string ? number : string;
function flip2<T extends string | number>(x: T): Flip<T> {
  return (typeof x === "string" ? x.length : String(x)) as Flip<T>;
}
console.log(flip2("hello")); // 5

Overload dibahas di halaman function overloading. Dengan assertion, compiler memercayaimu: cabang yang salah di badan fungsi tidak akan tertangkap.

Distributive Conditional Type

Ketika tipe yang diperiksa adalah type parameter polos dan menerima union, kondisinya dijalankan sekali untuk setiap anggota dan hasilnya digabung menjadi union baru:

type ToArray<T> = T extends unknown ? T[] : never;

type A = ToArray<string | number>; // string[] | number[]

// Wrapping both sides in [ ] turns distribution off
type ToArrayWhole<T> = [T] extends [unknown] ? T[] : never;
type B = ToArrayWhole<string | number>; // (string | number)[]

const a: A = ["x", "y"];  // an array of strings, or an array of numbers
const b: B = ["x", 1];    // a mixed array
// const bad: A = ["x", 1] would be error TS2322:
// Type '(string | number)[]' is not assignable to type 'string[] | number[]'.
console.log(a, b); // [ 'x', 'y' ] [ 'x', 1 ]

Distribusi inilah yang membuat Exclude dan Extract bekerja. Exclude<T, U> didefinisikan sebagai T extends U ? never : T: setiap anggota yang cocok dengan U menjadi never, dan never menghilang dari union. Jadi Exclude<"a" | "b" | "c", "a"> adalah "b" | "c".

Ada dua kejutan yang berasal dari aturan yang sama. boolean adalah union true | false, jadi ToArray<boolean> adalah false[] | true[], bukan boolean[]. Dan never adalah union kosong, jadi distributive conditional type yang menerima never mengembalikan never tanpa menguji apa pun:

type IsNever<T> = T extends never ? true : false;
type X = IsNever<never>; // never, not true

type IsNeverFixed<T> = [T] extends [never] ? true : false;
type Y = IsNeverFixed<never>; // true

Mengekstrak Tipe dengan infer

infer mendeklarasikan variabel tipe baru di dalam klausa extends. Kalau pencocokannya berhasil, TypeScript mengisi variabel itu dari tipe yang diperiksa, dan kamu bisa memakainya di cabang true:

type ElementOf<T> = T extends readonly (infer E)[] ? E : T;
type Unpromise<T> = T extends Promise<infer V> ? V : T;
type FirstArg<F> = F extends (first: infer A, ...rest: any[]) => unknown ? A : never;
type Head<T> = T extends [infer H, ...unknown[]] ? H : never;

type E1 = ElementOf<string[]>;              // string
type V1 = Unpromise<Promise<{ id: number }>>; // { id: number }
type A1 = FirstArg<(name: string, age: number) => void>; // string
type H1 = Head<[Date, number]>;              // Date

const id: V1 = { id: 7 };
const first: A1 = "Ada";
const when: H1 = new Date("2024-03-15T10:30:00Z");
console.log(id, first, when.toISOString());
// { id: 7 } Ada 2024-03-15T10:30:00.000Z

Baca T extends Promise<infer V> ? V : T sebagai "kalau T adalah promise dari sesuatu, sebut sesuatu itu V lalu kembalikan; kalau tidak, kembalikan T apa adanya". infer hanya diizinkan di klausa extends sebuah conditional type.

Variabel infer bisa membawa constraint-nya sendiri dengan extends. Pencocokannya lalu hanya berhasil kalau tipe hasil inferensi memenuhinya:

type FirstString<T> = T extends [infer S extends string, ...unknown[]] ? S : never;

type A = FirstString<["a", 1]>; // "a"
type B = FirstString<[1, "a"]>; // never: the first element is not a string

Membuat ReturnType Sendiri

ReturnType bawaan adalah conditional type satu baris dengan infer. Menulisnya sendiri adalah latihan klasik yang membuat kedua konsep ini langsung dipahami:

type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function makeUser(name: string) {
  return { name, joined: new Date("2024-03-15T10:30:00Z") };
}

type User = MyReturnType<typeof makeUser>; // { name: string; joined: Date }
type Same = ReturnType<typeof makeUser>;   // the built-in gives the same type

const u: User = makeUser("Ada");
const copy: Same = { ...u, name: "Grace" };
console.log(copy.name, copy.joined.getUTCFullYear()); // Grace 2024

typeof makeUser mengubah nilai fungsi menjadi tipenya, lalu conditional type mencocokkannya dengan "fungsi apa pun" dan menangkap tipe kembaliannya sebagai R. Versi di library standar berbeda dalam dua detail: parameternya dibatasi pada function type (T extends (...args: any) => any), jadi ReturnType<string> adalah error kompilasi, bukan never, dan cabang false-nya adalah any. Halaman ReturnType juga membahas Parameters, InstanceType, dan Awaited.

Conditional Type Rekursif

Conditional type bisa merujuk ke dirinya sendiri, sehingga bisa membuka sarang sedalam apa pun:

type Flatten<T> = T extends readonly (infer U)[] ? Flatten<U> : T;

type A = Flatten<number[][][]>; // number
type B = Flatten<string>;       // string

Awaited<T> bawaan bekerja dengan cara ini, membuka Promise<Promise<T>> sampai ke T. Dalam praktiknya, jaga agar rekursinya dangkal: rekursi yang sangat dalam atau tanpa batas membuat compiler menyerah dengan error TS2589: Type instantiation is excessively deep and possibly infinite.

Referensi Cepat