Conditional type và infer trong TypeScript, kèm ví dụ

Conditional type (kiểu có điều kiện) chọn giữa hai kiểu bằng một phép kiểm tra trông giống toán tử ba ngôi của JavaScript: T extends U ? X : Y. Nếu T gán được cho U, kết quả là X; ngược lại là 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 ở đây nghĩa là "gán được cho", cũng chính là quan hệ mà trình biên dịch dùng khi bạn gán một giá trị cho một biến. Conditional type chỉ tồn tại lúc biên dịch; chúng bị xóa khỏi JavaScript đầu ra.

Cú pháp

type Result = CheckedType extends TestType ? TrueType : FalseType;

Conditional type trở nên hữu ích khi đi cùng generic, khi kiểu được kiểm tra là một tham số kiểu sẽ nhận kiểu cụ thể sau này. Trong nhánh true, TypeScript biết kiểu được kiểm tra khớp với điều kiện, nên T["message"] ở trên được chấp nhận dù T đơn thuần không có thuộc tính message.

Chúng cũng lồng nhau được, giống các toán tử ba ngôi nối tiếp:

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> trong thân hàm là bắt buộc, như phần tiếp theo sẽ cho thấy.

Kiểu trả về có điều kiện cần một assertion

Một hàm có kiểu trả về là conditional type dựa trên chính tham số kiểu của nó không thể trả về trực tiếp nhánh nào. TypeScript không thu hẹp T bên trong thân hàm, nên không biết nhánh nào được áp dụng:

// 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>'.

Có hai cách sửa phổ biến: overload, khai báo từng cặp đầu vào và đầu ra và kiểm tra chính xác nơi gọi, hoặc một assertion trong phần hiện thực.

// 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 được trình bày ở trang nạp chồng hàm. Với assertion, trình biên dịch tin bạn: một nhánh sai trong thân hàm sẽ không bị phát hiện.

Distributive conditional type

Khi kiểu được kiểm tra là một tham số kiểu đứng riêng và nó nhận vào một union, điều kiện chạy một lần cho mỗi thành viên và các kết quả được gộp thành một union mới:

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 ]

Cơ chế phân phối này là thứ giúp Exclude và Extract hoạt động. Exclude<T, U> được định nghĩa là T extends U ? never : T: mỗi thành viên khớp với U trở thành never, và never biến mất khỏi union. Vì vậy Exclude<"a" | "b" | "c", "a"> là "b" | "c".

Cùng quy tắc đó sinh ra hai điều bất ngờ. boolean là union true | false, nên ToArray<boolean> là false[] | true[], không phải boolean[]. Và never là union rỗng, nên distributive conditional type nhận never sẽ trả về never mà không kiểm tra gì cả:

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

Trích xuất kiểu bằng infer

infer khai báo một biến kiểu mới bên trong mệnh đề extends. Nếu so khớp thành công, TypeScript điền biến đó từ kiểu được kiểm tra, và bạn có thể dùng nó trong nhánh 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

Hãy đọc T extends Promise<infer V> ? V : T là "nếu T là promise của một thứ gì đó, gọi thứ đó là V và trả về nó; ngược lại trả về T như cũ". infer chỉ được phép dùng trong mệnh đề extends của conditional type.

Một biến infer có thể mang ràng buộc riêng bằng extends. Khi đó phép so khớp chỉ thành công nếu kiểu suy ra được thỏa ràng buộc:

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

Tự viết ReturnType

ReturnType có sẵn là một conditional type dùng infer chỉ trong một dòng. Tự viết nó là bài tập kinh điển giúp bạn hiểu rõ cả hai ý tưởng:

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 biến giá trị hàm thành kiểu của nó, sau đó conditional type so khớp kiểu này với "một hàm bất kỳ" và bắt kiểu trả về vào R. Phiên bản trong thư viện chuẩn khác ở hai chi tiết: tham số của nó bị ràng buộc là kiểu hàm (T extends (...args: any) => any), nên ReturnType<string> là lỗi biên dịch chứ không phải never, và nhánh false của nó là any. Trang ReturnType trình bày cả Parameters, InstanceType và Awaited.

Conditional type đệ quy

Một conditional type có thể tham chiếu đến chính nó, nhờ vậy gỡ được mọi tầng lồng nhau:

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

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

Awaited<T> có sẵn hoạt động theo cách này, gỡ Promise<Promise<T>> xuống còn T. Trong thực tế, hãy giữ đệ quy nông: đệ quy quá sâu hoặc không giới hạn khiến trình biên dịch bỏ cuộc với error TS2589: Type instantiation is excessively deep and possibly infinite.

Tra cứu nhanh