Bài học theo mô-đun (2/2)
Các loại chữ và khẳng định
TypeScript cung cấp các công cụ nâng cao để thu hẹp các giá trị có thể có của các biến và buộc trình biên dịch nhận ra các loại cụ thể hơn khi cần thiết.
Các loại chữ
Kiểu chữ đại diện cho một giá trị duy nhất, chính xác (ví dụ: một chuỗi hoặc số cụ thể). Chúng thường được kết hợp với các loại công đoàn:
type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;
light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLightNhập xác nhận (as)
Đôi khi bạn có thông tin về một kiểu mà TypeScript không thể biết tại thời điểm biên dịch. Trong những trường hợp này, bạn có thể sử dụng xác nhận loại bằng từ khóa as:
const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;Xác nhận này cho trình biên dịch biết: "Hãy tin tôi, tôi biết phần tử này là HTMLCanvasElement". Nó không thực hiện bất kỳ kiểm tra hoặc chuyển đổi nào trong thời gian chạy; nó chỉ giúp kiểm tra loại.
Xác nhận hằng số (as const)
Khi chúng ta khai báo một đối tượng hoặc một mảng bằng const, TypeScript vẫn cho phép sửa đổi các thuộc tính bên trong của nó. Bằng cách thêm as const vào cuối, toàn bộ cấu trúc sẽ được cố định và chuyển sang chế độ chỉ đọc, chuyển đổi tất cả các thuộc tính thành kiểu chữ chính xác của chúng:
const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-onlyCác loại chữ mẫu
Các loại chữ mẫu được xây dựng dựa trên các chuỗi mẫu JavaScript nhưng được sử dụng ở các vị trí loại. Chúng cho phép kết hợp nhiều loại chữ thành một:
type Size = 'small' | 'large';
type Color = 'red' | 'blue';
// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;Tiện ích chuỗi trong các kiểu chữ mẫu
TypeScript cung cấp các loại tiện ích đặc biệt để thao tác các ký tự trong các Loại chữ mẫu:
Capitalize<StringType>: Viết hoa chữ cái đầu tiên của chuỗi.Uncapitalize<StringType>: Bỏ viết hoa chữ cái đầu tiên của chuỗi.Uppercase<StringType>: Chuyển toàn bộ chuỗi thành chữ hoa.Lowercase<StringType>: Chuyển toàn bộ chuỗi thành chữ thường.
type ActionType = 'click' | 'hover';
// Generates: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;Hãy tự mình thử
Bài tập 1: Phương hướng Liên hiệp
Xác định một kiểu chữ có tên Direction chỉ chấp nhận các chuỗi 'lên', 'xuống', 'trái' hoặc 'phải'. Sau đó khai báo một hàm có tên move(dir: Direction): chuỗi trả về chuỗi 'Di chuyển ' theo sau là hướng đã nhận.
Hiển thị gợi ý
Trước tiên hãy xác định bí danh loại với bốn tùy chọn cách nhau bởi dấu |, sau đó khai báo hàm di chuyển chú thích tham số và kiểu trả về.
Giải pháp khả dụng sau 3 lần thử
Bài tập 2: Khẳng định trên JSON.parse
Hàm JSON.parse trả về bất kỳ loại nào theo mặc định. Sửa đổi hàm parseUser để kết quả của JSON.parse(json) được xác nhận là loại { username: string } bằng cách sử dụng từ khóa as.
Hiển thị gợi ý
Thêm 'as { username: string }' ngay sau lệnh gọi JSON.parse(json).
Giải pháp khả dụng sau 3 lần thử
Bài tập 3: Mẫu chữ cho sự kiện
Với các loại Trạng thái và Hành động, hãy xác định loại chuỗi mẫu có tên Sự kiện ở định dạng 'Trạng thái-Hành động' (ví dụ: 'nhấp chuột mở').
Hiển thị gợi ý
Sử dụng dấu ngược lại để xác định loại và cú pháp ${Status}-${Action} bên trong.
Giải pháp khả dụng sau 3 lần thử
Bài tập 4: Mẫu chữ viết hoa
Xác định loại sự kiện theo nghĩa đen Sự kiện có thể là 'nhấp chuột' hoặc 'di chuột'. Sau đó, sử dụng Loại chữ mẫu để khai báo một loại EventHandler biểu thị các chuỗi ở định dạng theo sau là tên sự kiện viết hoa (ví dụ: 'onClick' hoặc 'onHover').
Hiển thị gợi ý
Sử dụng Capitalize<Event> bên trong chữ mẫu để viết hoa chữ cái đầu tiên của sự kiện.
Giải pháp khả dụng sau 3 lần thử