Interface và Type trong TypeScript

Chủ nhật, 16/06/2024 · 6 phút đọc

TypeScript là một ngôn ngữ mạnh mẽ, bổ sung kiểu tĩnh (static typing) cho JavaScript, mang lại độ tin cậy và khả năng bảo trì cao hơn cho mã nguồn. Bằng cách cho phép định nghĩa kiểu dữ liệu, TypeScript nâng cao trải nghiệm phát triển, giúp mã dễ đọc và gỡ lỗi hơn. Trong số các tính năng của nó, TypeScript cung cấp cả interface và type để định hình dữ liệu—dù đó là biến, đối tượng hay lớp. Mặc dù chúng có những điểm tương đồng, nhưng mỗi loại có những thế mạnh riêng, và biết khi nào nên sử dụng cái này hơn cái kia có thể giúp mã của bạn sạch hơn và hiệu quả hơn.

Tóm tắt nội dung

Interface

Được giới thiệu trong các phiên bản đầu tiên của TypeScript, interface lấy cảm hứng từ các khái niệm lập trình hướng đối tượng (OOP). Nó cho phép bạn định nghĩa cấu trúc của đối tượng một cách đơn giản và cung cấp một công cụ mạnh mẽ để tạo các kiểu đối tượng có thể tái sử dụng và mở rộng.

Ví dụ cơ bản về Interface

interface Car {
    brand: string;
    color: string;
}

Kế thừa trong Interface

Một trong những điểm mạnh chính của interface là khả năng kế thừa. Một interface có thể mở rộng (extend) các interface khác, giúp dễ dàng xây dựng các cấu trúc phức tạp hơn.

interface Person {
    name: string;
}

interface User extends Person {
    age: number;
}

const user: User = { name: 'Tuan', age: 30 };

Interface cho Classes

Interface cũng là một lựa chọn tuyệt vời để định nghĩa cấu trúc hoặc “hợp đồng” cho các lớp, xác định các phương thức và thuộc tính mà một lớp nên có.

interface Printable {
    print: () => void;
}

class Cart implements Printable {
    print() {
        console.log('Item has been added.');
    }
}

Gộp Interface (Declaration Merging)

Các interface có thể được gộp lại—khi nhiều interface có cùng tên được khai báo trong cùng một phạm vi, chúng sẽ gộp thành một. Điều này có thể hữu ích, nhưng lạm dụng nó có thể gây ra sự phức tạp.

interface User {
    name: string;
}

interface User {
    age: number;
}

const user: User = { name: 'Tuan', age: 30 };

Lưu ý: Hãy sử dụng tính năng gộp interface một cách thận trọng. Lạm dụng quá mức có thể khiến interface khó hiểu và khó gỡ lỗi do các hiệu ứng phụ không mong muốn.

Type

Ngoài interface, TypeScript cũng cung cấp từ khóa type, linh hoạt hơn và có thể đại diện cho nhiều kiểu dữ liệu, không chỉ riêng đối tượng. Với type, bạn có thể định nghĩa union, intersection, và thậm chí alias cho các kiểu nguyên thủy.

Union Types với Type

Ví dụ, type cho phép định nghĩa kiểu union, điều mà interface không thể xử lý.

type Id = string | number;

Hạn chế khi khai báo Type

Không giống như interface, type không hỗ trợ gộp khai báo. Cố gắng khai báo lại một type sẽ gây ra lỗi.

type User = {
    name: string;
};

// Lỗi: Trùng lặp định danh 'User'
type User = {
    age: number;
}

Kết hợp các kiểu với Type

type cũng lý tưởng để tạo kiểu mới từ các kiểu đã có, làm cho nó trở thành công cụ mạnh mẽ để định nghĩa các cấu trúc dữ liệu phức tạp.

type User = {
    name: string;
    age: number;
    address: string;
};

type PartialUser = Partial<User>;
const partialUser: PartialUser = {
    name: 'Tuan',
    age: 30
};

type NameOnly = Pick<User, 'name'>;
const nameOnly: NameOnly = {
    name: 'Tuan'
};

Khi nào nên sử dụng?

Sử dụng interface khi bạn cần định nghĩa cấu trúc cho các đối tượng và lớp, vì chúng cung cấp tính linh hoạt tốt hơn với tính kế thừa và hoạt động mượt mà với hệ thống kiểm tra kiểu của TypeScript.
Sử dụng type cho union, intersection, alias kiểu nguyên thủy hoặc khi bạn cần tạo các kiểu phức tạp và có thể tái sử dụng.

Kết luận

Cả interface và type đều mang lại những khả năng hữu ích cho TypeScript. Hiểu rõ điểm mạnh của từng loại sẽ giúp bạn chọn công cụ phù hợp cho từng tình huống, làm cho mã nguồn của bạn sạch hơn, dễ hiểu hơn và dễ bảo trì hơn. Hãy tận dụng sức mạnh của hệ thống kiểu TypeScript và tận hưởng sự rõ ràng, an toàn mà nó mang lại cho các dự án của bạn!

- Ảnh đại diện bài viết -

Tuanxt