Tipe Terpetakan TypeScript: Menguasai Transformasi Objek dan Modifikasi Properti

Dalam lanskap pengembangan perangkat lunak yang terus berkembang, sistem tipe yang kuat sangat penting untuk membangun aplikasi yang dapat dipelihara, terukur, dan andal. TypeScript, dengan inferensi tipe yang kuat dan fitur-fitur canggihnya, telah menjadi alat yang sangat diperlukan bagi pengembang di seluruh dunia. Di antara kemampuan yang paling ampuh adalah Tipe Terpetakan, mekanisme canggih yang memungkinkan kita untuk mengubah tipe objek yang ada menjadi yang baru. Posting blog ini akan mempelajari lebih dalam dunia Tipe Terpetakan TypeScript, mengeksplorasi konsep-konsep dasarnya, aplikasi praktis, dan bagaimana mereka memberdayakan pengembang untuk menangani transformasi objek dan modifikasi properti dengan elegan.

Memahami Konsep Inti dari Tipe Terpetakan

Pada intinya, Tipe Terpetakan adalah cara untuk membuat tipe baru dengan mengulangi properti dari tipe yang ada. Pikirkan itu sebagai loop untuk tipe. Untuk setiap properti dalam tipe asli, Anda dapat menerapkan transformasi ke kuncinya, nilainya, atau keduanya. Ini membuka banyak kemungkinan untuk menghasilkan definisi tipe baru berdasarkan yang sudah ada, tanpa pengulangan manual.

Sintaks dasar untuk Tipe Terpetakan melibatkan struktur { [P in K]: T }, di mana:

• P: Mewakili nama properti yang diulangi.
• in K: Ini adalah bagian penting, yang menunjukkan bahwa P akan mengambil setiap kunci dari tipe K (yang biasanya merupakan gabungan dari literal string, atau tipe keyof).
• T: Mendefinisikan tipe nilai untuk properti P dalam tipe baru.

Mari kita mulai dengan ilustrasi sederhana. Bayangkan Anda memiliki objek yang mewakili data pengguna, dan Anda ingin membuat tipe baru di mana semua properti bersifat opsional. Ini adalah skenario umum, misalnya, saat membangun objek konfigurasi atau saat mengimplementasikan pembaruan sebagian.

Contoh 1: Membuat Semua Properti Opsional

Pertimbangkan tipe dasar ini:

            
type User = {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
};

            

              
                Copy
              
            
          

Kita dapat membuat tipe baru, OptionalUser, di mana semua properti ini bersifat opsional menggunakan Tipe Terpetakan:

            
type OptionalUser = {
  [P in keyof User]?: User[P];
};

            

              
                Copy
              
            
          

Mari kita uraikan ini:

• keyof User: Ini menghasilkan gabungan dari kunci-kunci tipe User (misalnya, 'id' | 'name' | 'email' | 'isActive').
• P in keyof User: Ini mengulangi setiap kunci dalam gabungan.
• ?: Ini adalah pengubah yang membuat properti bersifat opsional.
• User[P]: Ini adalah tipe pencarian. Untuk setiap kunci P, ia mengambil tipe nilai yang sesuai dari tipe User asli.

Tipe OptionalUser yang dihasilkan akan terlihat seperti ini:

            
{
  id?: number;
  name?: string;
  email?: string;
  isActive?: boolean;
}

            

              
                Copy
              
            
          

Ini sangat kuat. Alih-alih mendefinisikan ulang setiap properti secara manual dengan ?, kita telah menghasilkan tipe secara dinamis. Prinsip ini dapat diperluas untuk membuat banyak tipe utilitas lainnya.

Pengubah Properti Umum dalam Tipe Terpetakan

Tipe Terpetakan bukan hanya tentang membuat properti opsional. Mereka memungkinkan Anda untuk menerapkan berbagai pengubah ke properti dari tipe yang dihasilkan. Yang paling umum termasuk:

• Opsionalitas: Menambahkan atau menghapus pengubah ?.
• Readonly: Menambahkan atau menghapus pengubah readonly.
• Nullability/Non-nullability: Menambahkan atau menghapus | null atau | undefined.

Contoh 2: Membuat Versi Readonly dari Tipe

Mirip dengan membuat properti opsional, kita dapat membuat tipe ReadonlyUser:

            
type ReadonlyUser = {
  readonly [P in keyof User]: User[P];
};

            

              
                Copy
              
            
          

Ini akan menghasilkan:

            
{
  readonly id: number;
  readonly name: string;
  readonly email: string;
  readonly isActive: boolean;
}

            

              
                Copy
              
            
          

Ini sangat berguna untuk memastikan bahwa struktur data tertentu, setelah dibuat, tidak dapat diubah, yang merupakan prinsip fundamental untuk membangun sistem yang kuat dan dapat diprediksi, terutama di lingkungan bersamaan atau saat berurusan dengan pola data yang tidak dapat diubah yang populer dalam paradigma pemrograman fungsional yang diadopsi oleh banyak tim pengembangan internasional.

Contoh 3: Menggabungkan Opsionalitas dan Readonly

Kita dapat menggabungkan pengubah. Misalnya, tipe di mana properti bersifat opsional dan readonly:

            
type OptionalReadonlyUser = {
  readonly [P in keyof User]?: User[P];
};

            

              
                Copy
              
            
          

Ini menghasilkan:

            
{
  readonly id?: number;
  readonly name?: string;
  readonly email?: string;
  readonly isActive?: boolean;
}

            

              
                Copy
              
            
          

Menghapus Pengubah dengan Tipe Terpetakan

Bagaimana jika Anda ingin menghapus pengubah? TypeScript memungkinkan ini menggunakan sintaks -? dan -readonly dalam Tipe Terpetakan. Ini sangat ampuh saat berhadapan dengan tipe utilitas yang ada atau komposisi tipe yang kompleks.

Katakanlah Anda memiliki tipe Partial<T> (yang sudah ada dan membuat semua properti opsional), dan Anda ingin membuat tipe yang sama dengan Partial<T> tetapi dengan semua properti dibuat wajib lagi.

            
type Mandatory<T> = {
  -?: T extends object ? T[keyof T] : never;
};

type FullyPopulatedUser = Mandatory<Partial<User>>;

            

              
                Copy
              
            
          

Ini tampak berlawanan dengan intuisi. Mari kita analisis:

Partial<User> setara dengan OptionalUser kita. Sekarang, kita ingin membuat propertinya wajib. Sintaks -? menghapus pengubah opsional.

Cara yang lebih langsung untuk mencapainya, tanpa mengandalkan Partial terlebih dahulu, adalah dengan hanya mengambil tipe asli dan membuatnya wajib jika itu opsional:

            
type MakeMandatory<T> = {
  -?: T;
};

type MandatoryUser = MakeMandatory<OptionalUser>;

            

              
                Copy
              
            
          

Ini akan dengan benar mengembalikan OptionalUser kembali ke struktur tipe User asli (semua properti hadir dan diperlukan).

Demikian pula, untuk menghapus pengubah readonly:

            
type Mutable<T> = {
  -readonly [P in keyof T]: T[P];
};

type MutableUser = Mutable<ReadonlyUser>;

            

              
                Copy
              
            
          

MutableUser akan setara dengan tipe User asli, tetapi propertinya tidak akan readonly.

Nullability dan Undefinability

Anda juga dapat mengontrol nullability. Misalnya, untuk memastikan semua properti pasti tidak nullable:

            
type NonNullableValues<T> = {
  [P in keyof T]-?: NonNullable<T[P]>;
};

interface MaybeNull {
  name: string | null;
  age: number | undefined;
}

type DefiniteValues = NonNullableValues<MaybeNull>;
// type DefiniteValues = {
//   name: string;
//   age: number;
// }

            

              
                Copy
              
            
          

Di sini, -? memastikan properti tidak opsional, dan NonNullable<T[P]> menghilangkan null dan undefined dari tipe nilai.

Mengubah Kunci Properti

Tipe Terpetakan sangat serbaguna, dan mereka tidak hanya berhenti pada memodifikasi nilai atau pengubah. Anda juga dapat mengubah kunci dari tipe objek. Di sinilah Tipe Terpetakan benar-benar bersinar dalam skenario yang kompleks.

Contoh 4: Memberi Awalan Kunci Properti

Misalkan Anda ingin membuat tipe baru di mana semua properti dari tipe yang ada memiliki awalan tertentu. Ini dapat berguna untuk namespacing atau untuk menghasilkan variasi struktur data.

            
type Prefixed<T, Prefix extends string> = {
  [P in keyof T as `${Prefix}${Capitalize<string & P>}`]: T[P];
};

type OriginalConfig = {
  timeout: number;
  retries: number;
};

type PrefixedConfig = Prefixed<OriginalConfig, 'app'>;
// type PrefixedConfig = {
//   appTimeout: number;
//   appRetries: number;
// }

            

              
                Copy
              
            
          

Mari kita bedah transformasi kunci:

• P in keyof T: Masih mengulangi kunci asli.
• as `${Prefix}${Capitalize<string & P>}`: Ini adalah klausa pemetaan ulang kunci.
• `${Prefix}${...}`: Ini menggunakan tipe literal template untuk membuat nama kunci baru dengan menggabungkan Prefix yang disediakan dengan nama properti yang diubah.
• Capitalize<string & P>: Ini adalah pola umum untuk memastikan nama properti P diperlakukan sebagai string dan kemudian diberi kapital. Kami menggunakan string & P untuk memotong P dengan string, memastikan bahwa TypeScript memperlakukannya sebagai tipe string, yang diperlukan untuk Capitalize.

Contoh ini menunjukkan bagaimana Anda dapat mengganti nama properti secara dinamis berdasarkan yang sudah ada, teknik yang ampuh untuk menjaga konsistensi di berbagai lapisan aplikasi atau saat berintegrasi dengan sistem eksternal yang memiliki konvensi penamaan tertentu.

Contoh 5: Memfilter Properti

Bagaimana jika Anda hanya ingin menyertakan properti yang memenuhi kondisi tertentu? Ini dapat dicapai dengan menggabungkan Tipe Terpetakan dengan Tipe Bersyarat dan klausa as untuk pemetaan ulang kunci, seringkali untuk memfilter properti.

            
type OnlyStrings<T> = {
  [P in keyof T as T[P] extends string ? P : never]: T[P];
};

interface MixedData {
  name: string;
  age: number;
  city: string;
  isActive: boolean;
}

type StringOnlyData = OnlyStrings<MixedData>;
// type StringOnlyData = {
//   name: string;
//   city: string;
// }

            

              
                Copy
              
            
          

Dalam hal ini:

• T[P] extends string ? P : never: Untuk setiap properti P, kita periksa apakah tipe nilainya (T[P]) dapat ditetapkan ke string.
• Jika itu adalah string, kunci P disimpan.
• Jika bukan string, itu dipetakan ke never. Saat kunci dipetakan ke never, itu secara efektif dihapus dari tipe objek yang dihasilkan.

Teknik ini sangat berharga untuk membuat tipe yang lebih spesifik dari yang lebih luas, misalnya, hanya mengekstrak pengaturan konfigurasi yang bertipe tertentu, atau memisahkan bidang data berdasarkan sifatnya.

Contoh 6: Mengubah Kunci ke Bentuk yang Berbeda

Anda juga dapat mengubah kunci menjadi jenis kunci yang sama sekali berbeda, misalnya, mengubah kunci string menjadi angka, atau sebaliknya, meskipun ini kurang umum untuk manipulasi objek langsung dan lebih untuk pemrograman tingkat tipe lanjutan.

Pertimbangkan untuk mengubah kunci string menjadi gabungan literal string, dan kemudian menggunakannya sebagai dasar untuk tipe baru. Meskipun tidak secara langsung mengubah kunci objek *dalam* Tipe Terpetakan itu sendiri dengan cara khusus ini, itu menunjukkan bagaimana kunci dapat dimanipulasi.

Contoh transformasi kunci yang lebih langsung dapat memetakan kunci ke versi huruf besar mereka:

            
type UppercaseKeys<T> = {
  [P in keyof T as Uppercase<string & P>]: T[P];
};

type LowercaseData = {
  firstName: string;
  lastName: string;
};

type UppercaseData = UppercaseKeys<LowercaseData>;
// type UppercaseData = {
//   FIRSTNAME: string;
//   LASTNAME: string;
// }

            

              
                Copy
              
            
          

Ini menggunakan klausa as untuk mengubah setiap kunci P menjadi padanannya yang berupa huruf besar.

Aplikasi Praktis dan Skenario Dunia Nyata

Tipe Terpetakan bukan hanya konstruksi teoretis; mereka memiliki implikasi praktis yang signifikan di berbagai domain pengembangan. Berikut adalah beberapa skenario umum di mana mereka sangat berharga:

1. Membangun Tipe Utilitas yang Dapat Digunakan Kembali

Banyak transformasi tipe umum dapat dienkapsulasi ke dalam tipe utilitas yang dapat digunakan kembali. Pustaka standar TypeScript sudah menyediakan contoh yang sangat baik seperti Partial<T>, Readonly<T>, Record<K, T>, dan Pick<T, K>. Anda dapat menentukan tipe utilitas kustom Anda sendiri menggunakan Tipe Terpetakan untuk menyederhanakan alur kerja pengembangan Anda.

Misalnya, tipe yang memetakan semua properti ke fungsi yang menerima nilai asli dan mengembalikan nilai baru:

            
type Mappers<T> = {
  [P in keyof T]: (value: T[P]) => T[P];
};

interface ProductInfo {
  name: string;
  price: number;
}

type ProductMappers = Mappers<ProductInfo>;
// type ProductMappers = {
//   name: (value: string) => string;
//   price: (value: number) => number;
// }

            

              
                Copy
              
            
          

2. Penanganan dan Validasi Formulir Dinamis

Dalam pengembangan frontend, terutama dengan kerangka kerja seperti React atau Angular (meskipun contoh di sini adalah TypeScript murni), menangani formulir dan status validasi mereka adalah tugas yang umum. Tipe Terpetakan dapat membantu mengelola status validasi setiap bidang formulir.

Pertimbangkan formulir dengan bidang yang bisa 'perawan', 'disentuh', 'valid', atau 'invalid'.

            
type FormFieldState = 'pristine' | 'touched' | 'dirty' | 'valid' | 'invalid';

type FormState<T> = {
  [P in keyof T]: FormFieldState;
};

interface UserForm {
  username: string;
  email: string;
  password: string;
}

type UserFormState = FormState<UserForm>;
// type UserFormState = {
//   username: FormFieldState;
//   email: FormFieldState;
//   password: FormFieldState;
// }

            

              
                Copy
              
            
          

Ini memungkinkan Anda untuk membuat tipe yang mencerminkan struktur data formulir Anda tetapi sebagai gantinya melacak status setiap bidang, memastikan konsistensi dan keamanan tipe untuk logika manajemen formulir Anda. Ini sangat bermanfaat untuk proyek internasional di mana persyaratan UI/UX yang beragam dapat menyebabkan status formulir yang kompleks.

3. Transformasi Respons API

Saat berurusan dengan API, data respons mungkin tidak selalu cocok dengan model domain internal Anda. Tipe Terpetakan dapat membantu dalam mengubah respons API menjadi bentuk yang diinginkan.

Bayangkan respons API yang menggunakan snake_case untuk kunci, tetapi aplikasi Anda lebih menyukai camelCase:

            
// Asumsikan ini adalah tipe respons API yang masuk
type ApiUserData = {
  user_id: number;
  first_name: string;
  last_name: string;
};

// Pembantu untuk mengkonversi snake_case ke camelCase untuk kunci
type ToCamelCase<S extends string>: string = S extends `${infer T}_${infer U}`
  ? `${T}${Capitalize<U>}`
  : S;

type CamelCasedKeys<T> = {
  [P in keyof T as ToCamelCase<string & P>]: T[P];
};

type AppUserData = CamelCasedKeys<ApiUserData>;
// type AppUserData = {
//   userId: number;
//   firstName: string;
//   lastName: string;
// }

            

              
                Copy
              
            
          

Ini adalah contoh yang lebih canggih menggunakan tipe bersyarat rekursif untuk manipulasi string. Pengambilan utama adalah bahwa Tipe Terpetakan, bila dikombinasikan dengan fitur TypeScript lanjutan lainnya, dapat mengotomatiskan transformasi data yang kompleks, menghemat waktu pengembangan, dan mengurangi risiko kesalahan runtime. Ini sangat penting bagi tim global yang bekerja dengan layanan backend yang beragam.

4. Meningkatkan Struktur Mirip Enum

Meskipun TypeScript memiliki `enum`s, terkadang Anda mungkin menginginkan lebih banyak fleksibilitas atau untuk memperoleh tipe dari literal objek yang bertindak seperti enum.

            
const AppPermissions = {
  READ: 'read',
  WRITE: 'write',
  DELETE: 'delete',
  ADMIN: 'admin',
} as const;

type Permission = typeof AppPermissions[keyof typeof AppPermissions];
// type Permission = 'read' | 'write' | 'delete' | 'admin'

type UserPermissions = {
  [P in Permission]?: boolean;
};

type RolePermissions = {
  [P in Permission]: boolean;
};

const userPerms: UserPermissions = {
  read: true,
};

const adminRole: RolePermissions = {
  read: true,
  write: true,
  delete: true,
  admin: true,
};

            

              
                Copy
              
            
          

Di sini, kita pertama-tama memperoleh tipe gabungan dari semua string izin yang mungkin. Kemudian, kami menggunakan Tipe Terpetakan untuk membuat tipe di mana setiap izin adalah kunci, yang memungkinkan kami untuk menentukan apakah seorang pengguna memiliki izin itu (opsional) atau jika suatu peran mewajibkannya (diperlukan). Pola ini umum dalam sistem otorisasi di seluruh dunia.

Tantangan dan Pertimbangan

Meskipun Tipe Terpetakan sangat kuat, penting untuk menyadari potensi kompleksitas:

• Keterbacaan dan Kompleksitas: Tipe Terpetakan yang terlalu kompleks dapat menjadi sulit dibaca dan dipahami, terutama bagi pengembang yang baru mengenal fitur-fitur canggih ini. Selalu berusahalah untuk kejelasan dan pertimbangkan untuk menambahkan komentar atau memecah transformasi yang kompleks.
• Implikasi Performa: Meskipun pemeriksaan tipe TypeScript adalah compile-time, manipulasi tipe yang sangat kompleks, secara teori, dapat sedikit meningkatkan waktu kompilasi. Untuk sebagian besar aplikasi, ini dapat diabaikan, tetapi ini adalah poin yang perlu diingat untuk basis kode yang sangat besar atau proses build yang sangat kritis terhadap kinerja.
• Debugging: Ketika Tipe Terpetakan menghasilkan hasil yang tidak terduga, debugging terkadang bisa menjadi tantangan. Menggunakan fitur inspeksi tipe TypeScript Playground atau IDE sangat penting untuk memahami bagaimana tipe diselesaikan.
• Memahami `keyof` dan Tipe Pencarian: Penggunaan Tipe Terpetakan yang efektif bergantung pada pemahaman yang kuat tentang `keyof` dan tipe pencarian (`T[P]`). Pastikan tim Anda memiliki pemahaman yang baik tentang konsep-konsep dasar ini.

Praktik Terbaik untuk Menggunakan Tipe Terpetakan

Untuk memanfaatkan sepenuhnya potensi Tipe Terpetakan sambil mengurangi tantangan mereka, pertimbangkan praktik terbaik ini:

• Mulai Sederhana: Mulailah dengan transformasi opsionalitas dan readonly dasar sebelum menyelami pemetaan ulang kunci yang kompleks atau logika bersyarat.
• Manfaatkan Tipe Utilitas Bawaan: Biasakan diri Anda dengan tipe utilitas bawaan TypeScript seperti Partial, Readonly, Record, Pick, Omit, dan Exclude. Mereka sering kali cukup untuk tugas-tugas umum dan telah diuji dan dipahami dengan baik.
• Buat Tipe Generik yang Dapat Digunakan Kembali: Enkapsulasi pola Tipe Terpetakan umum ke dalam tipe utilitas generik. Ini mendorong konsistensi dan mengurangi kode boilerplate di seluruh proyek Anda dan untuk tim global.
• Gunakan Nama Deskriptif: Beri nama Tipe Terpetakan dan parameter generik Anda dengan jelas untuk menunjukkan tujuannya (misalnya, Optional<T>, DeepReadonly<T>, PrefixedKeys<T, Prefix>).
• Prioritaskan Keterbacaan: Jika Tipe Terpetakan menjadi terlalu berbelit-belit, pertimbangkan apakah ada cara yang lebih sederhana untuk mencapai hasil yang sama atau apakah itu sepadan dengan kompleksitas tambahan. Terkadang, definisi tipe yang sedikit lebih bertele-tele tetapi lebih jelas lebih disukai.
• Dokumentasikan Tipe Kompleks: Untuk Tipe Terpetakan yang rumit, tambahkan komentar JSDoc yang menjelaskan fungsinya, terutama saat berbagi kode dalam tim internasional yang beragam.
• Uji Tipe Anda: Tulis uji tipe atau gunakan contoh untuk memverifikasi bahwa Tipe Terpetakan Anda berperilaku seperti yang diharapkan. Ini sangat penting untuk transformasi kompleks di mana bug halus bisa sulit ditangkap.

Kesimpulan

Tipe Terpetakan TypeScript adalah landasan manipulasi tipe lanjutan, menawarkan pengembang kekuatan tak tertandingi untuk mengubah dan mengadaptasi tipe objek. Apakah Anda membuat properti opsional, hanya-baca, mengganti namanya, atau memfilternya berdasarkan kondisi yang rumit, Tipe Terpetakan menyediakan cara yang deklaratif, aman-tipe, dan sangat ekspresif untuk mengelola struktur data Anda.

Dengan menguasai teknik-teknik ini, Anda dapat secara signifikan meningkatkan kegunaan kembali kode, meningkatkan keamanan tipe, dan membangun aplikasi yang lebih kuat dan dapat dipelihara. Rangkul kekuatan Tipe Terpetakan untuk meningkatkan pengembangan TypeScript Anda dan berkontribusi pada pembangunan solusi perangkat lunak berkualitas tinggi untuk audiens global. Saat Anda berkolaborasi dengan pengembang dari berbagai wilayah, pola tipe lanjutan ini dapat berfungsi sebagai bahasa umum untuk memastikan kualitas dan konsistensi kode, menjembatani potensi kesenjangan komunikasi melalui kekakuan sistem tipe.