TypeScript - Kiểu Template Literal

Xin chào các ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của TypeScript và khám phá một tính năng tuyệt vời叫做 Template Literal Types. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - tôi sẽ hướng dẫn bạn từng bước, giống như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, hãy lấy饮料 yêu thích của bạn, thư giãn và cùng tôi khám phá nhé!

Template Literal Types là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu Template Literal Types là gì. Hãy tưởng tượng bạn đang tạo một thẻ chúc mừng. Bạn có một mẫu cơ bản, nhưng bạn muốn cá nhân hóa nó với các tên và thông điệp khác nhau. Đó chính xác là điều mà Template Literal Types làm trong TypeScript - chúng cho phép chúng ta tạo ra các định nghĩa kiểu linh hoạt, có thể tái sử dụng và thay đổi dựa trên những gì chúng ta nhập vào.

Cú pháp

Cú pháp cho Template Literal Types có thể trông lạ lẫm ban đầu, nhưng tôi诺诺 nó không phức tạp như bạn nghĩ. Dưới đây là cấu trúc cơ bản:

type TemplateLiteralType = `prefix ${SomeType} suffix`;

Hãy phân tích nó:

• type là từ khóa trong TypeScript mà chúng ta sử dụng để định nghĩa một kiểu mới.
• TemplateLiteralType là tên chúng ta đặt cho kiểu mới (bạn có thể chọn bất kỳ tên nào bạn thích).
• Dấu backtick (`) được sử dụng để bao quanh mẫu của chúng ta.
• ${SomeType} là một placeholder nơi chúng ta có thể chèn một kiểu khác.
• prefix và suffix là văn bản tùy chọn sẽ luôn là một phần của kiểu của chúng ta.

Hãy tưởng tượng nó như một trò chơi Mad Libs, nơi ${SomeType} là khoảng trống chúng ta điền vào để tạo ra các biến thể khác nhau.

Ví dụ

Bây giờ, hãy xem một số ví dụ để hiểu cách Template Literal Types hoạt động trong thực tế. Tôi sẽ cung cấp nhiều đoạn mã và giải thích từng đoạn một.

Ví dụ 1: Sử dụng cơ bản

type Greeting = `Hello, ${string}!`;

let myGreeting: Greeting = "Hello, World!";  // Đây là hợp lệ
let invalidGreeting: Greeting = "Hi there!"; // Đây sẽ gây ra lỗi

Trong ví dụ này, chúng ta đã tạo một kiểu Greeting mà phải luôn bắt đầu bằng "Hello, " và kết thúc bằng "!". Phần ${string} có nghĩa là chúng ta có thể đặt bất kỳ chuỗi nào giữa hai phần này. Nó giống như có một mẫu thẻ chúc mừng mà bạn chỉ có thể thay đổi tên.

Ví dụ 2: Kết hợp các chuỗi văn bản

type Color = "red" | "blue" | "green";
type Size = "small" | "medium" | "large";

type TShirt = `${Size}-${Color}`;

let myShirt: TShirt = "medium-blue";  // Đây là hợp lệ
let invalidShirt: TShirt = "tiny-yellow";  // Đây sẽ gây ra lỗi

Ở đây, chúng ta đang tạo một kiểu TShirt bằng cách kết hợp hai kiểu khác: Size và Color. Điều này cho phép chúng ta tạo ra các kết hợp hợp lệ như "small-red" hoặc "large-green", nhưng ngăn cản các kết hợp không hợp lệ như "tiny-yellow".

Ví dụ 3: Sử dụng số

type Coordinate = `${number},${number}`;

let point: Coordinate = "10,20";  // Đây là hợp lệ
let invalidPoint: Coordinate = "10,20,30";  // Đây sẽ gây ra lỗi

Trong ví dụ này, chúng ta sử dụng number thay vì string. Điều này tạo ra một kiểu đại diện cho một tọa độ 2D. Nó phải là hai số được phân tách bằng dấu phẩy.

Ví dụ 4: Mẫu phức tạp

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type ApiEndpoint = `/${string}`;

type ApiRoute = `${HttpMethod} ${ApiEndpoint}`;

let validRoute: ApiRoute = "GET /users";
let anotherValidRoute: ApiRoute = "POST /update-profile";
let invalidRoute: ApiRoute = "PATCH /items";  // Đây sẽ gây ra lỗi

Ví dụ này cho thấy cách chúng ta có thể tạo ra các kiểu phức tạp hơn. Chúng ta đang định nghĩa một kiểu ApiRoute kết hợp một phương thức HTTP với một điểm cuối. Điều này đảm bảo rằng các route API của chúng ta luôn theo một định dạng cụ thể.

Ví dụ 5: Chỉnh sửa chữ hoa và thường

type Greeting = "hello" | "hi" | "hey";
type ShoutingGreeting = Uppercase<Greeting>;
type WhisperingGreeting = Lowercase<Greeting>;

let loud: ShoutingGreeting = "HELLO";  // Đây là hợp lệ
let soft: WhisperingGreeting = "hi";   // Đây là hợp lệ
let invalid: ShoutingGreeting = "Hey"; // Đây sẽ gây ra lỗi

TypeScript cũng cung cấp các kiểu công cụ như Uppercase và Lowercase mà chúng ta có thể sử dụng với các kiểu Template Literal. Ví dụ này cho thấy cách chúng ta có thể tạo ra các kiểu mới là phiên bản chữ hoa hoặc chữ thường của các kiểu hiện có.

Bảng tóm tắt phương thức

Dưới đây là bảng tóm tắt các phương thức và công cụ chính mà chúng ta đã thảo luận:

Phương thức/Công cụ	Mô tả	Ví dụ
Mẫu cơ bản	Tạo ra một kiểu với phần Prefix/Suffix cố định và một phần thay đổi	type Greeting = 'Hello, ${string}!'
Kiểu Union	Kết hợp nhiều kiểu chuỗi văn bản	type Color = "red" | "blue" | "green"
Chữ hoa	Chuyển đổi một kiểu chuỗi văn bản thành chữ hoa	type Upper = Uppercase<"hello">
Chữ thường	Chuyển đổi một kiểu chuỗi văn bản thành chữ thường	type Lower = Lowercase<"HELLO">

Kết luận

Và thế là bạn đã có nó, các học sinh yêu quý của tôi! Chúng ta đã khám phá thế giới tuyệt vời của Template Literal Types trong TypeScript. Từ sử dụng cơ bản đến các ví dụ phức tạp hơn, bạn đã thấy cách tính năng này có thể giúp chúng ta tạo ra các định nghĩa kiểu chính xác và linh hoạt hơn.

Nhớ rằng, giống như học bất kỳ kỹ năng mới nào, việc thành thạo Template Literal Types đòi hỏi sự luyện tập. Đừng nản lòng nếu nó không ngay lập tức hiểu được - tôi đã thấy hàng trăm học sinh gặp khó khăn ban đầu nhưng sau đó có những khoảnh khắc "aha!" muộn hơn. Hãy tiếp tục thử nghiệm, cố gắng tạo ra các kiểu của riêng bạn, và quan trọng nhất, hãy vui vẻ với nó!

Trong những năm dạy học của mình, tôi đã thấy rằng những học sinh enjoy quá trình học tập thường là những người xuất sắc. Vì vậy, hãy nghĩ TypeScript như một công cụ mạnh mẽ trong bộ công cụ lập trình của bạn, và Template Literal Types như một cây kéo đa năng trong bộ công cụ đó - linh hoạt, chính xác và vô cùng hữu ích khi bạn biết cách sử dụng nó.

Bây giờ, hãy tiến lên và tạo ra những điều tuyệt vời với kiến thức mới của bạn. Và nhớ rằng, trong thế giới lập trình, giới hạn duy nhất là trí tưởng tượng của bạn (và có lẽ有时候 là compiler của bạn, nhưng đó là câu chuyện khác). Chúc các bạn lập trình vui vẻ!

Credits: Image by storyset