Những cách khai báo Type trong Typescript mà bạn nên biết

1.Indexed Types (Kiểu Chỉ Mục):

Kiểu Indexed Types cho phép bạn truy cập vào các thành phần của kiểu dữ liệu bằng cách sử dụng chỉ mục (index) của chúng.

type Car = {
  make: string;
  model: string;
  year: number;
};

type CarProperty = Car["make"]; // Kiểu dữ liệu của "make" là string

const car: Car = {
  make: "Toyota",
  model: "Camry",
  year: 2022,
};

console.log(car["make"]); // In ra: "Toyota"

2.Readonly Types (Kiểu Chỉ Đọc):

Kiểu Readonly cho phép bạn biến các thuộc tính của một kiểu dữ liệu thành chỉ đọc, ngăn chúng khỏi việc sửa đổi sau khi được gán giá trị.

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

const point: Readonly<Point> = { x: 1, y: 2 };
point.x = 3; // Lỗi: Thuộc tính "x" là chỉ đọc

console.log(point.x); // In ra: 1

3.Record Types (Kiểu Ghi Chú):

Kiểu Record cho phép bạn tạo một kiểu dữ liệu mới với các thuộc tính và kiểu dữ liệu tương tự nhau.

type Fruit = "apple" | "banana";
type Inventory = Record<Fruit, number>;

const inventory: Inventory = {
  apple: 5,
  banana: 10,
};

console.log(inventory.apple); // In ra: 5

4.Tuple Types (Kiểu Tuple):

Kiểu Tuple cho phép bạn định nghĩa một mảng có số lượng phần tử cố định và kiểu dữ liệu cụ thể cho từng phần tử.

type Coordinate = [number, number];

const point: Coordinate = [1, 2];

console.log(point[0]); // In ra: 1

5.Keyof Types (Kiểu Keyof):

Kiểu Điều Kiện (Conditional Types) có thể được sử dụng để kiểm tra một điều kiện và dựa trên nó, chọn một kiểu dữ liệu khác.

type IsString<T> = T extends string ? true : false;

let strCheck: IsString<string> = true;
let numCheck: IsString<number> = false;

console.log(strCheck); // In ra: true
console.log(numCheck); // In ra: false

6.Mapped Types (Kiểu Ánh Xạ - Tích hợp):

Kiểu Ánh Xạ (Mapped Types) cho phép bạn tạo ra các kiểu dữ liệu mới bằng cách duyệt qua từng thành phần của kiểu gốc và thực hiện một số thay đổi.

type Flags<T> = {
  [K in keyof T]: boolean;
};

type Status = {
  active: string;
  disabled: string;
};

type StatusFlags = Flags<Status>;

console.log(StatusFlags); // { active: true, disabled: true }

7.Recursive Types (Kiểu Đệ Quy):

Kiểu Đệ Quy (Recursive Types) cho phép bạn định nghĩa kiểu dữ liệu có chứa chính nó.

type TreeNode<T> = {
  value: T;
  children: TreeNode<T>[];
};

const tree: TreeNode<number> = {
  value: 1,
  children: [
    {
      value: 2,
      children: [],
    },
    {
      value: 3,
      children: [],
    },
  ],
};

console.log(tree.value); // In ra: 1
console.log(tree.children[0].value); // In ra: 2

8.Template Literal Types (Kiểu Template Literal):

Kiểu Template Literal cho phép bạn kết hợp các chuỗi và kiểu dữ liệu trong một kiểu duy nhất.

type Greeting<T extends string> = `Hello, ${T}!`;

const greeting: Greeting<"world"> = "Hello, world!";

console.log(greeting); // In ra: "Hello, world!"

Những loại kiểu này là một phần quan trọng của TypeScript và giúp bạn viết code clean, an toàn và dễ bảo trì hơn. Khi bạn hiểu và sử dụng chúng một cách hiệu quả, bạn sẽ thấy TypeScript trở thành một công cụ mạnh mẽ để code các dự án hiện nay do đó mà các thư viện hay framework bây giờ đều dần support Typescipt cả rồi.

Hy vọng bài viết này giúp bạn hiểu rõ hơn về 8 loại kiểu quan trọng trong TypeScript và làm cho mã của bạn trở nên dễ đọc và dễ bảo trì hơn. Chúc bạn thành công trong việc sử dụng TypeScript cho dự án của mình!