Sự khác nhau giữa Interface và Type trong TypeScript

Dưới đây là sự phân biệt chi tiết giữa Type và Interface trong TypeScript, kèm theo ví dụ code cụ thể để minh hoạ:

Cú pháp: 

• Type: Sử dụng từ khóa type để định nghĩa một Type.
• Interface: Sử dụng từ khóa interface để định nghĩa một Interface.

Ví dụ:

// Type
type MyType = {
  prop1: string;
};

// Interface
interface MyInterface {
  prop1: string;
}

Extendable:

• Type: Type không hỗ trợ việc mở rộng từ một Type khác.
• Interface: Interface có thể mở rộng từ một hoặc nhiều Interface khác bằng từ khóa extends.

Ví dụ:

interface BaseInterface {
  prop1: string;
}

interface ExtendedInterface extends BaseInterface {
  prop2: number;
}

Mergeable:

• Type: Type không hỗ trợ tính chất mergeable. Nếu bạn định nghĩa hai Type trùng tên, TypeScript sẽ báo lỗi.

Ví dụ:

type MyType = {
  prop1: string;
};

type MyType = {
  prop2: number;
};
// Lỗi: Cannot redeclare block-scoped variable 'MyType'.

• Interface: Interface có tính chất mergeable. Nếu bạn định nghĩa hai Interface trùng tên, TypeScript sẽ tự động kết hợp các định nghĩa lại với nhau.

Ví dụ:

interface MyInterface {
  prop1: string;
}

interface MyInterface {
  prop2: number;
}

const obj: MyInterface = {
  prop1: "Hello",
  prop2: 10
};

Callable:

• Type: Type không hỗ trợ việc mô tả một function (callable).
• Interface: Interface có thể được sử dụng để mô tả một function.

Ví dụ:

interface MyInterface {
  (param: string): void;
}

const myFunc: MyInterface = param => {
  console.log(param);
};

myFunc("Hello");

Readonly và Partial:

• Type và Interface đều hỗ trợ readonly và partial modifiers để chỉ định thuộc tính chỉ đọc (readonly) và thuộc tính tùy chọn (optional).

Ví dụ:

// Readonly và Partial trong Type
type MyType = {
  readonly prop1: string;
  prop2?: number;
};

const obj1: MyType = {
  prop1: "Hello",
};

obj1.prop1 = "World"; // Lỗi, prop1 là thuộc tính chỉ đọc

obj1.prop2 = 10; // OK, prop2 là thuộc tính tùy chọn

// Readonly và Partial trong Interface
interface MyInterface {
  readonly prop1: string;
  prop2?: number;
}

const obj2: MyInterface = {
  prop1: "Hello",
};

obj2.prop1 = "World"; // Lỗi, prop1 là thuộc tính chỉ đọc

obj2.prop2 = 10; // OK, prop2 là thuộc tính tùy chọn

Tóm lại, Type và Interface trong TypeScript có sự khác nhau trong cú pháp, khả năng mở rộng, tính mergeable, tính callable và hỗ trợ readonly và partial. Việc sử dụng Type hay Interface phụ thuộc vào yêu cầu cụ thể trong dự án của bạn.