M

MLOG

Tiếng Việt

Khám phá sâu về các kiểu template literal và tiện ích thao tác chuỗi mạnh mẽ của TypeScript để xây dựng các ứng dụng an toàn, ổn định cho môi trường phát triển toàn cầu.

Mẫu Chuỗi Template trong TypeScript: Khai Phá Các Kiểu Thao Tác Chuỗi Nâng Cao

Trong bối cảnh phát triển phần mềm rộng lớn và không ngừng thay đổi, sự chính xác và an toàn kiểu là tối quan trọng. TypeScript, một tập hợp con của JavaScript, đã nổi lên như một công cụ quan trọng để xây dựng các ứng dụng có khả năng mở rộng và dễ bảo trì, đặc biệt khi làm việc với các đội ngũ toàn cầu đa dạng. Mặc dù sức mạnh cốt lõi của TypeScript nằm ở khả năng định kiểu tĩnh, một lĩnh vực thường bị đánh giá thấp là cách xử lý chuỗi tinh vi của nó, đặc biệt là thông qua "kiểu template literal".

Hướng dẫn toàn diện này sẽ đi sâu vào cách TypeScript trao quyền cho các nhà phát triển để định nghĩa, thao tác và xác thực các mẫu chuỗi tại thời điểm biên dịch, dẫn đến các codebase mạnh mẽ và ít lỗi hơn. Chúng ta sẽ khám phá các khái niệm nền tảng, giới thiệu các kiểu tiện ích mạnh mẽ, và trình bày các ứng dụng thực tế có thể cải thiện đáng kể quy trình phát triển trong bất kỳ dự án quốc tế nào. Đến cuối bài viết này, bạn sẽ hiểu cách tận dụng các tính năng nâng cao này của TypeScript để xây dựng các hệ thống chính xác và dễ dự đoán hơn.

Hiểu về Template Literals: Nền tảng cho An toàn Kiểu

Trước khi đi sâu vào phép màu ở cấp độ kiểu, chúng ta hãy xem lại ngắn gọn về template literals của JavaScript (được giới thiệu trong ES6), vốn là cơ sở cú pháp cho các kiểu chuỗi nâng cao của TypeScript. Template literals được bao bọc bởi dấu backtick (` `) và cho phép nhúng các biểu thức (${expression}) và chuỗi nhiều dòng, mang lại một cách xây dựng chuỗi tiện lợi và dễ đọc hơn so với việc nối chuỗi truyền thống.

Cú pháp và Cách sử dụng Cơ bản trong JavaScript/TypeScript

Hãy xem xét một lời chào đơn giản:

// JavaScript / TypeScript


const userName = "Alice";


const age = 30;


const greeting = `Hello, ${userName}! You are ${age} years old. Welcome to our global platform.`;


console.log(greeting); // Kết quả: "Hello, Alice! You are 30 years old. Welcome to our global platform."

Trong ví dụ này, ${userName} và ${age} là các biểu thức được nhúng. TypeScript suy luận kiểu của greeting là string. Mặc dù đơn giản, cú pháp này rất quan trọng vì các kiểu template literal của TypeScript phản ánh nó, cho phép bạn tạo ra các kiểu đại diện cho các mẫu chuỗi cụ thể thay vì chỉ là các chuỗi chung chung.

Kiểu Chuỗi Ký tự (String Literal Types): Những Viên gạch Nền tảng cho Sự Chính xác

TypeScript đã giới thiệu các kiểu chuỗi ký tự, cho phép bạn chỉ định rằng một biến chỉ có thể giữ một giá trị chuỗi cụ thể, chính xác. Điều này cực kỳ hữu ích để tạo ra các ràng buộc kiểu rất cụ thể, hoạt động gần giống như một enum nhưng với sự linh hoạt của việc biểu diễn chuỗi trực tiếp.

// TypeScript


type Status = "pending" | "success" | "failed";



function updateOrderStatus(orderId: string, status: Status) {


  if (status === "success") {


    console.log(`Order ${orderId} has been successfully processed.`);


  } else if (status === "pending") {


    console.log(`Order ${orderId} is awaiting processing.`);


  } else {


    console.log(`Order ${orderId} has failed to process.`);


  }


}



updateOrderStatus("ORD-123", "success"); // Hợp lệ


// updateOrderStatus("ORD-456", "in-progress"); // Lỗi kiểu: Đối số kiểu '"in-progress"' không thể gán cho tham số kiểu 'Status'.


// updateOrderStatus("ORD-789", "succeeded"); // Lỗi kiểu: 'succeeded' không phải là một trong các kiểu ký tự.

Khái niệm đơn giản này tạo thành nền tảng để định nghĩa các mẫu chuỗi phức tạp hơn vì nó cho phép chúng ta xác định chính xác các phần ký tự của các kiểu template literal. Nó đảm bảo rằng các giá trị chuỗi cụ thể được tuân thủ, điều này vô giá để duy trì tính nhất quán trên các module hoặc dịch vụ khác nhau trong một ứng dụng lớn, phân tán.

Giới thiệu Kiểu Template Literal của TypeScript (TS 4.1+)

Cuộc cách mạng thực sự trong các kiểu thao tác chuỗi đã đến với sự ra đời của "Kiểu Template Literal" trong TypeScript 4.1. Tính năng này cho phép bạn định nghĩa các kiểu khớp với các mẫu chuỗi cụ thể, cho phép xác thực và suy luận kiểu mạnh mẽ tại thời điểm biên dịch dựa trên thành phần chuỗi. Điều quan trọng là, đây là các kiểu hoạt động ở cấp độ kiểu, khác biệt với việc xây dựng chuỗi lúc chạy của template literals trong JavaScript, mặc dù chúng chia sẻ cùng một cú pháp.

Một kiểu template literal có cú pháp tương tự như một template literal lúc chạy, nhưng nó hoạt động hoàn toàn trong hệ thống kiểu. Nó cho phép kết hợp các kiểu chuỗi ký tự với các trình giữ chỗ cho các kiểu khác (như string, number, boolean, bigint) để tạo thành các kiểu chuỗi ký tự mới. Điều này có nghĩa là TypeScript có thể hiểu và xác thực định dạng chuỗi chính xác, ngăn chặn các vấn đề như định danh sai định dạng hoặc các khóa không được chuẩn hóa.

Cú pháp Kiểu Template Literal Cơ bản

Chúng ta sử dụng dấu backtick (` `) và các trình giữ chỗ (${Type}) trong một định nghĩa kiểu:

// TypeScript


type UserPrefix = "user";


type ItemPrefix = "item";


type ResourceId = `${UserPrefix | ItemPrefix}_${string}`;



let userId: ResourceId = "user_12345"; // Hợp lệ: Khớp với "user_${string}"


let itemId: ResourceId = "item_ABC-XYZ"; // Hợp lệ: Khớp với "item_${string}"


// let invalidId: ResourceId = "product_789"; // Lỗi kiểu: Kiểu '"product_789"' không thể gán cho kiểu '"user_${string}" | "item_${string}"'.


// Lỗi này được phát hiện tại thời điểm biên dịch, không phải lúc chạy, giúp ngăn ngừa một lỗi tiềm ẩn.

Trong ví dụ này, ResourceId là một union của hai kiểu template literal: "user_${string}" và "item_${string}". Điều này có nghĩa là bất kỳ chuỗi nào được gán cho ResourceId phải bắt đầu bằng "user_" hoặc "item_", theo sau là bất kỳ chuỗi nào. Điều này cung cấp một sự đảm bảo ngay lập tức tại thời điểm biên dịch về định dạng của các ID của bạn, đảm bảo tính nhất quán trên một ứng dụng lớn hoặc một nhóm phân tán.

Sức mạnh của infer với Kiểu Template Literal

Một trong những khía cạnh mạnh mẽ nhất của các kiểu template literal, khi kết hợp với các kiểu có điều kiện, là khả năng suy luận (infer) các phần của mẫu chuỗi. Từ khóa infer cho phép bạn nắm bắt một phần của chuỗi khớp với một trình giữ chỗ, làm cho nó có sẵn như một biến kiểu mới trong kiểu có điều kiện. Điều này cho phép khớp mẫu và trích xuất tinh vi trực tiếp trong các định nghĩa kiểu của bạn.

// TypeScript


type GetPrefix = T extends `${infer Prefix}_${string}` ? Prefix : never;



type UserType = GetPrefix<"user_data_123">


// UserType là "user"



type ItemType = GetPrefix<"item_details_XYZ">


// ItemType là "item"



type FallbackPrefix = GetPrefix<"just_a_string">


// FallbackPrefix là "just" (vì "just_a_string" khớp với `${infer Prefix}_${string}`)



type NoMatch = GetPrefix<"simple_string_without_underscore">


// NoMatch là "simple_string_without_underscore" (vì mẫu yêu cầu ít nhất một dấu gạch dưới)


// Chỉnh sửa: Mẫu `${infer Prefix}_${string}` có nghĩa là "bất kỳ chuỗi nào, theo sau là dấu gạch dưới, theo sau là bất kỳ chuỗi nào".


// Nếu "simple_string_without_underscore" không chứa dấu gạch dưới, nó không khớp với mẫu này.


// Do đó, NoMatch sẽ là `never` trong trường hợp này nếu nó thực sự không có dấu gạch dưới.


// Ví dụ trước của tôi đã không chính xác về cách `infer` hoạt động với các phần tùy chọn. Hãy sửa lại.



// Một ví dụ GetPrefix chính xác hơn:


type GetLeadingPart = T extends `${infer PartA}_${infer PartB}` ? PartA : T;


type UserPart = GetLeadingPart<"user_data">


// UserPart là "user"


type SinglePart = GetLeadingPart<"alone">


// SinglePart là "alone" (không khớp với mẫu có dấu gạch dưới, vì vậy nó trả về T)



// Hãy tinh chỉnh cho các tiền tố đã biết cụ thể


type KnownCategory = "product" | "order" | "customer";


type ExtractCategory = T extends `${infer Category extends KnownCategory}_${string}` ? Category : never;



type MyProductCategory = ExtractCategory<"product_details_001">


// MyProductCategory là "product"


type MyCustomerCategory = ExtractCategory<"customer_profile_abc">


// MyCustomerCategory là "customer"


type UnknownCategory = ExtractCategory<"vendor_item_xyz">


// UnknownCategory là never (vì "vendor" không có trong KnownCategory)

Từ khóa infer, đặc biệt khi được kết hợp với các ràng buộc (infer P extends KnownPrefix), cực kỳ mạnh mẽ để phân tích và xác thực các mẫu chuỗi phức tạp ở cấp độ kiểu. Điều này cho phép tạo ra các định nghĩa kiểu rất thông minh có thể phân tích và hiểu các phần của một chuỗi giống như một trình phân tích cú pháp lúc chạy, nhưng với lợi ích bổ sung là an toàn tại thời điểm biên dịch và tự động hoàn thành mạnh mẽ.

Các Kiểu Tiện ích Thao tác Chuỗi Nâng cao (TS 4.1+)

Cùng với các kiểu template literal, TypeScript 4.1 cũng giới thiệu một bộ các kiểu tiện ích thao tác chuỗi nội tại. Các kiểu này cho phép bạn biến đổi các kiểu chuỗi ký tự thành các kiểu chuỗi ký tự khác, cung cấp khả năng kiểm soát vô song đối với việc viết hoa/thường và định dạng chuỗi ở cấp độ kiểu. Điều này đặc biệt có giá trị để thực thi các quy ước đặt tên nghiêm ngặt trên các codebase và đội ngũ đa dạng, bắc cầu qua các khác biệt về phong cách tiềm năng giữa các mô hình lập trình hoặc sở thích văn hóa khác nhau.

Các tiện ích này cực kỳ hữu ích để thực thi các quy ước đặt tên, chuyển đổi dữ liệu API, hoặc làm việc với các phong cách đặt tên đa dạng thường thấy trong các đội ngũ phát triển toàn cầu, đảm bảo tính nhất quán cho dù một thành viên trong nhóm ưa thích camelCase, PascalCase, snake_case, hay kebab-case.

Ví dụ về Các Kiểu Tiện ích Thao tác Chuỗi

// TypeScript


type ProductName = "global_product_identifier";



type UppercaseProductName = Uppercase;


// UppercaseProductName là "GLOBAL_PRODUCT_IDENTIFIER"



type LowercaseServiceName = Lowercase<"SERVICE_CLIENT_API">


// LowercaseServiceName là "service_client_api"



type FunctionName = "initConnection";


type CapitalizedFunctionName = Capitalize;


// CapitalizedFunctionName là "InitConnection"



type ClassName = "UserDataProcessor";


type UncapitalizedClassName = Uncapitalize;


// UncapitalizedClassName là "userDataProcessor"

Kết hợp Kiểu Template Literal với Các Kiểu Tiện ích

Sức mạnh thực sự xuất hiện khi các tính năng này được kết hợp. Bạn có thể tạo ra các kiểu yêu cầu cách viết hoa/thường cụ thể hoặc tạo ra các kiểu mới dựa trên các phần đã được biến đổi của các kiểu chuỗi ký tự hiện có, cho phép các định nghĩa kiểu linh hoạt và mạnh mẽ.

// TypeScript



type HttpMethod = "get" | "post" | "put" | "delete";


type EntityType = "User" | "Product" | "Order";



// Ví dụ 1: Tên hành động endpoint REST API an toàn về kiểu (ví dụ: GET_USER, POST_PRODUCT)


type ApiAction = `${Uppercase}_${Uppercase}`;



let getUserAction: ApiAction = "GET_USER";


let createProductAction: ApiAction = "POST_PRODUCT";


// let invalidAction: ApiAction = "get_user"; // Lỗi kiểu: Không khớp cách viết hoa/thường cho 'get' và 'user'.


// let unknownAction: ApiAction = "DELETE_REPORT"; // Lỗi kiểu: 'REPORT' không có trong EntityType.



// Ví dụ 2: Tạo tên sự kiện component dựa trên quy ước (ví dụ: "OnSubmitForm", "OnClickButton")


type ComponentName = "Form" | "Button" | "Modal";


type EventTrigger = "submit" | "click" | "close" | "change";



type ComponentEvent = `On${Capitalize}${ComponentName}`;


// ComponentEvent là "OnSubmitForm" | "OnClickForm" | ... | "OnChangeModal"



let formSubmitEvent: ComponentEvent = "OnSubmitForm";


let buttonClickEvent: ComponentEvent = "OnClickButton";


// let modalOpenEvent: ComponentEvent = "OnOpenModal"; // Lỗi kiểu: 'open' không có trong EventTrigger.



// Ví dụ 3: Định nghĩa tên biến CSS với một tiền tố cụ thể và chuyển đổi sang camelCase


type CssVariableSuffix = "primaryColor" | "secondaryBackground" | "fontSizeBase";


type CssVariableName = `--app-${Uncapitalize}`;


// CssVariableName là "--app-primaryColor" | "--app-secondaryBackground" | "--app-fontSizeBase"



let colorVar: CssVariableName = "--app-primaryColor";


// let invalidVar: CssVariableName = "--app-PrimaryColor"; // Lỗi kiểu: Không khớp cách viết hoa/thường cho 'PrimaryColor'.

Ứng dụng Thực tế trong Phát triển Phần mềm Toàn cầu

Sức mạnh của các kiểu thao tác chuỗi trong TypeScript vượt xa các ví dụ lý thuyết. Chúng mang lại những lợi ích hữu hình cho việc duy trì tính nhất quán, giảm thiểu lỗi và cải thiện trải nghiệm của nhà phát triển, đặc biệt trong các dự án quy mô lớn có sự tham gia của các đội ngũ phân tán ở các múi giờ và nền văn hóa khác nhau. Bằng cách mã hóa các mẫu chuỗi, các đội có thể giao tiếp hiệu quả hơn thông qua chính hệ thống kiểu, giảm bớt sự mơ hồ và hiểu lầm thường phát sinh trong các dự án phức tạp.

1. Định nghĩa Endpoint API và Tạo Client An toàn về Kiểu

Xây dựng các API client mạnh mẽ là rất quan trọng đối với các kiến trúc microservice hoặc khi tích hợp với các dịch vụ bên ngoài. Với các kiểu template literal, bạn có thể định nghĩa các mẫu chính xác cho các endpoint API của mình, đảm bảo rằng các nhà phát triển xây dựng các URL chính xác và các kiểu dữ liệu mong đợi được tuân thủ. Điều này chuẩn hóa cách các cuộc gọi API được thực hiện và ghi nhận trên toàn tổ chức.

// TypeScript



type BaseUrl = "https://api.mycompany.com";


type ApiVersion = "v1" | "v2";


type Resource = "users" | "products" | "orders";


type UserPathSegment = "profile" | "settings" | "activity";


type ProductPathSegment = "details" | "inventory" | "reviews";



// Định nghĩa các đường dẫn endpoint khả thi với các mẫu cụ thể


type EndpointPath = 


  `${Resource}` | 


  `${Resource}/${string}` | 


  `users/${string}/${UserPathSegment}` | 


  `products/${string}/${ProductPathSegment}`;



// Kiểu URL API đầy đủ kết hợp base, version và path


type ApiUrl = `${BaseUrl}/${ApiVersion}/${EndpointPath}`;



function fetchApiData(url: ApiUrl) {


  console.log(`Attempting to fetch data from: ${url}`);


  // ... logic fetch mạng thực tế sẽ ở đây ...


  return Promise.resolve(`Data from ${url}`);


}



fetchApiData("https://api.mycompany.com/v1/users"); // Hợp lệ: Danh sách tài nguyên cơ bản


fetchApiData("https://api.mycompany.com/v2/products/PROD-001/details"); // Hợp lệ: Chi tiết sản phẩm cụ thể


fetchApiData("https://api.mycompany.com/v1/users/user-123/profile"); // Hợp lệ: Hồ sơ người dùng cụ thể



// Lỗi kiểu: Đường dẫn không khớp với các mẫu đã định nghĩa hoặc base URL/version sai


// fetchApiData("https://api.mycompany.com/v3/orders"); // 'v3' không phải là ApiVersion hợp lệ


// fetchApiData("https://api.mycompany.com/v1/users/user-123/dashboard"); // 'dashboard' không có trong UserPathSegment


// fetchApiData("https://api.mycompany.com/v1/reports"); // 'reports' không phải là Resource hợp lệ

Cách tiếp cận này cung cấp phản hồi ngay lập tức trong quá trình phát triển, ngăn chặn các lỗi tích hợp API phổ biến. Đối với các đội ngũ phân tán toàn cầu, điều này có nghĩa là ít thời gian hơn để gỡ lỗi các URL bị cấu hình sai và nhiều thời gian hơn để xây dựng các tính năng, vì hệ thống kiểu hoạt động như một hướng dẫn phổ quát cho người tiêu dùng API.

2. Quy ước Đặt tên Sự kiện An toàn về Kiểu

Trong các ứng dụng lớn, đặc biệt là những ứng dụng có microservice hoặc tương tác UI phức tạp, một chiến lược đặt tên sự kiện nhất quán là rất quan trọng để giao tiếp và gỡ lỗi rõ ràng. Các kiểu template literal có thể thực thi các mẫu này, đảm bảo rằng nhà sản xuất và người tiêu dùng sự kiện tuân thủ một hợp đồng thống nhất.

// TypeScript



type EventDomain = "USER" | "PRODUCT" | "ORDER" | "ANALYTICS";


type EventAction = "CREATED" | "UPDATED" | "DELETED" | "VIEWED" | "SENT" | "RECEIVED";


type EventTarget = "ACCOUNT" | "ITEM" | "FULFILLMENT" | "REPORT";



// Định nghĩa một định dạng tên sự kiện chuẩn: DOMAIN_ACTION_TARGET (ví dụ: USER_CREATED_ACCOUNT)


type SystemEvent = `${Uppercase}_${Uppercase}_${Uppercase}`;



function publishEvent(eventName: SystemEvent, payload: unknown) {


  console.log(`Publishing event: "${eventName}" with payload:`, payload);


  // ... cơ chế xuất bản sự kiện thực tế (ví dụ: hàng đợi tin nhắn) ...


}



publishEvent("USER_CREATED_ACCOUNT", { userId: "uuid-123", email: "test@example.com" }); // Hợp lệ


publishEvent("PRODUCT_UPDATED_ITEM", { productId: "item-456", newPrice: 99.99 }); // Hợp lệ



// Lỗi kiểu: Tên sự kiện không khớp với mẫu yêu cầu


// publishEvent("user_created_account", {}); // Sai cách viết hoa/thường


// publishEvent("ORDER_SHIPPED", {}); // Thiếu hậu tố target, 'SHIPPED' không có trong EventAction


// publishEvent("ADMIN_LOGGED_IN", {}); // 'ADMIN' không phải là EventDomain được định nghĩa

Điều này đảm bảo tất cả các sự kiện tuân thủ một cấu trúc được xác định trước, làm cho việc gỡ lỗi, giám sát và giao tiếp giữa các nhóm trở nên mượt mà hơn đáng kể, bất kể ngôn ngữ mẹ đẻ hay sở thích phong cách viết mã của nhà phát triển.

3. Thực thi Mẫu Lớp Tiện ích CSS trong Phát triển UI

Đối với các hệ thống thiết kế và các framework CSS ưu tiên tiện ích, quy ước đặt tên cho các lớp là rất quan trọng để có thể bảo trì và mở rộng. TypeScript có thể giúp thực thi những điều này trong quá trình phát triển, giảm khả năng các nhà thiết kế và nhà phát triển sử dụng tên lớp không nhất quán.

// TypeScript



type SpacingSize = "xs" | "sm" | "md" | "lg" | "xl";


type Direction = "top" | "bottom" | "left" | "right" | "x" | "y" | "all";


type SpacingProperty = "margin" | "padding";



// Ví dụ: Lớp cho margin hoặc padding theo một hướng cụ thể với một kích thước cụ thể


// ví dụ: "m-t-md" (margin-top-medium) hoặc "p-x-lg" (padding-x-large)


type SpacingClass = `${Lowercase}-${Lowercase}-${Lowercase}`;



function applyCssClass(elementId: string, className: SpacingClass) {


  const element = document.getElementById(elementId);


  if (element) {


    element.classList.add(className);
    console.log(`Applied class '${className}' to element '${elementId}'`);


  } else {


    console.warn(`Element with ID '${elementId}' not found.`);


  }


}



applyCssClass("my-header", "m-t-md"); // Hợp lệ


applyCssClass("product-card", "p-x-lg"); // Hợp lệ


applyCssClass("main-content", "m-all-xl"); // Hợp lệ



// Lỗi kiểu: Lớp không tuân thủ mẫu


// applyCssClass("my-footer", "margin-top-medium"); // Dấu phân cách sai và dùng từ đầy đủ thay vì viết tắt


// applyCssClass("sidebar", "m-center-sm"); // 'center' không phải là một Direction literal hợp lệ

Mẫu này khiến việc vô tình sử dụng một lớp CSS không hợp lệ hoặc sai chính tả trở nên bất khả thi, nâng cao tính nhất quán của UI và giảm các lỗi trực quan trên giao diện người dùng của sản phẩm, đặc biệt khi có nhiều nhà phát triển đóng góp vào logic tạo kiểu.

4. Quản lý và Xác thực Khóa Quốc tế hóa (i18n)

Trong các ứng dụng toàn cầu, việc quản lý các khóa bản địa hóa có thể trở nên cực kỳ phức tạp, thường liên quan đến hàng ngàn mục nhập trên nhiều ngôn ngữ. Các kiểu template literal có thể giúp thực thi các mẫu khóa phân cấp hoặc mô tả, đảm bảo rằng các khóa nhất quán và dễ bảo trì hơn.

// TypeScript



type PageKey = "home" | "dashboard" | "settings" | "auth";


type SectionKey = "header" | "footer" | "sidebar" | "form" | "modal" | "navigation";


type MessageType = "label" | "placeholder" | "button" | "error" | "success" | "heading";



// Định nghĩa một mẫu cho các khóa i18n: page.section.messageType.descriptor


type I18nKey = `${PageKey}.${SectionKey}.${MessageType}.${string}`;



function translate(key: I18nKey, params?: Record): string {


  console.log(`Translating key: "${key}" with params:`, params);


  // Trong một ứng dụng thực tế, điều này sẽ liên quan đến việc lấy dữ liệu từ một dịch vụ dịch thuật hoặc một từ điển cục bộ


  let translatedString = `[${key}_translated]`;


  if (params) {


    for (const p in params) {


      translatedString = translatedString.replace(`{${p}}`, params[p]);


    }


  }


  return translatedString;


}



console.log(translate("home.header.heading.welcomeUser", { user: "Global Traveler" })); // Hợp lệ


console.log(translate("dashboard.form.label.username")); // Hợp lệ


console.log(translate("auth.modal.button.login")); // Hợp lệ



// Lỗi kiểu: Khóa không khớp với mẫu đã định nghĩa


// console.log(translate("home_header_greeting_welcome")); // Dấu phân cách sai (dùng dấu gạch dưới thay vì dấu chấm)


// console.log(translate("users.profile.label.email")); // 'users' không phải là PageKey hợp lệ


// console.log(translate("settings.navbar.button.save")); // 'navbar' không phải là SectionKey hợp lệ (nên là 'navigation' hoặc 'sidebar')

Điều này đảm bảo rằng các khóa bản địa hóa được cấu trúc một cách nhất quán, đơn giản hóa quá trình thêm các bản dịch mới và duy trì các bản dịch hiện có trên các ngôn ngữ và địa phương đa dạng. Nó ngăn chặn các lỗi phổ biến như lỗi chính tả trong các khóa, có thể dẫn đến các chuỗi chưa được dịch trong UI, một trải nghiệm khó chịu cho người dùng quốc tế.

Các Kỹ thuật Nâng cao với infer

Sức mạnh thực sự của từ khóa infer tỏa sáng trong các kịch bản phức tạp hơn, nơi bạn cần trích xuất nhiều phần của một chuỗi, kết hợp chúng, hoặc biến đổi chúng một cách linh hoạt. Điều này cho phép phân tích cú pháp ở cấp độ kiểu rất linh hoạt và mạnh mẽ.

Trích xuất Nhiều Phân đoạn (Phân tích Đệ quy)

Bạn có thể sử dụng infer một cách đệ quy để phân tích các cấu trúc chuỗi phức tạp, chẳng hạn như đường dẫn hoặc số phiên bản:

// TypeScript



type SplitPath = 


  T extends `${infer Head}/${infer Tail}`


    ? [Head, ...SplitPath] 


    : T extends '' ? [] : [T];



type PathSegments1 = SplitPath<"api/v1/users/123">


// PathSegments1 là ["api", "v1", "users", "123"]



type PathSegments2 = SplitPath<"product-images/large">


// PathSegments2 là ["product-images", "large"]



type SingleSegment = SplitPath<"root">


// SingleSegment là ["root"]



type EmptySegments = SplitPath<"">


// EmptySegments là []

Kiểu điều kiện đệ quy này minh họa cách bạn có thể phân tích một đường dẫn chuỗi thành một tuple các phân đoạn của nó, cung cấp khả năng kiểm soát kiểu chi tiết đối với các tuyến đường URL, đường dẫn hệ thống tệp hoặc bất kỳ định danh nào khác được phân tách bằng dấu gạch chéo. Điều này cực kỳ hữu ích để tạo ra các hệ thống định tuyến hoặc các lớp truy cập dữ liệu an toàn về kiểu.

Biến đổi các Phần được Suy luận và Tái cấu trúc

Bạn cũng có thể áp dụng các kiểu tiện ích cho các phần được suy luận và tái cấu trúc một kiểu chuỗi ký tự mới:

// TypeScript



type ConvertToCamelCase = 


  T extends `${infer FirstPart}_${infer SecondPart}`


    ? `${Uncapitalize}${Capitalize}`


    : Uncapitalize;



type UserDataField = ConvertToCamelCase<"user_id">


// UserDataField là "userId"



type OrderStatusField = ConvertToCamelCase<"order_status">


// OrderStatusField là "orderStatus"



type SingleWordField = ConvertToCamelCase<"firstName">


// SingleWordField là "firstName"



type RawApiField = 


  T extends `API_${infer Method}_${infer Resource}`


    ? `${Lowercase}-${Lowercase}`


    : never;



type GetUsersPath = RawApiField<"API_GET_USERS">


// GetUsersPath là "get-users"



type PostProductsPath = RawApiField<"API_POST_PRODUCTS">


// PostProductsPath là "post-products"


// type InvalidApiPath = RawApiField<"API_FETCH_DATA">; // Lỗi, vì nó không hoàn toàn khớp với cấu trúc 3 phần nếu `DATA` không phải là `Resource`


type InvalidApiFormat = RawApiField<"API_USERS">


// InvalidApiFormat là never (vì nó chỉ có hai phần sau API_ chứ không phải ba)

Điều này minh họa cách bạn có thể lấy một chuỗi tuân thủ một quy ước (ví dụ: snake_case từ một API) và tự động tạo ra một kiểu cho biểu diễn của nó trong một quy ước khác (ví dụ: camelCase cho ứng dụng của bạn), tất cả đều ở thời điểm biên dịch. Điều này vô giá để ánh xạ các cấu trúc dữ liệu bên ngoài sang các cấu trúc nội bộ mà không cần các khẳng định kiểu thủ công hoặc lỗi lúc chạy.

Thực tiễn Tốt nhất và những Lưu ý cho các Nhóm Toàn cầu

Mặc dù các kiểu thao tác chuỗi của TypeScript rất mạnh mẽ, việc sử dụng chúng một cách thận trọng là điều cần thiết. Dưới đây là một số thực tiễn tốt nhất để kết hợp chúng vào các dự án phát triển toàn cầu của bạn:

Kết luận

Các kiểu template literal của TypeScript, kết hợp với các tiện ích thao tác chuỗi nội tại như Uppercase, Lowercase, Capitalize, và Uncapitalize, đại diện cho một bước tiến đáng kể trong việc xử lý chuỗi an toàn về kiểu. Chúng biến đổi những gì từng là một mối quan tâm lúc chạy – định dạng và xác thực chuỗi – thành một sự đảm bảo tại thời điểm biên dịch, cải thiện cơ bản độ tin cậy của mã của bạn.

Đối với các nhóm phát triển toàn cầu làm việc trên các dự án phức tạp, hợp tác, việc áp dụng các mẫu này mang lại những lợi ích hữu hình và sâu sắc:

Bằng cách làm chủ các tính năng mạnh mẽ này, các nhà phát triển có thể tạo ra các ứng dụng linh hoạt, dễ bảo trì và dễ đoán hơn. Hãy nắm bắt các mẫu chuỗi template của TypeScript để nâng tầm thao tác chuỗi của bạn lên một cấp độ mới về an toàn kiểu và độ chính xác, cho phép các nỗ lực phát triển toàn cầu của bạn phát triển mạnh mẽ hơn với sự tự tin và hiệu quả cao hơn. Đây là một bước đi quan trọng hướng tới việc xây dựng các giải pháp phần mềm thực sự mạnh mẽ và có khả năng mở rộng trên toàn cầu.

Mẫu Chuỗi Template trong TypeScript: Khai Phá Các Kiểu Thao Tác Chuỗi Nâng Cao | MLOG