Khác biệt khi sử dụng 'type' và 'interface' trong TypeScript

Trong bài viết này, mình sẽ tìm hiểu sự khác biệt giữa 'type' và 'interface' trong TypeScript, cùng với lý do khi nào nên sử dụng mỗi loại. Mình sẽ tìm hiểu về cấu trúc cơ bản của 'type' và 'interface', khả năng kết hợp và mở rộng kiểu dữ liệu, và cách lựa chọn phù hợp cho từng tình huống cụ thể.

Hãy cùng bắt đầu với một cuộc thám hiểm sâu hơn về 'type' và 'interface' trong TypeScript.

Sự khác biệt giữa 'type' và 'interface' trong TypeScript

Sự giống nhau và khác nhau cơ bản giữa 'type' và 'interface

Sự giống nhau:

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

• Cả 'type' và 'interface' đều cho phép bạn định nghĩa kiểu dữ liệu tùy chỉnh trong TypeScript.
• Cả 'type' và 'interface' đều có khả năng định nghĩa cấu trúc dữ liệu cho đối tượng và kiểu dữ liệu cho biến.

Sự khác nhau cơ bản:

'type':

• Sử dụng 'type' khi bạn cần định nghĩa kiểu dữ liệu tùy chỉnh, đặc biệt là kiểu dữ liệu ghép nhiều kiểu dữ liệu cơ bản lại với nhau.
• Khả năng kết hợp và mở rộng kiểu dữ liệu (Union, Intersection).
• Dùng 'type' để tạo các kiểu dữ liệu kết hợp (union types) và giao điểm (intersection types).

'interface':

• Sử dụng 'interface' khi bạn cần định nghĩa cấu trúc dữ liệu của đối tượng hoặc định nghĩa hợp đồng (contract) cho các đối tượng.
• Chỉ cho phép định nghĩa cấu trúc dữ liệu của đối tượng và không hỗ trợ kiểu dữ liệu ghép nhiều kiểu dữ liệu cơ bản.
• 'interface' được sử dụng trong lập trình hướng đối tượng.

Khi nào nên sử dụng 'type' và khi nên sử dụng 'interface'?

• Sử dụng 'type' khi bạn cần định nghĩa kiểu dữ liệu tùy chỉnh, đặc biệt là khi bạn cần kết hợp hoặc mở rộng kiểu dữ liệu.
• Sử dụng 'interface' khi bạn cần định nghĩa cấu trúc dữ liệu cho đối tượng và tuân theo các nguyên tắc của lập trình hướng đối tượng.
• Khi cả 'type' và 'interface' đều có thể được sử dụng, bạn nên xem xét yêu cầu cụ thể của dự án và lựa chọn phù hợp.

Mình sẽ thảo luận chi tiết hơn và cung cấp ví dụ cụ thể về việc sử dụng 'type' và 'interface' trong các tình huống cụ thể ở các phần sau của bài viết.

Sử dụng 'type' trong TypeScript

Cấu trúc cơ bản của 'type'

Trong TypeScript, 'type' là một cách để định nghĩa kiểu dữ liệu tùy chỉnh. Nó cho phép bạn đặt tên cho một kiểu dữ liệu cụ thể và sử dụng nó trong toàn bộ mã nguồn của bạn. Một khai báo 'type' cơ bản có cấu trúc như sau:

type TypeName = TypeDefinition;

• TypeName là tên kiểu dữ liệu bạn muốn định nghĩa.
• TypeDefinition là định nghĩa kiểu dữ liệu, có thể là một kiểu dữ liệu cơ bản như number, string, hoặc một kiểu dữ liệu phức tạp hơn.

Sử dụng 'type' để định nghĩa kiểu dữ liệu tùy chỉnh

Bạn có thể sử dụng 'type' để định nghĩa các kiểu dữ liệu tùy chỉnh dựa trên các kiểu dữ liệu cơ bản hoặc kết hợp các kiểu dữ liệu lại với nhau. Ví dụ:

type Point = {
    x: number;
    y: number;
};

type RGBColor = "red" | "green" | "blue";

type User = {
    id: number;
    username: string;
};

type Nullable<T> = T | null;

Trong ví dụ này:

• Point là một kiểu dữ liệu định nghĩa cấu trúc dữ liệu cho điểm trong hệ tọa độ.
• RGBColor là một kiểu dữ liệu định nghĩa một màu sắc chỉ có thể là "red", "green" hoặc "blue".
• User là một kiểu dữ liệu định nghĩa cấu trúc dữ liệu cho thông tin người dùng.
• Nullable<T> là một kiểu dữ liệu generic cho phép bạn biểu diễn kiểu dữ liệu có thể là T hoặc null.

Khả năng kết hợp và mở rộng kiểu dữ liệu với 'type'

Một trong những điểm mạnh của 'type' là khả năng kết hợp và mở rộng kiểu dữ liệu. Bạn có thể tạo các kiểu dữ liệu phức tạp bằng cách kết hợp hoặc mở rộng các 'type' hiện có. Ví dụ:

type Rectangle = {
    width: number;
    height: number;
};

type Square = Rectangle & { width: number; height: number };

type Colorful = { color: string };
type Circle = Colorful & { radius: number };

• Trong ví dụ trên, Square là một kiểu dữ liệu đại diện cho hình vuông, và nó được tạo ra bằng cách mở rộng 'type' Rectangle.
• Tương tự, Circle là một kiểu dữ liệu đại diện cho hình tròn, và nó được tạo ra bằng cách mở rộng 'type' Colorful.

Sử dụng 'type' cho phép bạn định nghĩa các kiểu dữ liệu phức tạp và linh hoạt trong TypeScript.

Sự so sánh giữa 'type' và 'interface'

Sự khác biệt về kết hợp và mở rộng kiểu dữ liệu

Kết hợp (Intersection):

• Cả 'type' và 'interface' đều hỗ trợ kết hợp (intersection) kiểu dữ liệu. Bạn có thể kết hợp nhiều kiểu dữ liệu lại với nhau để tạo ra một kiểu dữ liệu mới.
• Ví dụ, bạn có thể kết hợp hai kiểu dữ liệu 'type' hoặc 'interface' lại với nhau:

type Point = { x: number; y: number };
type Color = { color: string };
type PointWithColor = Point & Color;

interface User {
    id: number;
    username: string;
}
interface Admin {
    adminLevel: number;
}

type AdminUser = User & Admin;

Trong ví dụ trên, PointWithColor là một kiểu dữ liệu kết hợp của Point và Color, và AdminUser là một kiểu dữ liệu kết hợp của 'interface' User và 'interface' Admin.

Mở rộng (Extension)

• Sự khác biệt quan trọng là 'type' hỗ trợ mở rộng kiểu dữ liệu (union types), trong khi 'interface' không hỗ trợ mở rộng.
• 'type' cho phép bạn tạo ra các kiểu dữ liệu ghép nhiều kiểu dữ liệu cơ bản lại với nhau.
• Ví dụ:

type Shape = "circle" | "square" | "triangle";
type Size = "small" | "medium" | "large";
type ShapeSize = Shape | Size;

Trong ví dụ trên, ShapeSize là một kiểu dữ liệu ghép nhiều kiểu dữ liệu cơ bản lại với nhau, bao gồm các hình dạng (circle, square, triangle) và các kích thước (small, medium, large).

Sự khác biệt trong việc áp dụng kiểu dữ liệu cho các đối tượng

• 'interface' được sử dụng trong lập trình hướng đối tượng và áp dụng cho đối tượng riêng lẻ, đảm bảo rằng các đối tượng phải tuân theo các hợp đồng (contract) đã định nghĩa.
• 'type' không áp dụng cho đối tượng một cách trực tiếp, mà nó định nghĩa kiểu dữ liệu tùy chỉnh mà có thể sử dụng để định nghĩa kiểu cho các biến, hàm, hoặc kiểu dữ liệu khác.

Ví dụ:

interface Person {
    name: string;
    age: number;
}

type Point = { x: number; y: number };

const person: Person = { name: "John", age: 30 };
const point: Point = { x: 10, y: 20 };

Trong ví dụ trên, 'interface' Person áp dụng cho biến person, trong khi 'type' Point áp dụng cho biến point.

Tóm lại, sự khác biệt quan trọng giữa 'type' và 'interface' đó là 'type' hỗ trợ mở rộng kiểu dữ liệu, trong khi 'interface' áp dụng cho đối tượng riêng lẻ và tuân theo các hợp đồng cụ thể. Việc lựa chọn giữa 'type' và 'interface' phụ thuộc vào yêu cầu cụ thể của dự án và kiểu dữ liệu bạn định nghĩa.

Lựa chọn 'type' hoặc 'interface' cho tình huống thực tế

Hướng dẫn khi nên sử dụng 'type':

• Khi bạn cần định nghĩa kiểu dữ liệu tùy chỉnh: Sử dụng 'type' khi bạn cần tạo ra một kiểu dữ liệu riêng biệt cho một mục đích cụ thể.
• Khi bạn cần kết hợp hoặc mở rộng kiểu dữ liệu: 'type' cho phép bạn kết hợp và mở rộng kiểu dữ liệu một cách dễ dàng, điều này hữu ích khi bạn cần tạo ra các kiểu dữ liệu phức tạp.
• Khi bạn cần sử dụng kiểu dữ liệu generic: Sử dụng 'type' khi bạn cần định nghĩa kiểu dữ liệu generic có thể tái sử dụng trong nhiều tình huống.

Hướng dẫn khi nên sử dụng 'interface':

• Khi bạn cần định nghĩa cấu trúc dữ liệu cho đối tượng: Sử dụng 'interface' khi bạn muốn định nghĩa cấu trúc dữ liệu và các trường dữ liệu cụ thể cho đối tượng.
• Khi bạn muốn tuân theo nguyên tắc lập trình hướng đối tượng (OOP): 'interface' là lựa chọn tự nhiên khi bạn muốn thiết kế ứng dụng theo hướng OOP và áp dụng hợp đồng (contract) cho các đối tượng.
• Khi bạn cần tạo ra một lớp cơ sở (base class): Sử dụng 'interface' khi bạn muốn tạo ra một lớp cơ sở cho việc kế thừa và đảm bảo tính nhất quán trong toàn bộ ứng dụng.

Lựa chọn tùy thuộc vào bối cảnh và yêu cầu cụ thể của dự án:

• Lựa chọn giữa 'type' và 'interface' phụ thuộc vào bối cảnh cụ thể của dự án và yêu cầu bạn đang đối mặt. Một quy tắc tổng quan có thể là sử dụng 'type' khi bạn cần định nghĩa kiểu dữ liệu và kết hợp chúng, và sử dụng 'interface' khi bạn cần định nghĩa cấu trúc dữ liệu cho đối tượng và tuân theo nguyên tắc OOP.

Ví dụ minh họa

Ví dụ về việc sử dụng 'type' để định nghĩa kiểu dữ liệu tùy chỉnh:

type Point = {
    x: number;
    y: number;
};

type RGBColor = "red" | "green" | "blue";

type User = {
    id: number;
    username: string;
};

type Nullable<T> = T | null;

Ví dụ về việc sử dụng 'interface' để định nghĩa cấu trúc dữ liệu cho đối tượng:

interface Person {
    name: string;
    age: number;
}

interface Shape {
    area(): number;
}

Trong ví dụ này, 'type' được sử dụng để định nghĩa các kiểu dữ liệu tùy chỉnh như 'Point', 'RGBColor', 'User', và 'Nullable'. 'interface' được sử dụng để định nghĩa cấu trúc dữ liệu cho đối tượng như 'Person' và 'Shape'.

Kết bài

Trong TypeScript, sự lựa chọn giữa sử dụng 'type' và 'interface' là một quyết định quan trọng đối với nhà phát triển. Cả hai có vai trò quan trọng trong việc định nghĩa kiểu dữ liệu và cấu trúc dữ liệu cho ứng dụng. Dưới đây, mình có thể tóm gọn các điểm quan trọng về 'type' và 'interface':

• 'type' cho phép bạn định nghĩa kiểu dữ liệu tùy chỉnh và tạo kiểu dữ liệu ghép nhiều kiểu dữ liệu cơ bản lại với nhau. Nó hỗ trợ cả kết hợp (intersection) và mở rộng (union types).
• 'interface' được sử dụng để định nghĩa cấu trúc dữ liệu cho đối tượng và áp dụng hợp đồng (contract) cho các đối tượng. 'interface' thường được sử dụng trong lập trình hướng đối tượng.

Lựa chọn giữa 'type' và 'interface' phụ thuộc vào yêu cầu cụ thể của dự án. Sử dụng 'type' khi bạn cần định nghĩa kiểu dữ liệu tùy chỉnh, kết hợp kiểu dữ liệu, hoặc sử dụng kiểu dữ liệu generic. Sử dụng 'interface' khi bạn cần định nghĩa cấu trúc dữ liệu cho đối tượng, tuân theo nguyên tắc OOP, hoặc tạo ra các lớp cơ sở.

Sự hiểu biết về sự khác biệt giữa 'type' và 'interface' sẽ giúp bạn thiết kế ứng dụng TypeScript một cách hiệu quả và đảm bảo tính nhất quán trong mã nguồn của bạn.