Hàm trong TypeScript

Hàm là một phần quan trọng của mọi ngôn ngữ lập trình, và TypeScript không phải là một ngoại lệ. Một sự hiểu biết sâu về cách khai báo, sử dụng, và tối ưu hóa hàm trong TypeScript sẽ giúp bạn xây dựng các ứng dụng phức tạp và dễ bảo trì hơn.

Trong bài viết này,mình sẽ tìm hiểu của hàm trong TypeScript. Mình sẽ bắt đầu với cú pháp cơ bản để định nghĩa hàm và sau đó chuyển qua các khái niệm nâng cao như hàm nặc danh, hàm arrow, và hàm generics. Mình cũng sẽ xem xét cách phạm vi và quy tắc tương quan ảnh hưởng đến hàm trong TypeScript. Cuối cùng, mình sẽ thấy các ví dụ thực tế và ứng dụng của hàm trong TypeScript, giúp bạn hiểu rõ tại sao chúng quan trọng và làm thế nào để sử dụng chúng hiệu quả.

Cú pháp cơ bản của hàm trong TypeScript

Trong TypeScript, hàm là một phần quan trọng để tạo và sắp xếp mã nguồn. Mình sẽ tìm hiểu cú pháp cơ bản của hàm, bao gồm cách khai báo hàm, quản lý tham số, và định nghĩa kiểu trả về.

Khai báo hàm

Để khai báo một hàm trong TypeScript, mình sử dụng từ khóa function, sau đó đặt tên cho hàm và định nghĩa kiểu dữ liệu đầu vào và kiểu dữ liệu trả về (nếu có). Dưới đây là một ví dụ đơn giản:

Bài viết này được đăng tại [free tuts .net]

function cong(a: number, b: number): number {
    return a + b;
}

Trong ví dụ này:

• cong là tên của hàm.
• a và b là tham số đầu vào, mỗi tham số có kiểu dữ liệu số (number).
• number sau dấu hai chấm : đại diện cho kiểu dữ liệu trả về của hàm.

Tham số hàm

Trong TypeScript, bạn có thể định nghĩa tham số cho hàm. Tham số cho phép hàm nhận giá trị đầu vào và thực hiện các thao tác dựa trên chúng. Các tham số có thể có kiểu dữ liệu cụ thể và giá trị mặc định (nếu cần).

Ví dụ về tham số và giá trị mặc định:

function inThongTin(ten: string, tuoi: number = 30) {
    console.log(`Tên: ${ten}, Tuổi: ${tuoi}`);
}

inThongTin("Alice"); // Kết quả: Tên: Alice, Tuổi: 30
inThongTin("Bob", 25); // Kết quả: Tên: Bob, Tuổi: 25

Trong ví dụ trên, hàm inThongTin nhận hai tham số: ten có kiểu dữ liệu là string và tuoi có kiểu dữ liệu là number. Tham số tuoi có giá trị mặc định là 30, nhưng bạn có thể ghi đè giá trị này khi gọi hàm.

Kiểu trả về

Một hàm có thể trả về một giá trị sau khi thực hiện các thao tác. Để xác định kiểu dữ liệu của giá trị trả về, bạn sử dụng dấu hai chấm (:) sau tham số hàm.

Ví dụ về kiểu trả về:

function nhan(a: number, b: number): number {
    return a * b;
}

Trong ví dụ này, hàm nhan trả về một giá trị có kiểu dữ liệu là number.

Các khái niệm về cú pháp cơ bản của hàm trong TypeScript này là cơ bản nhưng quan trọng. Chúng giúp bạn xác định, gọi và sử dụng hàm một cách hiệu quả trong các dự án TypeScript của bạn.

Hàm nặc danh và hàm arrow trong TypeScript

Trong TypeScript, mình có hai loại hàm đặc biệt là hàm nặc danh và hàm arrow. Hãy tìm hiểu về chúng:

Hàm nặc danh

Khái niệm: Hàm nặc danh, còn gọi là hàm ẩn danh, là một hàm không có tên. Điều này có nghĩa rằng bạn có thể định nghĩa và gán một hàm cho một biến mà không cần phải sử dụng tên hàm.

Ví dụ về hàm nặc danh:

const tinhBinhPhuong = function(x: number): number {
    return x * x;
};

const ketQua = tinhBinhPhuong(5); // ketQua sẽ là 25

Trong ví dụ trên, tinhBinhPhuong là một hàm nặc danh không có tên, và bạn có thể gọi nó qua biến ketQua.

Hàm arrow

Cú pháp và ưu điểm: Hàm arrow là một cú pháp viết gọn cho việc định nghĩa hàm trong TypeScript. Chúng sử dụng mũi tên => để khai báo hàm. Hàm arrow thường ngắn gọn, đặc trưng bởi việc tự động trả về giá trị của biểu thức nằm sau mũi tên. Chúng thường được sử dụng trong các tình huống đơn giản.

Ví dụ về hàm arrow:

const tinhBinhPhuong = (x: number): number => x * x;

const ketQua = tinhBinhPhuong(5); // ketQua s

Phạm vi và quy tắc về hàm trong TypeScript

Trong phần này, mình sẽ tìm hiểu về phạm vi biến trong hàm và quy tắc tương quan trong TypeScript, hai khía cạnh quan trọng liên quan đến cách hàm hoạt động.

Phạm vi biến trong hàm

Phạm vi biến trong hàm xác định sự sử dụng và truy cập các biến bên trong và bên ngoài hàm. TypeScript hỗ trợ hai từ khóa quan trọng để quản lý phạm vi biến:

• let: Biến được khai báo bằng từ khóa let có phạm vi trong khối mã nguồn ({...}) bên trong hàm. Chúng chỉ có thể truy cập và thay đổi trong phạm vi này.

• const: Biến được khai báo bằng từ khóa const cũng có phạm vi trong khối mã nguồn ({...}) bên trong hàm, nhưng chúng không thể thay đổi giá trị sau khi đã gán.

Ví dụ: Sử dụng let và const trong phạm vi biến trong hàm.

function phamViBien() {
    let bienLet = 5;
    const bienConst = "Hằng số";

    if (true) {
        let bienBenTrong = 10;
        console.log(bienLet); // Hợp lệ, in ra 5
    }

    console.log(bienLet); // Hợp lệ, in ra 5
    console.log(bienConst); // Hợp lệ, in ra "Hằng số"
    // console.log(bienBenTrong); // Lỗi, biến không tồn tại ở đây
}

Quy tắc tương quan (Type Inference)

Quy tắc tương quan trong TypeScript đảm bảo rằng kiểu dữ liệu của biến và giá trị trả về của hàm được xác định một cách tự động dựa trên kiểu dữ liệu của giá trị gán hoặc kiểu trả về của hàm.

Quy tắc tương quan là một tính năng mạnh mẽ giúp kiểm tra kiểu dữ liệu tại thời gian biên dịch và ngăn chặn các lỗi liên quan đến kiểu dữ liệu trong mã nguồn TypeScript.

Những khía cạnh về phạm vi và quy tắc tương quan là quan trọng để hiểu cách hàm hoạt động và cách TypeScript xác định kiểu dữ liệu. Chúng giúp bạn viết mã nguồn an toàn hơn và dễ bảo trì trong các dự án TypeScript của bạn.

Các ví dụ thực tế của hàm trong TypeScript

Dưới đây là một số ví dụ cụ thể về cách sử dụng hàm trong TypeScript để giải quyết các vấn đề thực tế, và mỗi ví dụ sẽ đi kèm với phân tích cơ bản:

Tính tổng các số trong mảng

Ví dụ này sử dụng một hàm để tính tổng các số trong một mảng. Điều này có thể hữu ích khi bạn cần tính tổng điểm trong một trò chơi hoặc tổng giá trị của các sản phẩm trong giỏ hàng.

function tinhTong(mang: number[]): number {
    let tong = 0;
    for (let so of mang) {
        tong += so;
    }
    return tong;
}

const mangSo: number[] = [1, 2, 3, 4, 5];
const tong = tinhTong(mangSo);
console.log("Tổng các số: " + tong); // Kết quả: 15

function kiemTraChuoi(chuoi: string, tuKhoa: string): boolean {
    return chuoi.includes(tuKhoa);
}

const vanBan = "Hôm nay là một ngày tuyệt vời.";
const tuKhoa = "tuyệt vời";
const ketQua = kiemTraChuoi(vanBan, tuKhoa);
console.log("Chuỗi có chứa từ khóa: " + ketQua); // Kết quả: true