Jago TypeScript dengan Memahami infer

TypeScript adalah superset dari bahasa pemrograman JavaScript. Saat ini banyak developer yang beralih dari menggunakan JavaScript ke TypeScript karena fitur-fitur yang dimilikinya. Salah satunya adalah keyword infer. Keyword ini sangat powerful jika kalian tahu cara menggunakannya. Kalian dapat membuat tipe apa saja secara dinamis dengan memanfaatkan infer.

Keyword infer

Untuk memahami infer diperlukan pemahaman tentang Generic type terlebih dahulu. Karena sangat umum infer dikombinasikan di dalam Generic.

Keyword infer diperkenalkan pertama kali di TypeScript 2.8. Keyword ini biasanya digunakan dalam conditional type untuk membuat tipe sementara. Tipe sementara itulah yang digunakan untuk membuat type secara dinamis berdasarkan hasil true atau false dari conditional type-nya. Untuk memahami dengan lebih jelas alangkah baiknya kita langsung lihat di contoh kasus berikut:

Conditional type

Pertama kita pahami cara kerja conditional type terlebih dahulu.

type MyType<T> = T extends Sometype ? TrueType : FalseType;

Dari contoh diatas, MyType akan menentukan tipe data sesuai dengan true atau false dari conditional type T extends SomeType. Jika type T extends SomeType bernilai true, maka MyType akan menentukan tipe data TrueType. Sedangkan jika T extends SomeType bernilai false, maka MyType akan menentukan tipe data FalseType.

Ekstrak Tipe Menggunakan infer

Nah sekarang kita gunakan infer di dalam conditional type untuk mengekstrak type yang kita inginkan.

type ArrayValue<T> = T extends Array<infer X> ? X : never;

Saya coba jelaskan kode di atas. Jadi T adalah tipe yang akan kita infer. Jika T ini merupakan Array, infer akan mengekstrak tipe X dari T. Jika T ini bukan Array, infer akan mengembalikan never.

Mari kita coba terapkan untuk mengestrak tipe dari sebuah variabel.

type ArrayValue<T> = T extends Array<infer X> ? X : never;

const a = [1, 2, 3];
type A = ArrayValue<typeof a>; // <-- type A = number

const b = ['satu', 'dua'];
type B = ArrayValue<typeof B>; // <-- type B = string

const c = ['satu', 2, 'tiga'];
type C = ArrayValue<typeof c>; // <-- type C = string|number

const d = 'foo';
type D = ArrayValue<typeof d>; // <-- type D = never

Di sini, infer akan mengekstrak tipe X dari T jika T ini merupakan Array. Jika T ini bukan Array, infer akan mengembalikan never

Beberapa utility type bawaan TypeScript juga sangat bergantung pada keyword infer ini. Sebagai contoh adalah ReturnType yang sering digunakan untuk mengesktrak tipe dari hasil sebuah fungsi.

// definisi ReturnType bawaan TypeScript
type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R
	? R
	: never;

// contoh penggunaan

const myFn = (a: number, b: number) => (a + b).toString();
type MyReturnType = ReturnType<typeof myFn>; // <-- type MyReturnType = string

Kesimpulan

Dapat terlihat bahwa keyword infer ini sangatlah powerful. Kita bisa memanipulasi dan mengekstrak tipe apa saja yang kita inginkan. Masih banyak lagi contoh kasus penggunaan keyword infer yang mungkin kalian tidak sadar sering menggunakannya. Contoh library yang sangat populer dan menggunakan kekuatan infer salah satunya adalah zod, yaitu library untuk membuat validasi dan sekaligus menginfer nilai hasil validasinya. Semoga bermanfaat dan semoga semakin kreatif dalam menggunakan TypeScript.