Hàm trong TypeScript: kiểu tham số, kiểu trả về và void

Hàm (function) trong TypeScript là một hàm JavaScript có kiểu cho các tham số và, nếu muốn, cho giá trị trả về. Mỗi tham số có một chú thích kiểu, kiểu trả về đặt sau danh sách tham số, và trình biên dịch kiểm tra mọi lời gọi theo cả hai.

function area(width: number, height: number): number {
  return width * height;
}

console.log(area(3, 4)); // 12

// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
area("3", 4);

// @ts-expect-error: Expected 2 arguments, but got 1.
area(3);

Cả hai lời gọi sai đều là lỗi lúc biên dịch (TS2345 và TS2554). Các chú thích // @ts-expect-error cho trình biên dịch biết dòng tiếp theo dự kiến có lỗi, nên phần còn lại của tệp vẫn chạy. Xóa một trong hai rồi chạy lại để thấy thông báo lỗi thật.

Kiểu của tham số

Mỗi tham số được viết là name: Type. Với strict, vốn được bật mặc định trong TypeScript 7, một tham số không có chú thích kiểu và không có ngữ cảnh để suy ra sẽ gây lỗi: Parameter 'x' implicitly has an 'any' type. (TS7006). Vì vậy trên thực tế mọi tham số của một hàm đứng riêng đều được chú thích kiểu.

Kiểu nào cũng dùng được làm kiểu tham số: kiểu nguyên thủy, mảng, kiểu đối tượng, union, các hàm khác.

type User = { name: string; tags: string[] };

function describe(user: User, maxTags: number): string {
  const shown = user.tags.slice(0, maxTags).join(", ");
  return `${user.name} (${shown})`;
}

function formatId(id: string | number): string {
  return typeof id === "number" ? id.toFixed(0).padStart(5, "0") : id.toUpperCase();
}

console.log(describe({ name: "Ada", tags: ["math", "code", "tea"] }, 2)); // Ada (math, code)
console.log(formatId(42));      // 00042
console.log(formatId("ab-7"));  // AB-7

TypeScript kiểm tra cả số lượng đối số. Truyền nhiều hơn hoặc ít hơn số tham số hàm khai báo là lỗi, khác với JavaScript thuần vốn điền undefined cho đối số thiếu và bỏ qua đối số thừa. Để một tham số trở thành không bắt buộc hoặc có giá trị mặc định, xem tham số không bắt buộc.

Kiểu trả về: chú thích hay để suy ra

Kiểu trả về đứng sau dấu đóng ngoặc: function f(): Type. Nó không bắt buộc. Khi không có, TypeScript suy ra kiểu từ mọi return trong thân hàm.

// Inferred: (n: number) => "even" | "odd"
function parity(n: number) {
  return n % 2 === 0 ? "even" : "odd";
}

// Annotated: the contract is written down
function average(values: number[]): number {
  if (values.length === 0) return 0;
  const sum = values.reduce((acc, v) => acc + v, 0);
  return sum / values.length;
}

const p = parity(7);
console.log(p, average([2, 4, 9])); // odd 5

Chú thích kiểu đáng giá khi hàm được export, khi hàm có nhiều nhánh trả về, hoặc khi hàm đệ quy. Khi đó lỗi xuất hiện ngay bên trong hàm, tại return sai, thay vì ở nơi gọi. Một trường hợp kinh điển là một nhánh quên trả về:

// This does not compile: one path falls off the end of the function.
function grade(score: number): string {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
}

console.log(grade(85));

Trình biên dịch báo index.ts(2,32): error TS2366: Function lacks ending return statement and return type does not include 'undefined'. Thêm một return "C"; ở cuối là chạy được. Nếu không có chú thích : string, hàm vẫn biên dịch được với kiểu suy ra "A" | "B" | undefined, và vấn đề sẽ chuyển sang người dùng kết quả.

void: hàm không trả về gì

Một hàm chỉ thực hiện việc gì đó (ghi log, ghi dữ liệu, thay đổi giá trị) có kiểu trả về void. Đó là kiểu TypeScript suy ra khi không có return nào kèm giá trị, và bạn cũng có thể viết rõ ra.

function logLine(label: string, value: number): void {
  console.log(`${label.padEnd(8)}${value}`);
}

logLine("apples", 3);
logLine("pears", 12);

// A callback typed as returning void may return a value; it is ignored.
const lengths: number[] = [];
const push: (s: string) => void = (s) => lengths.push(s.length);
["a", "bcd"].forEach(push);
console.log(lengths); // [ 1, 3 ]

Những quy tắc sau về void khiến nhiều người bất ngờ:

Dòng thứ hai là có chủ ý. Đó là lý do arr.forEach(x => list.push(x)) biên dịch được dù push trả về một số. void trong một kiểu hàm nghĩa là "hàm này trả về gì cũng được, không ai đọc nó". Với một hàm không bao giờ trả về (luôn ném lỗi hoặc lặp vô hạn), kiểu trả về là never.

Arrow function và biểu thức hàm

Arrow function và biểu thức hàm nhận cùng kiểu chú thích. Kiểu trả về đặt sau danh sách tham số, trước =>.

const double = (n: number): number => n * 2;

const toUpper = function (s: string): string {
  return s.toUpperCase();
};

// Returning an object literal from an arrow needs parentheses.
const point = (x: number, y: number) => ({ x, y });

console.log(double(21), toUpper("ok")); // 42 OK
console.log(point(1, 2));               // { x: 1, y: 2 }

Nếu không có cặp ngoặc tròn, (x, y) => { x, y } là một khối lệnh không có return, và hàm trả về undefined. Các quy tắc lúc chạy của arrow function (không có this riêng, không có arguments) giống như trong JavaScript; xem arrow function trong JavaScript.

Khi một hàm được viết trực tiếp làm đối số, bạn thường không cần chú thích kiểu cho tham số của nó. TypeScript biết callback nhận được gì từ hàm mà nó được truyền vào (contextual typing): trong [1, 2].map(n => n * 2), n đã là number. Cách viết kiểu của một hàm như một giá trị, (n: number) => string, được trình bày trong kiểu hàm.

Trả về nhiều giá trị

Một hàm chỉ trả về một giá trị, nên hãy trả về một đối tượng hoặc một tuple rồi phân rã nó.

function minMax(values: number[]): { min: number; max: number } {
  return { min: Math.min(...values), max: Math.max(...values) };
}

function splitName(full: string): [first: string, last: string] {
  const i = full.indexOf(" ");
  return [full.slice(0, i), full.slice(i + 1)];
}

const { min, max } = minMax([7, 2, 9]);
const [first, last] = splitName("Grace Hopper");
console.log(min, max, first, last); // 2 9 Grace Hopper

Kiểu trả về dạng tuple cần được chú thích. Nếu không, [a, b] được suy ra là string[]: phân rã vẫn chạy, nhưng kiểu không còn nói rằng có đúng hai phần tử.

Hàm async

Một hàm async luôn trả về một Promise. Chú thích kiểu trả về là Promise<T>, trong đó T là thứ hàm trả về bên trong.

async function loadScore(id: number): Promise<number> {
  await new Promise((resolve) => setTimeout(resolve, 10));
  return id * 10;
}

async function main(): Promise<void> {
  const score = await loadScore(4); // score: number
  console.log("score", score);
}

main();

Viết async function f(): number là lỗi: The return type of an async function or method must be the global Promise<T> type. Did you mean to write 'Promise<number>'? (TS1064).

Tham số this

JavaScript quyết định this lúc gọi hàm. TypeScript cho phép bạn khai báo this phải là gì bằng một tham số đầu tiên giả mang tên this. Nó bị xóa khỏi JavaScript đã biên dịch và nơi gọi không truyền nó.

interface Counter {
  count: number;
}

function increment(this: Counter, by: number): void {
  this.count += by;
}

const c = { count: 0, increment };
c.increment(2); // fine: this is c

increment(2);
// error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Counter'.

Không có tham số this, this bên trong một hàm đứng riêng là một any ngầm định và chế độ strict báo 'this' implicitly has type 'any' because it does not have a type annotation. (TS2683). Trong phương thức của lớp, this đã có kiểu là instance của lớp, nên tham số này chủ yếu hữu ích cho các hàm đứng riêng được gắn vào đối tượng và cho những callback mà thư viện gọi với một this cụ thể.