TypeScript telah menjadi salah satu bahasa yang paling populer untuk membangun aplikasi web modern. Dengan pengetikan statis dan fitur-fitur tambahannya, bahasa ini menawarkan pengalaman pengembangan yang kuat yang meningkatkan pemeliharaan kode dan produktivitas pengembang. Meskipun dasar-dasar TypeScript relatif mudah, bahasa ini juga menawarkan beberapa fitur canggih yang dapat meningkatkan kemampuan pengkodean Anda ke tingkat berikutnya. Dalam artikel ini, kita akan menjelajahi beberapa fitur canggih yang paling kuat dari TypeScript, dengan fokus pada Generik, Tipe Utilitas, dan fungsi penting lainnya.
1. Obat Generik: Membangun Komponen yang Fleksibel dan Dapat Digunakan Kembali
Generics adalah salah satu fitur yang paling kuat dari TypeScript, yang membantu pengembang untuk membuat kode yang fleksibel dan dapat digunakan kembali. Generics memungkinkan Anda untuk membuat fungsi, kelas, dan antarmuka yang dapat bekerja dengan tipe data yang berbeda namun tetap menjaga keamanan tipe.
Contoh penggunaan sederhana dari generics adalah sebuah fungsi yang mengambil sebuah argumen dan mengembalikan argumen yang sama tanpa mengetahui jenisnya terlebih dahulu. Karena dengan generics, TypeScript mengetahui bahwa input sama dengan tipe output.
function identity<T>(value: T): T {
return value;
}
const num = identity(123); // type is inferred as number
const str = identity("hello"); // type is inferred as string
Pada contoh yang diberikan, fungsi identitas mengambil parameter dari tipe Generik dan mengembalikan nilai dengan tipe yang sama. T dalam tanda tangan fungsi adalah variabel tipe yang dapat mengambil tipe apa pun.
Poin penting lain dari generik adalah membangun kelas dan antarmuka yang dapat digunakan kembali. Misalkan Anda memiliki sebuah kelas untuk mengelola sebuah koleksi item:
class Collection<T> {
private items: T[] = [];
add(item: T): void {
this.items.push(item);
}
get(index: number): T {
return this.items[index];
}
}
const stringCollection = new Collection<string>();
stringCollection.add("Hello");
console.log(stringCollection.get(0)); // Output: Hello
Dalam contoh ini, kelas Collection dirancang untuk menyimpan item dengan tipe apa pun. Dengan menggunakan tipe generik T, kelas dapat mengelola berbagai jenis data, memberikan fleksibilitas dan keamanan tipe.
2. Jenis Utilitas: Meningkatkan Manipulasi Tipe
TypeScript memiliki kumpulan tipe utilitas bawaan yang memungkinkan Anda sebagai pengembang untuk melakukan penyesuaian tertentu pada tipe. Ini adalah jenis utilitas yang dapat Anda gunakan kapan pun Anda ingin memanipulasi pengetikan dengan cara yang membuat kode Anda lebih ringkas atau hemat waktu.
Partial
Tipe utilitas Partial membuat tipe dengan semua properti tipe yang ditetapkan sebagai opsional.
interface User {
name: string;
age: number;
}
const updateUser = (user: User, updates: Partial<User>) => {
return { ...user, ...updates };
};
const updatedUser = updateUser({ name: "Alice", age: 30 }, { age: 31 });
console.log(updatedUser); // Output: { name: "Alice", age: 31 }
Dalam contoh ini, tipe Partial<User> memungkinkan kita untuk memperbarui hanya beberapa properti dari objek User.
Readonly
Readonly adalah jenis utilitas TypeScript yang membuat tipe baru yang membuat semua properti dari tipe target tidak dapat diubah atau hanya-baca, yaitu tipe yang tidak dapat diubah setelah inisialisasi.
const user: Readonly<User> = { name: "Bob", age: 25 };
// user.age = 26; // Error: Cannot assign to 'age' because it is a read-only property
Di sini, tipe Readonly<User> memastikan bahwa properti objek pengguna tidak dapat dimodifikasi setelah ditetapkan.
Pilih<Tipe, Tombol>
Jenis utilitas Pilih membuat jenis baru dengan memilih subset properti dari jenis lain.
type UserName = Pick<User, "name">;
const userName: UserName = { name: "Charlie" };
Dalam kasus ini, tipe UserName adalah tipe baru yang hanya berisi properti nama dari antarmuka Pengguna.
3. Fitur TypeScript yang Lebih Canggih
Tipe yang Dipetakan
Anda dapat menggunakan tipe yang dipetakan untuk membuat tipe baru dengan mengubah properti tipe yang sudah ada. Tipe ini biasanya digunakan untuk mengubah properti atau membuat tipe baru berdasarkan skema yang sudah ada.
type ReadOnlyUser = {
readonly [K in keyof User]: User[K];
};
Di mana semua properti dari User hanya dapat dibaca dan membuat tipe baru ReadOnlyUser.
Tipe Bersyarat
Jenis bersyarat menawarkan cara untuk menentukan jenis berdasarkan kondisi tertentu. Sebagai contoh:
type IsString<T> = T extends string ? "Yes" : "No";
type Test1 = IsString<string>; // "Yes"
type Test2 = IsString<number>; // "No"
Di sini, tipe IsString<T> mengembalikan “Ya” jika tipe T adalah sebuah string, dan “Tidak” jika tidak.
Tipe Literal Templat
Tidak seperti tipe literal string, tipe literal template menyediakan cara untuk membangun pola string berdasarkan tipe lain. Tipe ini juga digunakan untuk menentukan batasan untuk menerapkan format string tertentu.
type Greeting = `Hello, ${string}!`;
const message: Greeting = "Hello, Alice!";
Hal ini menciptakan tipe yang hanya dapat mencocokkan string literal yang cocok dengan format Hello, !.
Kesimpulan
Fitur-fitur canggih TypeScript, seperti tipe generik, tipe utilitas, tipe yang dipetakan, dan tipe kondisional, menawarkan alat bantu yang ampuh untuk membuat kode yang fleksibel, dapat digunakan kembali, dan aman dari kesalahan penulisan. Dengan menguasai fitur-fitur ini, pengembang dapat memanfaatkan sepenuhnya sistem tipe TypeScript, menciptakan aplikasi yang lebih kuat dan mudah dipelihara. Baik Anda sedang membangun sistem berskala besar atau mengerjakan proyek yang lebih kecil, memahami dan memanfaatkan fitur-fitur canggih ini dapat secara signifikan meningkatkan pengalaman dan produktivitas pengkodean Anda.
