Kiểu hàm trong TypeScript: cú pháp mũi tên và callback

Kiểu hàm mô tả các tham số và giá trị trả về của một hàm, viết bằng mũi tên: (a: number, b: number) => number. Đặt tên cho nó bằng type là bạn dùng được cho biến, tham số và thuộc tính của đối tượng.

type Operation = (a: number, b: number) => number;

const add: Operation = (a, b) => a + b;       // a and b are number
const multiply: Operation = (x, y) => x * y;  // names do not have to match

function apply(op: Operation, a: number, b: number): number {
  return op(a, b);
}

console.log(apply(add, 2, 3));      // 5
console.log(apply(multiply, 2, 3)); // 6

Hàm được gán cho add không cần chú thích kiểu: kiểu của các tham số lấy từ Operation. Cơ chế này gọi là contextual typing, và đó là lý do chính để đặt tên cho kiểu hàm.

Cú pháp kiểu hàm

Dạng chung là (parameters) => ReturnType. Mỗi tham số cần một tên và một kiểu. Tên chỉ để dễ đọc và để trình soạn thảo gợi ý; mọi hàm có kiểu tham số tương thích đều khớp, dù nó đặt tên tham số là gì.

type Predicate = (value: number) => boolean;
type Formatter = (value: number, digits?: number) => string; // optional parameter
type Logger = (...parts: string[]) => void;                    // rest parameter
type Factory = () => { id: number };                           // no parameters

Tên không phải là tùy chọn. (string) => void khai báo một tham số tên là string không có kiểu, và chế độ strict từ chối nó với TS7051: Parameter has a name but no type. Did you mean 'arg0: string'?. Hãy viết (value: string) => void.

Khai báo kiểu cho arrow function

Có hai cách khai báo kiểu cho một arrow function. Chú thích kiểu ngay trên hàm, hoặc chú thích biến bằng một kiểu hàm và để tham số được suy ra.

// 1. Annotations on the function
const toCelsius = (f: number): number => ((f - 32) * 5) / 9;

// 2. A function type on the variable
const toFahrenheit: (c: number) => number = (c) => (c * 9) / 5 + 32;

// 3. The same, with a named type
type Convert = (value: number) => number;
const round1: Convert = (v) => Math.round(v * 10) / 10;

console.log(round1(toCelsius(100)));  // 37.8
console.log(toFahrenheit(37));        // 98.6

Dạng 1 là lựa chọn thường dùng cho một hàm đứng riêng. Dạng 3 có lợi khi nhiều hàm dùng chung một chữ ký (handler, hàm so sánh, hàm chuyển đổi), vì chữ ký chỉ viết một lần và mọi thay đổi trên nó đều được kiểm tra ở khắp nơi.

Kiểu callback

Một tham số có kiểu là kiểu hàm chính là một callback. Hàm của nơi gọi được kiểm tra theo kiểu đó, và tham số của hàm được suy ra từ nó.

function repeat(times: number, action: (index: number) => void): void {
  for (let i = 0; i < times; i++) action(i);
}

repeat(3, (i) => console.log("run", i));

function mapValues(values: number[], fn: (value: number, index: number) => string): string[] {
  const out: string[] = [];
  values.forEach((v, i) => out.push(fn(v, i)));
  return out;
}

// A callback may ignore trailing parameters: this one takes only value.
console.log(mapValues([1.5, 2.25], (v) => v.toFixed(1))); // [ '1.5', '2.3' ]

Hai quy tắc giúp callback dễ dùng:

• Ít tham số hơn cũng được. Một hàm nhận một tham số có thể truyền vào chỗ cung cấp hai tham số. JavaScript bỏ qua đối số thừa, nên TypeScript cho phép điều này. Nhiều tham số hơn số mà kiểu cung cấp thì là lỗi (Target signature provides too few arguments.).
• Kiểu trả về void nhận mọi thứ. Một callback có kiểu (...) => void vẫn có thể trả về giá trị; nơi gọi cam kết không dùng đến nó. Đó là lý do list.forEach((x) => other.push(x)) biên dịch được dù push trả về một số.

Kiểu của tham số vẫn phải tương thích. Truyền (x: string) => ... vào chỗ cần (a: number, b: number) => number sẽ thất bại với Types of parameters 'x' and 'a' are incompatible.

Call signature

(n: number) => string là cách viết tắt của một kiểu đối tượng có call signature: { (n: number): string }. Bạn cần dạng đầy đủ khi hàm còn mang theo thuộc tính.

type Counter = {
  (): number;        // call signature: calling it returns a number
  count: number;     // and it has a property
  reset: () => void; // and a method
};

function makeCounter(): Counter {
  const fn = () => ++fn.count;
  fn.count = 0;
  fn.reset = () => { fn.count = 0; };
  return fn;
}

const next = makeCounter();
next();
next();
console.log(next(), next.count); // 3 3
next.reset();
console.log(next.count);         // 0

TypeScript cho phép thêm thuộc tính vào một hàm khai báo bằng const trong cùng phạm vi, và theo dõi chúng trong kiểu của hàm. Một interface cũng chứa được call signature: interface Counter { (): number; count: number }.

Construct signature mô tả thứ được gọi bằng new. Nó thêm new vào phía trước: new (name: string) => User, hoặc { new (name: string): User } ở dạng đối tượng. Đây là cách khai báo kiểu cho một tham số nhận vào một lớp.

Cú pháp phương thức và cú pháp thuộc tính

Trong một kiểu đối tượng, thành viên là hàm có thể viết dưới dạng phương thức, handle(value: string): void, hoặc dưới dạng thuộc tính chứa hàm, handle: (value: string) => void. Trông thì có vẻ thay thế được cho nhau nhưng khi bật strict chúng được kiểm tra khác nhau:

// This does not compile: the property form checks parameters strictly.
interface WithMethod { handle(value: string | number): void }
interface WithProperty { handle: (value: string | number) => void }

const onlyStrings = (value: string) => console.log(value.toUpperCase());

const a: WithMethod = { handle: onlyStrings };   // accepted
const b: WithProperty = { handle: onlyStrings }; // rejected
a.handle(42);

Trình biên dịch báo:

index.ts(8,27): error TS2322: Type '(value: string) => void' is not assignable to type '(value: string | number) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'string | number' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.

Lỗi này đúng: onlyStrings không xử lý được số. Dạng phương thức để lọt cùng sai sót đó (tham số của phương thức được kiểm tra theo kiểu "bivariant" vì lý do lịch sử), và a.handle(42) sẽ gây lỗi lúc chạy với TypeError: value.toUpperCase is not a function. Xóa dòng b để thấy lỗi đó. Khi tự viết kiểu đối tượng, dạng thuộc tính bắt được nhiều lỗi hơn.

Tránh dùng kiểu Function

Function là kiểu có sẵn mà mọi giá trị hàm đều thỏa mãn. Nó gần như không bao giờ là thứ bạn cần: TypeScript không biết tham số hay kiểu trả về, nên mọi lời gọi đều được chấp nhận và trả về any.

const loose: Function = Math.max;
const result = loose("a", {});   // compiles: any arguments, result is any
console.log(result);             // NaN

const strict: (...values: number[]) => number = Math.max;
console.log(strict(3, 9, 4));    // 9
// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
strict("a");

Hãy thay Function bằng chữ ký thật. Khi bạn thật sự nhận mọi hàm (một debounce tổng quát, một hàm bọc để ghi log), (...args: never[]) => unknown nhận mọi hàm mà vẫn giữ kết quả là unknown thay vì any. Với những hàm có kiểu phụ thuộc vào đầu vào, xem generic: kiểu của một hàm generic trông như <T>(value: T) => T.