Khi chuyển từ JavaScript sang TypeScript, hàm là nơi khai báo kiểu đem lại lợi ích rõ nhất. Bạn mô tả hàm nhận gì và trả về gì; trình soạn thảo có thể phát hiện lời gọi sai trước khi chương trình chạy. Bài này dùng cấu hình strict của bài chạy chương trình đầu tiên và không yêu cầu React hay framework.

1. Kiểu tham số và kiểu trả về

function add(a: number, b: number): number {
  return a + b;
}
console.log(add(2, 3)); // 5
// add("2", 3); // Bỏ chú thích sẽ báo lỗi kiểu tham số

Phần : number sau dấu ngoặc tròn là kiểu trả về. TypeScript thường suy luận được kiểu đó từ return; viết rõ ở những hàm dùng chung giúp thể hiện hợp đồng và phát hiện thay đổi ngoài ý muốn. Với strict, tham số không có kiểu và không có ngữ cảnh suy luận sẽ bị báo lỗi implicit any.

2. Tham số tùy chọn

function greet(name: string, title?: string): string {
  const prefix = title ? title + " " : "";
  return "Chào " + prefix + name;
}
console.log(greet("An")); // Chào An
console.log(greet("An", "bạn")); // Chào bạn An

Dấu ? cho phép bỏ qua title khi gọi hàm. Trong thân hàm, title có thể là string hoặc undefined, vì vậy phải xử lý trước khi dùng như một chuỗi chắc chắn có giá trị. Với chữ ký thông thường, tham số bắt buộc không được đặt sau tham số đánh dấu tùy chọn.

3. Tham số có giá trị mặc định

function applyDiscount(price: number, percent = 0): number {
  return price * (1 - percent / 100);
}
console.log(applyDiscount(100)); // 100
console.log(applyDiscount(100, 10)); // 90

TypeScript suy luận percent là number từ giá trị mặc định. Giá trị mặc định được dùng khi đối số bị bỏ qua hoặc là undefined; nó không thay thế null. Optional cho phép thiếu giá trị, còn default cung cấp cách xử lý khi thiếu. Hãy chọn theo ý nghĩa nghiệp vụ, thay vì thêm dấu ? cho mọi tham số.

4. Rest parameter cho nhiều đối số

function total(...prices: number[]): number {
  return prices.reduce((sum, price) => sum + price, 0);
}
console.log(total(10, 20, 30)); // 60
console.log(total()); // 0

Rest parameter nhận phần đối số còn lại dưới dạng mảng và phải đứng cuối danh sách tham số. Kiểu number[] giới hạn từng phần tử. Giá trị khởi tạo 0 trong reduce giúp hàm xử lý cả trường hợp không có phần tử.

5. Kiểu của callback và arrow function

type PriceFormatter = (price: number) => string;

function printPrice(price: number, format: PriceFormatter): void {
  console.log(format(price));
}

const formatVnd: PriceFormatter = price =>
  price.toLocaleString("vi-VN") + " đ";

printPrice(150000, formatVnd); // 150.000 đ

PriceFormatter là tên của một kiểu hàm. Callback nhận number và phải tạo ra string; tên tham số vẫn cần được viết trong chữ ký kiểu. Tham số price của arrow function được suy luận từ PriceFormatter nên không phải chú thích lại.

void ở printPrice cho biết người gọi không nhận một kết quả hữu ích từ hàm này. Có một điểm cần phân biệt: kiểu callback () => void cho phép bỏ qua kết quả của callback, nên đôi khi có thể truyền một hàm thực tế trả về giá trị. Điều đó không có nghĩa mọi hàm khai báo trực tiếp : void được tùy ý return một giá trị.

6. Chạy và tránh những lỗi thường gặp

Đặt từng ví dụ vào src/main.ts, thêm export {}; ở cuối nếu file chưa có import/export, rồi chạy npx tsc -p . và node dist/main.js. Không dán những khai báo trùng tên nhiều lần trong cùng file. Nếu hàm tạo ra dữ liệu, trả về giá trị thay vì chỉ console.log; nếu tham số có thể thiếu, hãy xử lý undefined trước khi truy cập.

Đọc thêm: TypeScript: More on Functions.

Đọc tiếp trong loạt bài

Bài trước: TypeScript cơ bản – Chạy chương trình đầu tiên và cấu hình tsconfig.json

Bài tiếp theo: TypeScript cơ bản – Type và interface: mô tả cấu trúc dữ liệu

Xem chuyên mục TypeScript cơ bản