Belajar TypeScript - Deklarasi Tipe untuk Library Eksternal

#Pendahuluan

Library JavaScript yang tidak punya tipe akan menjadi titik buta. Saat kalian mengimpornya, TypeScript mengeluh karena tidak menemukan deklarasi. Episode 14 membahas cara menutup celah itu: memasang paket tipe, menulis deklarasi sendiri, dan memastikan compiler menemukan semuanya.

Sebagian besar library populer menyediakan tipe lewat DefinitelyTyped, repositori paket @types. Library lain sudah membawa tipe bawaan. Sisanya membutuhkan deklarasi ambient yang bisa kalian tulis sendiri.

Episode 14 membedah ekosistem deklarasi: peran @types, isi file .d.ts, kata kunci declare untuk lingkungan tanpa implementasi, dan opsi module resolution yang membuat semuanya tersambung.

#DefinitelyTyped dan Paket @types

Banyak library JavaScript murni yang tipenya dipelihara komunitas di paket @types. Pemasangannya sederhana:

bun add -d @types/node @types/express

Perintah di atas memasang deklarasi tipe untuk Node.js dan Express sebagai devDependency. Aturan penamaannya jelas: tipe untuk express ada di @types/express, tipe untuk node di @types/node. Setelah terpasang, TypeScript mengenali deklarasi tersebut secara otomatis tanpa import tambahan.

Bila library sudah membawa tipe bawaan, tidak perlu paket @types lagi:

npm view zod types

Perintah npm view zod types membaca bidang types di metadata paket. Bila nilainya ada, library itu menyertakan deklarasi sendiri dan kalian cukup menginstal library-nya. Memasang @types ganda untuk library bertipe bisa memunculkan konflik.

#Struktur File Deklarasi .d.ts

File deklarasi berakhiran .d.ts dan hanya berisi tipe, tanpa implementasi:

export interface OpsiKoneksi {
    host: string;
    port: number;
}
 
export interface OpsiAuth {
    token: string;
}
 
export function konek(opts: OpsiKoneksi): Promise<void>;

File koneksi.d.ts mendeskripsikan bentuk modul tanpa kode runtime. Compiler menggunakannya untuk pemeriksaan, lalu membuangnya saat build karena tidak menghasilkan JavaScript. Inilah format yang dipakai paket @types dan deklarasi bawaan library.

Selain deklarasi modul, ada pula deklarasi global. File seperti global.d.ts mendeskripsikan variabel yang tersedia tanpa import, misalnya declare const untuk objek yang disuntikkan server. Pola ini sering dipakai untuk integrasi script tag dan data global dari halaman.

#Deklarasi Ambient untuk Library Tanpa Tipe

Library yang benar-benar tanpa tipe bisa dideklarasikan dengan kata kunci declare:

declare module "lib-lama" {
    export function inisialisasi(kunci: string): void;
    export const versi: string;
}

Blok declare module "lib-lama" memberi tahu compiler bentuk modul tanpa harus ada file implementasinya. Ketika kode kalian mengimpor lib-lama, TypeScript memakai deklarasi ini. Untuk modul yang terlalu besar, jalan pintas berupa deklarasi longgar:

declare module "lib-lama-2" {
    const apaAja: any;
    export = apaAja;
}

Deklarasi export = apaAja dengan any menandai seluruh modul sebagai bertipe bebas. Ini cepat, tapi sementara. Setelah memahami bentuk sebenarnya, perbarui deklarasi menjadi tipe yang presisi. File dengan deklarasi ambient seperti ini disimpan dalam folder types dan didaftarkan ke compiler.

#Module Resolution di tsconfig

Agar impor dan deklarasi ditemukan, module resolution harus diatur benar:

{
    "compilerOptions": {
        "module": "NodeNext",
        "moduleResolution": "NodeNext",
        "typeRoots": ["./node_modules/@types", "./types"]
    }
}

Opsi moduleResolution menentukan aturan pencarian file, misalnya NodeNext untuk Node.js. Opsi typeRoots menambahkan folder types lokal sebagai sumber deklarasi tambahan. Dengan pengaturan ini, deklarasi kalian sendiri dan paket @types sama-sama dikenali compiler.

#Penutup

Episode 14 membuat kalian tidak takut library tanpa tipe. Dengan paket @types, file .d.ts, deklarasi ambient, dan module resolution yang tepat, setiap dependensi bisa dipakai dengan jaminan tipe yang jelas.

Inti yang harus dibawa pulang:

• Paket @types menyediakan tipe komunitas lewat DefinitelyTyped.
• Library bertipe bawaan tidak perlu paket @types terpisah.
• File .d.ts berisi tipe tanpa implementasi runtime.
• declare module mendeklarasikan modul yang tidak punya tipe.
• Deklarasi longgar dengan any hanya jembatan sementara.
• moduleResolution dan typeRoots mengatur cara tipe ditemukan.

Di episode 15 selanjutnya kita akan membahas JSX/TSX dan pekerjaan frontend modern, yaitu mengetikkan komponen React, props, event handler, dan generik pada komponen.