Cách đơn giản hóa mã TypeScript của bạn với 6 loại tiện ích cần thiết
TypeScript là một siêu bộ JavaScript cho phép bạn thêm kiểu gõ tĩnh vào cơ sở mã của mình. Với hệ thống kiểu mạnh mẽ, TypeScript cung cấp khả năng đọc mã được cải thiện và khả năng bắt lỗi trong thời gian biên dịch.
Một trong những khía cạnh có lợi nhất của TypeScript là các loại tiện ích tích hợp sẵn của nó, có thể đơn giản hóa nỗ lực viết mã của bạn và tiết kiệm thời gian phát triển quý giá. Hãy xem các loại tiện ích TypeScript cần biết này có thể giúp bạn viết mã an toàn một cách dễ dàng.
Mục Lục
1. Loại tiện ích một phần
Loại tiện ích Một phần của TypeScript cho phép bạn tạo bất kỳ thuộc tính nào của một đối tượng tùy chọn. Nó cho phép bạn tạo các đối tượng với một số thuộc tính có thể bị thiếu hoặc không xác định. Lấy ví dụ:
interface User {
name: string;
age: number;
email: string;
}
Sử dụng loại tiện ích Một phần, bạn có thể tạo một loại mới với tất cả các thuộc tính của Giao diện người dùng được đặt thành tùy chọn:
type OptionalUser = Partial<User>
Bây giờ, bạn có thể tạo một thể hiện của loại OptionalUser chỉ với một số thuộc tính được xác định:
const user: OptionalUser = { name: "John" };
Bạn có thể gặp các tình huống cần tạo một đối tượng với các thuộc tính tùy chọn nhất định. Điều này có thể hữu ích đặc biệt khi xây dựng các biểu mẫu có nhiều trường, vì không phải tất cả các trường đều có thể được yêu cầu và trong những trường hợp như vậy, một phần tiện ích có thể rất quan trọng.
2. Chọn loại tiện ích
Loại tiện ích Chọn của TypeScript có thể giúp bạn tạo một loại mới bằng cách chỉ chọn một tập hợp con các thuộc tính từ một loại hiện có. Nó rất hữu ích khi bạn cần thu hẹp một đối tượng lớn hơn thành một vài thuộc tính được yêu cầu hoặc nếu bạn muốn thực thi việc gõ nghiêm ngặt trên các thuộc tính mà bạn cần.
interface User {
location: string;
age: number;
email: string;
}type PersonWithoutEmail = Pick<User, 'location' | 'age'>;
const person: PersonWithoutEmail = {
location: 'USA',
age: 30
};
Trong ví dụ này, một giao diện có tên “Người dùng” xác định ba thuộc tính: email, tuổi và vị trí.
Bằng cách sử dụng loại tiện ích Chọn, bạn có thể trích xuất các thuộc tính “vị trí” và “tuổi” một cách chọn lọc từ giao diện Người dùng, dẫn đến việc tạo một loại mới gọi là “PersonWithoutEmail”.
Sau đó, bạn có thể tạo một phiên bản mới của loại “PersonWithoutEmail” và chỉ gán giá trị cho các thuộc tính “location” và “age”. Vì thuộc tính “email” đã bị bỏ qua trong loại này nên bạn không thể gán nó cho đối tượng.
Với loại tiện ích Chọn, bạn có thể tạo một loại mới chỉ kết hợp các thuộc tính mà bạn muốn. Điều này có thể giúp làm cho mã của bạn dễ đọc hơn và dễ làm việc hơn.
3. Loại tiện ích chỉ đọc
Loại chỉ đọc biểu thị rằng các thuộc tính của đối tượng là không thay đổi sau khi tạo. Loại này đảm bảo tính nhất quán của dữ liệu của đối tượng trong thời gian dài, dẫn đến việc xử lý mã mượt mà và an toàn hơn.
interface User {
readonly name: string;
readonly age: number;
readonly email: string;
}
Sử dụng loại tiện ích Chỉ đọc, bạn có thể tạo một loại mới với tất cả các thuộc tính Giao diện người dùng được chỉ định là chỉ đọc:
type ReadonlyUser = Readonly<User>
Bạn có thể chỉ định các giá trị thuộc tính khi tạo một phiên bản ReadonlyUser ::
const user: ReadonlyUser = {
name: "John",
age: 30,
email: "john@example.com"
};
Khi bạn đánh dấu các thuộc tính của một đối tượng là chỉ đọc, việc cố gắng sửa đổi các giá trị của các thuộc tính đó là không thể:
user.name = "Jane";
Loại Readonly đặc biệt quan trọng trong các tình huống mà bạn muốn đảm bảo rằng một đối tượng cụ thể không thay đổi, tuy nhiên nó được tham chiếu. Chẳng hạn, nếu bạn có một đối tượng chứa các cài đặt cấu hình quan trọng, bạn sẽ muốn đảm bảo rằng nó không bị thay đổi.
4. Loại tiện ích bắt buộc
Loại này đảm bảo rằng tất cả các thuộc tính thiết yếu của Đối tượng đều có mặt, trong khi loại Một phần mang lại sự linh hoạt hơn bằng cách cho phép bạn chỉ định một tập hợp con các thuộc tính trong khi để các thuộc tính khác là tùy chọn. Điều này có thể chứng minh lợi ích trong các tình huống mà một số thuộc tính có thể không cần thiết hoặc có thể thay đổi.
interface User {
name: string;
location: number;
address: string;
}
Bằng cách sử dụng loại tiện ích Bắt buộc, có thể tạo một loại mới kết hợp tất cả các thuộc tính Giao diện người dùng trong khi yêu cầu phải có từng thuộc tính này. Việc tạo một phiên bản Người dùng bắt buộc chỉ có thể thực hiện được khi tất cả các thuộc tính của nó đã được đặt đúng cách.
const user: RequiredUser = {
name: "John Doe",
location: "USA",
address: "Kansas 9745-0622"
};
Việc sử dụng loại tiện ích Bắt buộc đảm bảo rằng tất cả các thuộc tính bắt buộc đều có trong một đối tượng.
5. Bỏ qua loại tiện ích
Loại tiện ích Bỏ qua cho phép bạn tạo một loại mới bằng cách loại trừ các thuộc tính cụ thể khỏi một loại hiện có.
interface Person {
location: string;
age: number;
email: string;
}type PersonWithoutEmail = Omit<Person, 'email'>;
const person:PersonWithoutEmail = { location: "USA"; age : 30 };
Giao diện Người có ba thuộc tính: tuổi, vị trí và email. Loại PersonWithoutEmail sử dụng loại tiện ích Bỏ qua để bao gồm tất cả các thuộc tính của đối tượng Person, ngoại trừ email. Sau đó, bạn có thể tạo một phiên bản của loại mới này mà không cần chỉ định giá trị cho thuộc tính email.
Bạn nên nhớ rằng loại tiện ích Bỏ qua có những điểm tương đồng đáng kể với loại tiện ích Chọn, vì nó cho phép bạn tạo ra một loại mới chỉ sử dụng các thuộc tính mà bạn chỉ định.
6. Loại Tiện ích Ghi lại
Bạn có thể sử dụng loại tiện ích Bản ghi để xác định một loại đối tượng mà các khóa và giá trị có một loại cụ thể. Định nghĩa của nó là:
type Record<K extends keyof any, T> = { [P in K]: T;};
Điều này liên kết loại T với giá trị của mỗi khóa, trong khi K là sự kết hợp của các khóa thuộc bất kỳ loại nào. Đối tượng kết quả có loại thuộc tính P được đặt thành T.
Xem xét kịch bản của một loại đối tượng có khóa chuỗi và giá trị số. Trong trường hợp đó, bạn có thể áp dụng loại tiện ích Record như:
type MyRecord = Record<string, number>;const myObject: MyRecord = {
"foo": 1,
"bar": 2,
"baz": 3,
}
Ví dụ này chỉ định MyRecord là một loại đối tượng với các khóa chuỗi và giá trị số. Đối tượng myObject thể hiện một ví dụ về loại này, với các khóa “foo”, “bar” và “baz” được gán cho các giá trị tương ứng của chúng.
Hợp lý hóa mã với các loại tiện ích TypeScript
Bài viết này đã khám phá sức mạnh tuyệt đối của các loại tiện ích TypeScript – chúng có thể là tài sản quý giá khi nói đến việc hợp lý hóa mã của bạn và giúp quá trình phát triển nhanh hơn và hiệu quả hơn. Các loại tiện ích này và TypeScript nói chung có thể làm nên điều kỳ diệu để đảm bảo rằng mã của bạn luôn không có lỗi và tuân theo các cấu trúc cụ thể.