# TypeScript - Các Kiểu Literal: Hướng Dẫn Dành Cho Người Mới Bắt Đầu

Xin chào, ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ khám phá thế giới thú vị của các Kiểu Literal trong TypeScript. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn trong chuyến phiêu lưu này. Cuối cùng của bài hướng dẫn này, bạn sẽ sử dụng các kiểu literal như một chuyên gia!

## Các Kiểu Literal Là Gì?

Trước khi chúng ta bắt đầu, hãy tưởng tượng bạn đang đặt hàng một chiếc pizza. Bạn không thể chỉ nói, "Tôi muốn một chiếc pizza." Bạn cần phải chỉ định kích thước: nhỏ, vừa hoặc lớn. Trong TypeScript, các kiểu literal giống như những kích thước cụ thể của pizza - chúng là các giá trị chính xác mà một biến có thể có.

## Cú Pháp

Cú pháp cho các kiểu literal rất đơn giản. Bạn chỉ cần sử dụng giá trị chính xác mà bạn muốn cho phép. Hãy xem một ví dụ cơ bản:

```typescript
let pizzaSize: "small" | "medium" | "large";

Trong ví dụ này, pizzaSize chỉ có thể là "small", "medium" hoặc "large". Không có gì khác được phép - thậm chí không phải "extra large" hoặc "tiny"!

Kiểu Literal Chữ串

Kiểu literal chữ串 là phổ biến nhất và dễ hiểu nhất. Chúng chính xác là những gì chúng听起来 như - các chuỗi cụ thể mà một biến có thể là.

Ví dụ 1: Các Ngày Trong Tuần

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday";

let today: DayOfWeek = "Monday";
today = "Friday"; // Điều này ổn
today = "Someday"; // Lỗi! Kiểu '"Someday"' không thể gán cho kiểu 'DayOfWeek'.

Trong ví dụ này, DayOfWeek là một kiểu chỉ có thể là một trong bảy ngày trong tuần. Thử gán bất kỳ chuỗi nào khác, và TypeScript sẽ chỉ trích bạn!

Ví dụ 2: Màu Sắc Của Đèn Giao Thông

type TrafficLightColor = "Red" | "Yellow" | "Green";

function changeLight(color: TrafficLightColor) {
    console.log(`The light has changed to ${color}`);
}

changeLight("Green"); // Hoạt động tốt
changeLight("Purple"); // Lỗi! Tham số của loại '"Purple"' không thể gán cho tham số của loại 'TrafficLightColor'.

Ở đây, chúng ta đang đảm bảo rằng đèn giao thông chỉ có thể thay đổi sang các màu hợp lệ. Không có đèn disco cho con đường này!

Kiểu Literal Số

Giống như với các chuỗi, chúng ta cũng có thể tạo các kiểu literal với số. Điều này rất hữu ích khi bạn muốn giới hạn một giá trị chỉ đến các số cụ thể.

Ví dụ 3: Kết Quả Xoay Đ骰

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function rollDice(): DiceRoll {
    return Math.floor(Math.random() * 6) + 1 as DiceRoll;
}

let myRoll = rollDice();
console.log(`Bạn đã quay được ${myRoll}`);

Trong ví dụ này, chúng ta đang đảm bảo rằng con骰 chỉ có thể quay ra các số từ 1 đến 6. Không có con骰 gian lận trong trò chơi của chúng ta!

Ví dụ 4: Kích Thước Áo

type ShirtSize = 36 | 38 | 40 | 42 | 44;

let myShirtSize: ShirtSize = 40;
myShirtSize = 41; // Lỗi! Kiểu '41' không thể gán cho kiểu 'ShirtSize'.

Ở đây, chúng ta đang giới hạn kích thước áo chỉ đến các số cụ thể. Không có kích thước giữa trong cửa hàng này!

Kết Hợp Các Kiểu Literal

Sức mạnh thực sự của các kiểu literal tỏa sáng khi chúng ta kết hợp các loại literal khác nhau.

Ví dụ 5: Trạng Thái Nhân Vật Trong Trò Chơi

type CharacterStatus = "Alive" | "Dead" | 1 | 0;

let hero: CharacterStatus = "Alive";
hero = 1; // Điều này cũng hợp lệ
hero = "Wounded"; // Lỗi! Kiểu '"Wounded"' không thể gán cho kiểu 'CharacterStatus'.

Trong trò chơi này, một nhân vật có thể là "Alive", "Dead", 1 (đại diện cho sống), hoặc 0 (đại diện cho chết). Đó giống như có cả biểu thị văn bản và mã!

Các Trường Hợp Sử Dụng Kiểu Literal

Các kiểu literal rất hữu ích trong nhiều tình huống. Hãy khám phá một vài:

1. Tham Số Hàm

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

function sendRequest(url: string, method: HttpMethod) {
    // Gửi yêu cầu
    console.log(`Sending ${method} request to ${url}`);
}

sendRequest("https://api.example.com", "GET"); // Hoạt động tốt
sendRequest("https://api.example.com", "FETCH"); // Lỗi! Tham số của loại '"FETCH"' không thể gán cho tham số của loại 'HttpMethod'.

Bằng cách sử dụng một kiểu literal cho tham số HTTP, chúng ta đảm bảo rằng chỉ có các phương thức hợp lệ có thể được sử dụng.

2. Đối Tượng Cấu Hình

type Theme = "light" | "dark" | "system";
type Language = "en" | "es" | "fr" | "de";

interface AppConfig {
    theme: Theme;
    language: Language;
    notifications: boolean;
}

const myConfig: AppConfig = {
    theme: "dark",
    language: "en",
    notifications: true
};

Các kiểu literal giúp chúng ta tạo ra các đối tượng cấu hình严格的, ngăn chặn các lỗi chính tả và cài đặt không hợp lệ.

3. Máy Trạng Thái

type LoginState = "loggedOut" | "loggingIn" | "loggedIn" | "error";

class LoginManager {
    private state: LoginState = "loggedOut";

    login() {
        this.state = "loggingIn";
        // Thực hiện logic đăng nhập
        this.state = Math.random() > 0.5 ? "loggedIn" : "error";
    }

    logout() {
        this.state = "loggedOut";
    }

    getState(): LoginState {
        return this.state;
    }
}

Ở đây, chúng ta sử dụng các kiểu literal để biểu diễn các trạng thái khác nhau trong quá trình đăng nhập, đảm bảo rằng trạng thái chỉ có thể là một trong các giá trị đã định nghĩa.

Bảng Tóm Tắt

Dưới đây là bảng tóm tắt các phương pháp và khái niệm chúng ta đã covered:

Phương Pháp/Khái Niệm	Mô Tả	Ví Dụ
Khai Báo Kiểu	Định nghĩa một kiểu mới sử dụng các giá trị literal	type DayOfWeek = "Monday" \| "Tuesday" \| ...
Gán Biến	Gán một kiểu literal cho một biến	let today: DayOfWeek = "Monday";
Tham Số Hàm	Sử dụng các kiểu literal trong tham số hàm	function sendRequest(method: HttpMethod) {...}
Kết Hợp Các Literal	Kết hợp các loại literal khác nhau	type Status = "Active" \| "Inactive" \| 0 \| 1;
Thuộc Tính Đối Tượng	Sử dụng các kiểu literal trong thuộc tính của interface	interface Config { theme: "light" \| "dark" }

Và thế là xong, học viên lập trình của tôi! Bạn vừa nâng cấp kỹ năng TypeScript của mình bằng cách thành thạo các kiểu literal. Nhớ rằng, giống như việc chọn topping hoàn hảo cho pizza, các kiểu literal giúp bạn cụ thể và tránh được sai lầm. Hãy tiếp tục luyện tập, và sớm bạn sẽ tạo ra mã an toàn và chính xác như một chiếc pizza hoàn hảo! ??

Credits: Image by storyset