Khóa học Frontend NextJS + React

(tham_số_1: Kiểu1, tham_số_2: Kiểu2, ...) => KiểuTrảVề

// Ví dụ 1: Định nghĩa một kiểu hàm đơn giản nhận hai số và trả về một số
type BinaryNumberOperation = (x: number, y: number) => number;

// Khai báo một biến có kiểu BinaryNumberOperation
let addNumbers: BinaryNumberOperation;

// Gán một hàm phù hợp với kiểu đó cho biến
addNumbers = function (a, b) {
    return a + b;
};

console.log(addNumbers(10, 20)); // Output: 30 (Ok, khớp kiểu)

// Nếu cố gắng gán một hàm không khớp, TypeScript sẽ báo lỗi
// addNumbers = function (a: string, b: string): string { // Lỗi compile-time!
//     return a + b;
// };

// Ví dụ 2: Sử dụng kiểu hàm trực tiếp
let multiplyNumbers: (base: number, factor: number) => number = function (b, f) {
    return b * f;
};

console.log(multiplyNumbers(7, 8)); // Output: 56

// Ví dụ 3: Kiểu hàm cho callback
type LoggerCallback = (message: string) => void; // Hàm nhận string, không trả về gì

function processAsyncOperation(callback: LoggerCallback, data: any) {
    console.log(`Processing data: ${data}`);
    // Giả lập một thao tác bất đồng bộ
    setTimeout(() => {
        const result = `Processed: ${data}`;
        callback(result); // Gọi callback với kết quả (phải khớp kiểu LoggerCallback)
    }, 1000);
}

// Sử dụng hàm processAsyncOperation với một callback function
processAsyncOperation((logMsg) => {
    console.log(`Callback received: ${logMsg}`);
}, "important file");

// Nếu callback không khớp kiểu:
// processAsyncOperation((logMsg: number) => { console.log(logMsg); }, "important file"); // Lỗi!

// Ví dụ 1: Overloading với các kiểu tham số khác nhau

// Chữ ký khai báo 1: Cộng hai số
function add(a: number, b: number): number;
// Chữ ký khai báo 2: Nối hai chuỗi
function add(a: string, b: string): string;
// Chữ ký khai báo 3: Nối số và chuỗi
function add(a: number, b: string): string;
// Chữ ký khai báo 4: Nối chuỗi và số
function add(a: string, b: number): string;


// Chữ ký triển khai (Implementation Signature)
// Phải tương thích với tất cả các chữ ký khai báo ở trên.
// Ở đây dùng 'any' hoặc có thể dùng 'number | string'
function add(a: any, b: any): any {
    // Logic thực tế của hàm
    if (typeof a === 'string' || typeof b === 'string') {
        return String(a) + String(b); // Ép kiểu sang string và nối
    }
    return a + b; // Trường hợp còn lại (cộng số)
}

// Cách sử dụng (TypeScript kiểm tra dựa trên Overload Signatures):
console.log(add(1, 2));           // Output: 3     (TypeScript nhận diện chữ ký 1)
console.log(add("Hello ", "World")); // Output: "Hello World" (TypeScript nhận diện chữ ký 2)
console.log(add(5, " apples"));  // Output: "5 apples" (TypeScript nhận diện chữ ký 3)
console.log(add("Oranges ", 10)); // Output: "Oranges 10" (TypeScript nhận diện chữ ký 4)

// Nếu gọi hàm với kiểu không có trong bất kỳ chữ ký khai báo nào:
// console.log(add(true, false)); // Lỗi compile-time! Argument of type 'boolean' is not assignable...

// Ví dụ 2: Overloading với số lượng tham số khác nhau

// Chữ ký khai báo 1: Tạo ngày từ timestamp (số millisecond)
function makeDate(timestamp: number): Date;
// Chữ ký khai báo 2: Tạo ngày từ năm, tháng, ngày
function makeDate(year: number, month: number, day: number): Date;
// Chữ ký khai báo 3: Tạo ngày từ năm, tháng, ngày, giờ, phút, giây
function makeDate(year: number, month: number, day: number, hour: number, minute: number, second: number): Date;

// Chữ ký triển khai (Implementation Signature)
// Phải bao gồm tất cả các tham số có thể có từ các chữ ký khai báo
function makeDate(mOrTimestamp: number, d?: number, y?: number, h?: number, mi?: number, s?: number): Date {
    // Logic thực tế dựa trên số lượng và kiểu tham số được truyền vào
    if (d !== undefined && y !== undefined) {
        // Nếu có ít nhất 3 tham số (year, month, day)
        // Tháng trong JS Date là 0-indexed, nên d ở đây thực chất là tháng
        // và y thực chất là ngày... cẩn thận với tên biến trong implementation
        // Để rõ ràng, chúng ta có thể đổi tên:
        const year = mOrTimestamp; // Tham số đầu tiên là năm
        const month = d; // Tham số thứ hai là tháng
        const day = y; // Tham số thứ ba là ngày

        if (h !== undefined && mi !== undefined && s !== undefined) {
            // Có đủ 6 tham số
            return new Date(year, month, day, h, mi, s);
        } else {
            // Chỉ có 3 tham số
            return new Date(year, month, day);
        }
    } else {
        // Nếu chỉ có 1 tham số (timestamp)
        const timestamp = mOrTimestamp; // Tham số đầu tiên là timestamp
        return new Date(timestamp);
    }
}

// Cách sử dụng:
console.log(makeDate(1678886400000));      // Output: Date object từ timestamp
console.log(makeDate(2023, 3, 15));       // Output: Date object cho 2023-04-15 (Tháng 3 là tháng 4)
console.log(makeDate(2023, 3, 15, 10, 30, 0)); // Output: Date object cho 2023-04-15 10:30:00

// Nếu gọi hàm với số lượng tham số không khớp bất kỳ chữ ký nào:
// console.log(makeDate(2023)); // Lỗi compile-time! No overload expects 1 arguments, but 1 was given...
// console.log(makeDate(2023, 3)); // Lỗi compile-time! No overload expects 2 arguments...