Tipe Utilitas di TypeScript

Artikel ini menjelaskan tentang tipe utilitas di TypeScript.

YouTube Video

Tipe Utilitas di TypeScript

Tipe utilitas TypeScript adalah alat yang nyaman untuk membuat tipe baru berdasarkan tipe yang sudah ada. Ini memungkinkan definisi tipe yang lebih fleksibel dan meningkatkan penggunaan ulang kode. Di sini, kami akan menjelaskan tipe utilitas yang umum digunakan secara mendetail dan membahas cara menggunakan masing-masing dengan contoh kode.

Partial<T>

Partial<T> membuat semua properti dari tipe objek menjadi opsional (memungkinkan undefined). Ini berguna saat Anda hanya ingin menggunakan beberapa properti dari tipe asli.

 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> membuat semua properti dari tipe User menjadi opsional. Oleh karena itu, dalam fungsi updateUser, Anda dapat hanya memberikan sebagian dari properti.

Required<T>

Required<T> membuat semua properti, termasuk yang opsional, menjadi wajib. Ini digunakan ketika Anda ingin mengubah properti yang opsional menjadi 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>, properti seperti name dan age akan dianggap wajib.

Readonly<T>

Readonly<T> membuat semua properti dari objek menjadi hanya-baca. Ini mencegah nilai dari objek untuk 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 dapat melindungi properti sebuah objek agar tidak diubah. Ini efektif saat Anda ingin mencegah data agar tidak sengaja dimodifikasi selama pengembangan.

Record<K, T>

Record<K, T> membuat tipe peta dengan tipe kunci dan nilai tertentu. K adalah tipe untuk kunci (seperti string atau number), dan T adalah tipe untuk 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 saat Anda ingin mendefinisikan pasangan kunci-nilai. Dalam contoh di atas, izin didefinisikan berdasarkan peran pengguna.

Pick<T, K>

Pick<T, K> hanya mengekstrak properti yang ditentukan dari tipe objek. Anda dapat membuat tipe baru dengan mengekstrak hanya properti 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 dapat mengekstrak properti tertentu dari tipe objek dan menganggapnya sebagai tipe baru. Sebagai contoh, hanya id dan name yang diekstrak dalam contoh di atas.

Omit<T, K>

Omit<T, K> mengecualikan properti tertentu dari jenis objek. Ini adalah operasi yang berlawanan 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 dapat membuat jenis baru dengan mengecualikan properti tertentu. Dalam contoh di atas, properti email dikecualikan.

Exclude<T, U>

Exclude<T, U> menciptakan jenis baru dengan menghapus tipe U dari tipe union T. Ini digunakan ketika Anda ingin menghapus tipe 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 dapat menghapus tipe-tipe yang tidak diperlukan dalam tipe union. Dalam contoh di atas, karena "pending" dikecualikan, hanya "active" atau "inactive" yang dapat dipilih.

Extract<T, U>

Extract<T, U> mengekstrak bagian yang sesuai dengan tipe U dalam tipe union T. Ini berguna ketika Anda ingin mengekstrak hanya tipe 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> melakukan operasi yang berlawanan dengan Exclude. Dalam contoh di atas, hanya "active" dan "pending" yang dapat dipilih.

NonNullable<T>

NonNullable<T> menciptakan jenis dengan null dan undefined dikecualikan. Ini berguna ketika Anda ingin mengecualikan nilai-nilai ini dari tipe opsional.

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 dari jenis yang mengandungnya. Ini berguna ketika Anda ingin memastikan bahwa suatu nilai pasti ada.

Kesimpulan

Tipe utilitas TypeScript adalah alat yang kuat untuk membuat definisi tipe lebih ringkas dan fleksibel. Memahami dan menggunakan tipe utilitas dasar seperti Partial, Required, Readonly, Record, dan lainnya dengan tepat dapat meningkatkan penggunaan ulang dan pemeliharaan kode. Menguasai tipe-tipe ini memungkinkan definisi tipe yang lebih kuat dan aman, yang mendukung pengembangan yang efisien.

Operator keyof di TypeScript

Operator keyof di TypeScript digunakan untuk mengambil semua nama properti dari jenis objek. Dengan menggunakan operator ini, Anda dapat memperoleh kunci dari tipe objek sebagai tipe union. Ini sangat berguna untuk menulis kode yang aman tipe.

Penggunaan Dasar

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 dapat menggunakan keyof untuk mendefinisikan fungsi yang memiliki tipe berdasarkan properti tertentu dari sebuah 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 Batasan Tipe

   Dengan menggunakan keyof, Anda dapat memastikan bahwa kunci yang diteruskan ke sebuah fungsi divalidasi pada saat kompilasi.

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

Ringkasan

• Operator keyof digunakan untuk mengambil semua nama properti dari sebuah tipe objek.
• Anda dapat memperoleh nama properti sebagai tipe union, sehingga menghasilkan kode yang aman tipe.
• Dengan menggunakannya dalam argumen fungsi, Anda dapat membatasi fungsi untuk hanya menerima nama properti yang valid.

Dengan cara ini, operator keyof meningkatkan keamanan tipe dalam TypeScript dan membantu Anda menulis kode yang lebih kuat.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video