Type alias trong TypeScript: từ khóa type kèm ví dụ

Type alias đặt tên cho một kiểu. Bạn viết type Name = ..., và từ đó trở đi Name dùng được ở bất cứ đâu cần một kiểu. Khác với interface, alias có thể đặt tên cho bất kỳ kiểu nào, không chỉ hình dạng đối tượng.

type UserId = string;                         // a primitive
type Point = { x: number; y: number };        // an object shape
type Status = "active" | "banned";            // a union of literals
type Pair = [string, number];                 // a tuple
type Formatter = (value: number) => string;   // a function

const id: UserId = "u_42";
const start: Point = { x: 0, y: 0 };
const current: Status = "active";
const entry: Pair = ["score", 90];
const money: Formatter = (v) => `$${v.toFixed(2)}`;

console.log(id, start, current, entry, money(3.5));
// u_42 { x: 0, y: 0 } active [ 'score', 90 ] $3.50

Alias chỉ tồn tại lúc biên dịch. JavaScript được xuất ra không chứa dòng type nào trong số này.

Cú pháp

type Name = SomeType;
type Name<T> = SomeTypeUsing<T>;       // generic
export type Name = SomeType;           // exported from a module

Theo quy ước, tên được viết theo kiểu PascalCase. Vế phải là một biểu thức kiểu bất kỳ, và một alias có thể dùng các alias khác, kể cả chính nó (xem phần kiểu đệ quy bên dưới). Alias dùng được trong toàn bộ phạm vi nơi nó được khai báo, kể cả phía trên dòng khai báo, vì kiểu được kiểm tra lúc biên dịch chứ không được thực thi theo thứ tự như const hay let.

Kiểu đối tượng

Với hình dạng đối tượng, alias và interface được viết gần như giống nhau. Alias dùng = và thường kết thúc bằng dấu chấm phẩy.

type User = {
  id: number;
  name: string;
  email?: string;           // optional
  readonly createdAt: string; // cannot be reassigned
};

type Admin = User & { permissions: string[] }; // extend with an intersection

const root: Admin = {
  id: 1,
  name: "root",
  createdAt: "2024-03-15",
  permissions: ["*"],
};

console.log(`${root.name} can do ${root.permissions.join(", ")}`); // root can do *

Alias không dùng được extends; phép giao & đảm nhận vai trò đó. Việc kiểm tra thuộc tính thừa, thuộc tính tùy chọn và readonly hoạt động y hệt như với interface. Nên chọn cái nào cho hình dạng đối tượng được bàn trong trang interface và type.

Union, tuple và hàm

Đây là những trường hợp chỉ alias mới đặt tên được, và là lý do chính để type tồn tại. Một alias union liệt kê các lựa chọn, một alias tuple cố định độ dài và kiểu phần tử của mảng, còn một alias hàm mô tả một chữ ký hàm.

type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rect"; width: number; height: number };

type Span = [start: number, end: number]; // labeled tuple elements

type Transform = (shape: Shape, factor: number) => Shape;

const scale: Transform = (shape, factor) =>
  shape.kind === "circle"
    ? { kind: "circle", radius: shape.radius * factor }
    : { kind: "rect", width: shape.width * factor, height: shape.height * factor };

const r: Span = [10, 20];
console.log(scale({ kind: "circle", radius: 2 }, 3)); // { kind: 'circle', radius: 6 }
console.log(r[1] - r[0]);                              // 10

Trong scale, các tham số không cần chú thích kiểu: alias Transform đã cung cấp kiểu cho chúng. Cú pháp tuple được trình bày trong trang tuple, còn việc thu hẹp union nằm trong trang union type.

Type alias generic

Tham số kiểu giúp một alias dùng được cho nhiều kiểu. Chúng có thể có giá trị mặc định, giống như tham số của hàm.

type Result<T, E = string> =
  | { ok: true; value: T }
  | { ok: false; error: E };

function parseAge(text: string): Result<number> {
  const n = Number(text);
  return Number.isInteger(n) && n >= 0
    ? { ok: true, value: n }
    : { ok: false, error: `not an age: ${text}` };
}

for (const input of ["36", "abc"]) {
  const r = parseAge(input);
  console.log(r.ok ? `age ${r.value}` : r.error);
}
// age 36
// not an age: abc

Result<number> dùng giá trị mặc định E = string. Những alias generic nhỏ như type Nullable<T> = T | null hay type Dict<T> = Record<string, T> rất phổ biến trong code thực tế. Các utility type dựng sẵn (Partial<T>, Pick<T, K>, ReturnType<F>) cũng là alias generic, được khai báo trong thư viện chuẩn.

Alias là tên, không phải kiểu mới

Alias không tạo ra một kiểu riêng biệt. Nó là tên thứ hai cho kiểu ở vế phải, và trình biên dịch coi hai thứ là một. Hai alias của string hoàn toàn dùng thay cho nhau được:

type UserId = string;
type OrderId = string;

function cancelOrder(id: OrderId) {
  console.log("cancelling", id);
}

const user: UserId = "u_42";
cancelOrder(user); // compiles: UserId and OrderId are both just string

Đoạn code này in ra cancelling u_42 mà không có lỗi nào, và đó chính là bug mà alias không ngăn được. Alias vẫn giúp người đọc (một tham số có kiểu OrderId nói được nhiều hơn string), nhưng nếu việc nhầm lẫn hai id phải là lỗi biên dịch, hãy dùng branded type như string & { readonly __brand: "OrderId" }.

Type alias đệ quy

Alias có thể tham chiếu tới chính nó, đó là cách bạn mô tả cây, danh sách lồng nhau và JSON:

type Json =
  | string
  | number
  | boolean
  | null
  | Json[]
  | { [key: string]: Json };

type TreeNode = {
  value: number;
  children: TreeNode[];
};

function sum(node: TreeNode): number {
  return node.value + node.children.reduce((total, child) => total + sum(child), 0);
}

const tree: TreeNode = {
  value: 1,
  children: [
    { value: 2, children: [] },
    { value: 3, children: [{ value: 4, children: [] }] },
  ],
};

const payload: Json = { ok: true, items: [1, "two", null], meta: { page: 1 } };

console.log(sum(tree));               // 10
console.log(JSON.stringify(payload)); // {"ok":true,"items":[1,"two",null],"meta":{"page":1}}

Alias Json từ chối những giá trị mà JSON không biểu diễn được: gán { when: new Date() } hay { f: undefined } cho Json đều là lỗi biên dịch (TS2322).

Kiểu từ giá trị: typeof

Khi đã có sẵn một giá trị, bạn có thể đặt tên cho kiểu của nó thay vì viết lại. Toán tử kiểu typeof đọc kiểu của một biến, và có thể kết hợp với các toán tử khác:

const defaults = { retries: 3, verbose: false, level: "info" };

type Options = typeof defaults;
// { retries: number; verbose: boolean; level: string }

type OptionKey = keyof typeof defaults;
// "retries" | "verbose" | "level"

function start(port: number) {
  return { port, startedAt: new Date() };
}
type Server = ReturnType<typeof start>;
// { port: number; startedAt: Date }

Giá trị vẫn là nguồn dữ liệu duy nhất: thêm một thuộc tính vào defaults thì Options tự cập nhật theo. Xem thêm ở trang typeof.

Export và import alias

Alias được export và import giống như giá trị. import type cho thấy rõ chỉ có kiểu được import, nên lệnh import luôn bị loại khỏi đầu ra JavaScript:

// shapes.ts
export type Point = { x: number; y: number };
export type Shape = { kind: "circle"; center: Point; radius: number };

// main.ts
import type { Point, Shape } from "./shapes.js";

const p: Point = { x: 1, y: 2 };