Tham số tùy chọn trong TypeScript: giá trị mặc định và rest

Thêm ? sau tên tham số để biến nó thành tùy chọn. Nơi gọi có thể bỏ qua tham số này, và bên trong hàm kiểu của nó có chứa undefined.

function greet(name: string, title?: string): string {
  // title is string | undefined here
  return title ? `Hello, ${title} ${name}` : `Hello, ${name}`;
}

console.log(greet("Lovelace"));          // Hello, Lovelace
console.log(greet("Lovelace", "Lady"));  // Hello, Lady Lovelace

TypeScript kiểm tra số lượng đối số, nên nếu không có ? thì lời gọi đầu tiên sẽ là lỗi biên dịch: Expected 2 arguments, but got 1. (TS2554).

Tham số tùy chọn có thể là undefined

Vì nơi gọi có thể bỏ qua nó, kiểu của tham số tùy chọn bên trong hàm là T | undefined. Khi bật strictNullChecks, bạn phải xử lý trường hợp undefined trước khi dùng nó như một T.

function formatPrice(amount: number, currency?: string): string {
  // currency.toUpperCase() here would fail: 'currency' is possibly 'undefined'. (TS18048)
  const code = currency?.toUpperCase() ?? "USD";
  return `${amount.toFixed(2)} ${code}`;
}

console.log(formatPrice(9.5));        // 9.50 USD
console.log(formatPrice(12, "eur"));  // 12.00 EUR

Optional chaining (?.) và nullish coalescing (??) là những công cụ thường dùng ở đây. Khi giá trị dự phòng là cố định, tham số mặc định sẽ ngắn gọn hơn.

Giá trị mặc định của tham số

Giá trị mặc định làm tham số trở thành tùy chọn với nơi gọi và cho nó một kiểu không có undefined bên trong hàm. Kiểu được suy ra từ giá trị mặc định, nên thường không cần chú thích kiểu.

function repeat(text: string, times = 2, separator: string = " "): string {
  // times: number, separator: string (never undefined here)
  return Array.from({ length: times }, () => text).join(separator);
}

console.log(repeat("ha"));              // ha ha
console.log(repeat("ha", 3, "-"));      // ha-ha-ha
console.log(repeat("ha", undefined, "")); // haha

Nơi gọi thấy chữ ký repeat(text: string, times?: number, separator?: string). Giá trị mặc định tuân theo quy tắc của JavaScript: chúng được áp dụng khi đối số là undefined, dù bị bỏ qua hay được truyền tường minh, và không áp dụng khi đối số là null. Biểu thức mặc định có thể dùng các tham số đứng trước: function range(start: number, end = start + 10).

Quy tắc thứ tự tham số

Tham số có mặc định đứng trước tham số bắt buộc là hợp lệ nhưng bất tiện. Với nơi gọi, kiểu của nó trở thành number | undefined, và chẳng ai thích viết undefined để giữ chỗ. Nếu cần một tham số đầu linh hoạt, hãy dùng options object hoặc nạp chồng hàm (function overloading).

Bỏ qua và undefined

x?: number và x: number | undefined trông giống nhau và có cùng kiểu bên trong hàm. Chúng khác nhau với nơi gọi: cái đầu có thể bỏ qua, cái sau bắt buộc phải truyền.

function a(x?: number) { return x; }
function b(x: number | undefined) { return x; }

console.log(a());          // undefined
console.log(b(undefined)); // undefined
// @ts-expect-error: Expected 1 arguments, but got 0.
b();

Dùng | undefined cho đối số bắt buộc nhưng được phép không có giá trị, để mọi nơi gọi đều phải cân nhắc nó. Dùng ? khi bỏ qua nó là một lời gọi bình thường. (Thông báo lỗi thật sự ghi "1 arguments": đó là cách diễn đạt của TypeScript.)

Tham số rest

Tham số rest, ...name: T[], gom số lượng đối số bất kỳ vào một mảng. Nó phải là tham số cuối cùng.

function sum(...values: number[]): number {
  return values.reduce((total, v) => total + v, 0);
}

function tag(name: string, ...classes: string[]): string {
  return `<${name} class="${classes.join(" ")}">`;
}

console.log(sum());             // 0
console.log(sum(1, 2, 3));      // 6
const scores = [4, 8, 15];
console.log(sum(...scores));    // 27
console.log(tag("div", "card", "wide")); // <div class="card wide">

Spread một mảng vào các tham số cố định thì chặt chẽ hơn. Tham số rest chấp nhận spread từ bất kỳ number[] nào, nhưng hàm khai báo (a: number, b: number) chỉ chấp nhận spread từ một tuple, vì TypeScript phải biết độ dài:

function point(x: number, y: number) { return { x, y }; }

const list = [3, 4];            // number[]
point(...list);
// error TS2556: A spread argument must either have a tuple type or be passed to a rest parameter.

const pair = [3, 4] as const;   // readonly [3, 4]
point(...pair);                 // fine

Tham số rest cũng có thể có kiểu tuple, khi đó từng vị trí đều có kiểu riêng: ...args: [name: string, age?: number].

Options object

Khi một hàm có nhiều hơn hai hoặc ba tham số tùy chọn, nơi gọi khó nhớ vị trí của từng cái. Một options object với giá trị mặc định cho bạn các đối số có tên và không phụ thuộc thứ tự.

interface FetchOptions {
  retries?: number;
  timeoutMs?: number;
  verbose?: boolean;
}

function fetchData(url: string, { retries = 3, timeoutMs = 5000, verbose = false }: FetchOptions = {}): string {
  return `${url} retries=${retries} timeout=${timeoutMs} verbose=${verbose}`;
}

console.log(fetchData("/a"));
// /a retries=3 timeout=5000 verbose=false
console.log(fetchData("/b", { verbose: true }));
// /b retries=3 timeout=5000 verbose=true

= {} ở cuối làm cả object trở thành tùy chọn. Nếu không có nó, fetchData("/a") là lỗi biên dịch (Expected 2 arguments, but got 1., TS2554), và trong JavaScript thuần lời gọi đó sẽ ném ra TypeError lúc chạy, vì destructuring cần một object để đọc.

Tham số tùy chọn trong kiểu callback

Trong một kiểu hàm, ? có nghĩa là "nơi gọi callback này có thể không truyền nó". Nó không có nghĩa là "callback có thể bỏ qua nó": một callback luôn có thể bỏ qua các tham số ở cuối. Vì vậy đừng đánh dấu tham số của callback là tùy chọn chỉ để cho phép handler nhận ít đối số hơn.

// Too loose: every handler must now cope with index being undefined
type Visit = (item: string, index?: number) => void;

// Right: the caller always passes both; handlers may use only item
type VisitStrict = (item: string, index: number) => void;
const log: VisitStrict = (item) => console.log(item);