Jenis Utiliti dalam TypeScript

Artikel ini menjelaskan jenis utiliti dalam TypeScript.

YouTube Video

Jenis Utiliti dalam TypeScript

Jenis utiliti TypeScript ialah alat yang berguna untuk mencipta jenis baharu berdasarkan jenis yang sedia ada. Ini membolehkan definisi jenis yang lebih fleksibel dan meningkatkan penggunaan semula kod. Di sini, kami akan menerangkan jenis utiliti yang biasa digunakan secara terperinci dan membincangkan cara menggunakan setiap satunya dengan kod contoh.

Partial<T>

Partial<T> menjadikan semua sifat sesuatu jenis objek pilihan (mengizinkan undefined). Ia berguna apabila anda ingin menggunakan hanya beberapa sifat yang dimiliki jenis asal.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7function updateUser(user: Partial<User>) {
 8  console.log(user);
 9}
10
11updateUser({ name: "Alice" }); // Updates only 'name'

Penjelasan:

Dalam contoh di atas, menggunakan Partial<User> menjadikan semua sifat dalam jenis User pilihan. Oleh itu, dalam fungsi updateUser, anda boleh memproses hanya subset sifat yang diperlukan.

Required<T>

Required<T> menjadikan semua sifat, termasuk sifat pilihan, menjadi wajib. Ia digunakan apabila anda ingin menukar sifat pilihan kepada sifat wajib.

 1interface User {
 2  id: number;
 3  name?: string;
 4  age?: number;
 5}
 6
 7function createUser(user: Required<User>) {
 8  console.log(user);
 9}
10
11// createUser({ id: 1 }); // Error: 'name' and 'age' are required
12createUser({ id: 1, name: "Alice", age: 25 });

Penjelasan:

Dengan menggunakan Required<User>, sifat seperti name dan age dianggap sebagai wajib.

Readonly<T>

Readonly<T> menjadikan semua sifat dalam objek hanya dapat dibaca. Ini menghalang nilai dalam objek daripada diubah.

 1interface User {
 2  id: number;
 3  name: string;
 4}
 5
 6const user: Readonly<User> = {
 7  id: 1,
 8  name: "Alice"
 9};
10
11// user.id = 2; // Error: 'id' is read-only
12console.log(user);

Penjelasan:

Dengan menggunakan Readonly<T>, anda boleh melindungi sifat objek daripada diubah. Ia berkesan apabila anda ingin menghalang data daripada diubah secara tidak sengaja semasa pembangunan.

Record<K, T>

Record<K, T> mencipta jenis peta dengan jenis kunci dan nilai yang ditentukan. K ialah jenis untuk kunci (seperti string atau number), dan T ialah jenis bagi nilai-nilai.

 1type Roles = "admin" | "user" | "guest";
 2interface Permissions {
 3  read: boolean;
 4  write: boolean;
 5}
 6
 7const rolePermissions: Record<Roles, Permissions> = {
 8  admin: { read: true, write: true },
 9  user: { read: true, write: false },
10  guest: { read: false, write: false },
11};
12
13console.log(rolePermissions);

Penjelasan:

Record<K, T> berguna apabila anda ingin mentakrifkan pasangan kunci-nilai. Dalam contoh di atas, kebenaran ditakrifkan berdasarkan peranan pengguna.

Pick<T, K>

Pick<T, K> mengekstrak hanya sifat tertentu daripada jenis objek. Anda boleh mencipta jenis baharu dengan mengekstrak hanya sifat yang diperlukan.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5}
 6
 7type UserSummary = Pick<User, "id" | "name">;
 8
 9const summary: UserSummary = {
10  id: 1,
11  name: "Alice"
12};
13
14console.log(summary);

Penjelasan:

Dengan menggunakan Pick<T, K>, anda boleh mengekstrak sifat tertentu daripada jenis objek dan menjadikannya sebagai jenis baharu. Sebagai contoh, hanya id dan name yang diekstrak dalam contoh di atas.

Omit<T, K>

Omit<T, K> mengecualikan sifat tertentu daripada jenis objek. Ini adalah operasi yang bertentangan dengan Pick.

 1interface User {
 2  id: number;
 3  name: string;
 4  age: number;
 5  email: string;
 6}
 7
 8type UserWithoutEmail = Omit<User, "email">;
 9
10const userWithoutEmail: UserWithoutEmail = {
11  id: 1,
12  name: "Alice",
13  age: 25
14};
15
16console.log(userWithoutEmail);

Penjelasan:

Dengan menggunakan Omit<T, K>, anda boleh mencipta jenis baru dengan mengecualikan sifat tertentu. Dalam contoh di atas, sifat email dikecualikan.

Exclude<T, U>

Exclude<T, U> mencipta jenis baru dengan menghapuskan jenis U daripada jenis gabungan T. Ia digunakan apabila anda ingin menghapuskan jenis tertentu.

1type Status = "active" | "inactive" | "pending";
2type ExcludedStatus = Exclude<Status, "pending">;
3
4const status: ExcludedStatus = "active"; // "pending" is excluded, so it cannot be chosen
5console.log(status);

Penjelasan:

Dengan menggunakan Exclude<T, U>, anda boleh menghapuskan jenis yang tidak diperlukan dalam jenis gabungan. Dalam contoh di atas, kerana "pending" dikecualikan, hanya "active" atau "inactive" boleh dipilih.

Extract<T, U>

Extract<T, U> mengekstrak bahagian yang sepadan dengan jenis U dalam jenis gabungan T. Ia berguna apabila anda ingin mengekstrak hanya jenis tertentu.

1type Status = "active" | "inactive" | "pending";
2type ActiveStatus = Extract<Status, "active" | "pending">;
3
4const status: ActiveStatus = "active"; // "inactive" cannot be chosen
5console.log(status);

Penjelasan:

Extract<T, U> melaksanakan operasi yang bertentangan dengan Exclude. Dalam contoh di atas, hanya "active" dan "pending" boleh dipilih.

NonNullable<T>

NonNullable<T> mencipta jenis dengan null dan undefined dikecualikan. Ia berguna apabila anda ingin mengecualikan nilai ini daripada jenis pilihan.

1type UserName = string | null | undefined;
2type ValidUserName = NonNullable<UserName>;
3
4const name: ValidUserName = "Alice"; // null and undefined cannot be chosen
5console.log(name);

Penjelasan:

NonNullable<T> mengecualikan null dan undefined daripada jenis yang mengandungi mereka. Ini berguna apabila anda ingin memastikan bahawa nilai itu sememangnya wujud.

Kesimpulan

Jenis utiliti TypeScript adalah alat yang berkuasa untuk membuat definisi jenis lebih ringkas dan fleksibel. Memahami dan menggunakan jenis utiliti asas seperti Partial, Required, Readonly, Record, dan lain-lain dengan betul boleh meningkatkan kebolehgunaan semula dan keberlanjutan kod. Menguasai jenis-jenis ini membolehkan definisi jenis yang lebih mantap dan selamat, sekali gus memudahkan pembangunan yang cekap.

Operator keyof dalam TypeScript

Operator keyof dalam TypeScript digunakan untuk mengambil semua nama sifat dari jenis objek. Dengan menggunakan operator ini, anda boleh mendapatkan kunci jenis objek sebagai jenis union. Ini sangat berguna untuk menulis kod yang selamat jenis (type-safe).

Penggunaan Asas

1interface Person {
2    name: string;
3    age: number;
4    email: string;
5}
6
7// Use keyof to get the property names of Person
8type PersonKeys = keyof Person; // "name" | "age" | "email"

Contoh Penggunaan

1. Menggunakannya dalam Argumen Fungsi

   Anda boleh menggunakan keyof untuk menentukan fungsi yang mempunyai jenis berdasarkan ciri-ciri tertentu objek.

1function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
2    return obj[key];
3}
4
5const person: Person = { name: "Alice", age: 30, email: "alice@example.com" };
6const name = getProperty(person, "name"); // type is string
7const age = getProperty(person, "age");   // type is number

2. Meningkatkan Kekangan Jenis

   Dengan menggunakan keyof, anda boleh memastikan kunci yang dihantar ke fungsi disahkan semasa waktu kompilasi.

1// Passing an invalid property name results in an error
2const invalid = getProperty(person, "invalidKey"); // Error

Ringkasan

• Operator keyof digunakan untuk mendapatkan semua nama ciri jenis objek.
• Anda boleh mendapatkan nama ciri sebagai jenis union, mencapai kod yang selamat jenis.
• Dengan menggunakannya dalam argumen fungsi, anda boleh menghadkan fungsi untuk menerima hanya nama ciri yang sah.

Dengan cara ini, operator keyof meningkatkan keselamatan jenis dalam TypeScript dan membantu anda menulis kod yang lebih kukuh.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video