useCallback, forwardRef, dan custom generic hooks. Kode React-mu bisa berkurang sampai 40% boilerplate type annotation tanpa kehilangan type safety. Fitur ini otomatis aktif saat kamu upgrade, tanpa konfigurasi tambahan.
Apa yang Sebenarnya Berubah di TypeScript 5.5
Setiap React developer pasti pernah ngalamin momen ini. Kamu lagi bikin custom hook generic, lalu TypeScript ngotot minta type argument eksplisit. Atau pas pake forwardRef, kamu harus nulis tiga lapis generic cuma buat bikin satu komponen input. Capek, kan?
Nah, TypeScript 5.5 akhirnya memperbaiki cara compiler melakukan inferensi terhadap nested generics. Istilah teknisnya: improved inference for type arguments in generic function calls. Tapi buat kamu yang sehari-hari ngoding React dan Next.js, efeknya jauh lebih konkret.
Dulu, kalau kamu punya fungsi generic yang dipanggil di dalam fungsi generic lain, TypeScript sering “nyerah” dan minta type argument eksplisit. Sekarang, compiler bisa menelusuri rantai inferensi sampai ke level paling dalam. Ini bukan fitur kecil, ini perombakan cara kerja type inference di skenario yang paling sering kamu temui.
useCallback: Dulu vs Sekarang
Ini contoh paling nyata yang langsung kamu rasakan begitu upgrade.
Sebelum TypeScript 5.5:
// Kamu terpaksa nulis explicit type args
const handleClick = useCallback<(id: string) => void>(
(id) => {
navigate(`/product/${id}`);
},
[navigate]
);Setelah TypeScript 5.5:
// TypeScript 5.5 inferensi otomatis
const handleClick = useCallback(
(id: string) => {
navigate(`/product/${id}`);
},
[navigate]
);Satu baris type argument hilang. Kelihatannya sepele, tapi dalam codebase dengan puluhan useCallback, ini penghematan signifikan. Yang lebih menarik: TypeScript 5.5 juga bisa menginferensi return type dari callback yang kompleks. Dulu, callback yang me-return objek hasil transformasi data hampir selalu butuh type annotation. Sekarang, biarkan compiler yang bekerja.
forwardRef yang Akhirnya Waras
Ini favorit pribadi. Berapa banyak dari kamu yang pernah frustrasi dengan type signature forwardRef?
Sebelum TS 5.5:
interface InputProps {
label: string;
error?: string;
}
// Wajib tulis dua generic: ref type dan props type
const Input = forwardRef<HTMLInputElement, InputProps>(
(props, ref) => {
return <input ref={ref} aria-label={props.label} />;
}
);Dengan TS 5.5:
interface InputProps {
label: string;
error?: string;
}
// Props terinferensi otomatis dari parameter
const Input = forwardRef<HTMLInputElement>(
(props: InputProps, ref) => {
return <input ref={ref} aria-label={props.label} />;
}
);Satu generic argument lenyap. Kenapa ini penting? Karena di komponen yang lebih kompleks, props type bisa sangat panjang. Menghilangkan satu slot generic berarti mengurangi cognitive load saat membaca dan menulis kode. Efek sampingnya: PR review jadi lebih cepat karena reviewer nggak perlu verifikasi dua lapis generic.
Nested Generic Hooks: Fitur yang Bikin Library Author Tersenyum
Bagian ini yang bikin TypeScript 5.5 benar-benar game changer. Sebelum versi ini, kalau kamu bikin custom hook yang menerima generic lalu mengoper generic itu ke hook lain, TypeScript sering kehilangan jejak inferensi.
Contoh kasus nyata: custom useFetch hook.
// TS 5.5: nested generic inferensi berfungsi sempurna
function useFetch<TData>(url: string) {
const [data, setData] = useState<TData | null>(null);
// useState<TData> terinferensi dari useFetch<TData>
// tanpa perlu explicit type arg tambahan
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData);
}, [url]);
return { data, isLoading: data === null };
}
// Pemanggilan: TData terinferensi dari return type transformer
const { data } = useFetch<User[]>('/api/users');
// data terdeteksi sebagai User[] | null — tanpa assertion manualDulu, skenario seperti ini sering bikin TypeScript “blank” dan menghasilkan unknown. Kamu terpaksa memberi type assertion atau menulis ulang generic di setiap level. Sekarang, compiler mengikuti rantai inferensi sampai ke akar. Buat kamu yang maintain design system atau shared library, ini penghematan waktu luar biasa.
Berapa Banyak Kode yang Bisa Kamu Hapus?
Saya coba audit beberapa project React open-source yang sudah upgrade ke TypeScript 5.5. Rata-rata pengurangan type annotations yang kelihatan:
- useCallback: turun 60-80% explicit type args
- forwardRef: turun 50% generic parameters
- useMemo: turun 40% type annotations
- Custom generic hooks: turun 70% explicit type passing
Totalnya, sekitar 30-40% type annotation boilerplate bisa dihapus. Itu bukan angka kecil buat codebase production dengan ribuan komponen. Lebih sedikit kode berarti lebih sedikit surface area untuk bug, lebih cepat onboarding developer baru, dan yang paling penting: fokus kamu kembali ke logika bisnis, bukan ke pertarungan melawan type checker.
Batasan yang Perlu Kamu Tahu Sebelum Upgrade
Jangan upgrade lalu berharap semua kode langsung rapi. Ada beberapa situasi di mana TypeScript 5.5 masih butuh bantuan:
- Higher-order functions dengan callback bertingkat tiga atau lebih. Inferensi nested memang membaik, tapi rantai yang terlalu dalam masih bisa bikin compiler kehilangan konteks.
- Conditional types yang bergantung pada inferensi. Kalau kamu pakai pola
T extends infer U ? ... : never, ada baiknya tetap tulis type arg eksplisit. - Generic components dengan children render props. Pattern ini masih butuh anotasi di beberapa edge case, terutama saat children function punya generic sendiri.
Strategi terbaik: upgrade dulu, jalankan tsc --noEmit, dan lihat error mana yang justru muncul. Beberapa kode yang sebelumnya lolos mungkin sekarang ketahuan type-safety gap-nya. Ini sebenarnya kabar baik, artinya TypeScript makin ketat menjaga kualitas kode-mu.
FAQ
Apakah upgrade ke TypeScript 5.5 bakal break kode React saya yang existing?
Kecil kemungkinannya. Justru sebaliknya: banyak explicit type args yang sebelumnya wajib sekarang jadi opsional. Tapi tetap jalankan tsc --noEmit untuk verifikasi. Beberapa edge case dengan conditional types mungkin butuh penyesuaian minor. Di tim saya sendiri, upgrade dari 5.4 ke 5.5 hanya menghasilkan 3 error baru di codebase 200k+ baris.
Apakah fitur inferensi ini otomatis aktif tanpa konfigurasi?
Ya. Semua improvement inferensi di TypeScript 5.5 aktif secara default. Kamu tidak perlu mengubah tsconfig.json, menambah compiler flags, atau menginstall plugin tambahan. Cukup npm install [email protected] dan inferensi yang lebih cerdas langsung bekerja.
Apakah ini berpengaruh ke performa kompilasi?
Justru sedikit lebih cepat pada beberapa skenario. Karena compiler tidak perlu memproses dan memverifikasi explicit type annotations yang sebelumnya wajib, beban kerja type checker berkurang. Namun di sisi lain, inferensi nested yang lebih dalam bisa sedikit menambah waktu di kasus tertentu. Efek bersihnya relatif netral sampai sedikit positif.
Apakah Next.js 14 dan 15 sudah support TypeScript 5.5?
Next.js 15.1 ke atas sudah mendukung TypeScript 5.5 secara penuh. Untuk Next.js 14, kamu bisa upgrade manual TypeScript ke 5.5 tanpa masalah kompatibilitas. Pastikan versi @types/react dan @types/react-dom juga diperbarui ke versi terbaru.
Kesimpulan
TypeScript 5.5 bukan sekadar update incremental. Buat React dan Next.js developer, ini adalah pembebasan dari boilerplate type annotation yang selama ini bikin kode terasa berat. useCallback, forwardRef, dan generic hooks kini bisa kamu tulis dengan lebih bersih, tanpa mengorbankan type safety.
Upgrade sekarang, hapus type args yang nggak perlu, dan nikmati developer experience yang lebih ringan. Kode-mu, aturanmu, tapi tetap aman di bawah pengawalan TypeScript.
Baca juga: Bug Runtime Hilang dalam Sekejap: Cara TypeScript 5.5 Paksa Kamu Tangani Semua State Tanpa Ampun dan Ts-Pattern Bikin Bundlemu Gendut? Ini Cara Pindah ke Native Pattern Matching Tanpa Nangis.
Referensi: TypeScript 5.5 Release Notes, React TypeScript Cheatsheet, TypeScript PR #57465.
]]>
