TypeScript memang powerful, tapi ada beberapa "jebakan" yang bisa bikin frustasi. Berikut daftarnya beserta solusinya:
1. Type Inference yang Menyesatkan
Masalah: TypeScript kadang infer tipe yang tidak diharapkan.
const arr = [1, 2, "3"];
Solusi: Gunakan type annotation eksplisit.
const arr: number[] = [1, 2, 3];
2. any yang Diam-diam Menyusup
Masalah: any menghilangkan type safety.
let data: any = "Hello";
data = 42;
Solusi: Hindari any, gunakan unknown atau type yang lebih spesifik.
let data: unknown = "Hello";
if (typeof data === "string") {
console.log(data.toUpperCase());
}
3. Optional vs Null/Undefined
Masalah: Bingung antara ?, null, dan undefined.
interface User {
name?: string;
}
const user: User = {};
console.log(user.name?.toUpperCase());
console.log(user.name.toUpperCase());
Solusi: Pahami perbedaannya:
? = Properti opsional (bisa undefined).
null = Nilai eksplisit null.
undefined = Tidak ada nilai.
4. Type Narrowing yang Tidak Berfungsi
Masalah: TypeScript tidak selalu menyempitkan tipe dengan benar.
function isString(x: any): x is string {
return typeof x === "string";
}
let value: string | number = "Hello";
if (isString(value)) {
console.log(value.toUpperCase());
} else {
console.log(value.toFixed(2));
}
Solusi: Gunakan type guards yang lebih eksplisit (typeof, instanceof, dll).
5. readonly yang Tidak Sepenuhnya Immutable
Masalah: readonly hanya berlaku di level terluar.
interface Config {
readonly apiUrl: string;
readonly endpoints: string[];
}
const config: Config = { apiUrl: "...", endpoints: ["/a", "/b"] };
config.endpoints.push("/c");
Solusi: Gunakan ReadonlyArray atau DeepReadonly (dengan utility type/library).
interface Config {
readonly apiUrl: string;
readonly endpoints: ReadonlyArray<string>;
}
6. Overloading Function yang Membingungkan
Masalah: Overload signature bisa rumit.
function greet(name: string): string;
function greet(age: number): string;
function greet(value: any): string {
return typeof value === "string" ? `Hello, ${value}` : `Age: ${value}`;
}
Solusi: Gunakan union types jika memungkinkan.
function greet(value: string | number): string {
return typeof value === "string" ? `Hello, ${value}` : `Age: ${value}`;
}
7. this Context yang Hilang
Masalah: this bisa berubah di callback.
class Button {
onClick() {
console.log("Clicked!");
}
addListener() {
document.addEventListener("click", this.onClick);
}
}
Solusi: Gunakan arrow function atau .bind(this).
class Button {
onClick = () => {
console.log("Clicked!");
};
addListener() {
document.addEventListener("click", this.onClick);
}
}
8. Generics yang Terlalu Kompleks
Masalah: Generics bisa bikin kode sulit dibaca.
function merge<T, U>(a: T, b: U): T & U {
return { ...a, ...b };
}
Solusi: Gunakan default type atau batasi dengan constraints.
function merge<T extends object, U extends object>(a: T, b: U): T & U {
return { ...a, ...b };
}
9. Module Resolution yang Membingungkan
Masalah: Import bisa error karena moduleResolution tidak sesuai.
import { something } from "./file.ts";
Solusi: Pahami konfigurasi tsconfig.json ("node", "classic", dll).
10. Strict Null Checks yang Ketat
Masalah: strictNullChecks bisa bikin banyak error.
let name: string;
name = null;
Solusi: Gunakan union type (string | null) atau optional chaining (?.).
Kesimpulan
Selalu aktifkan strict: true di tsconfig.json.
Hindari any, gunakan unknown atau type yang lebih spesifik.
Pahami perbedaan null, undefined, dan optional properties.
Gunakan type guards untuk narrowing.
Hati-hati dengan mutability (readonly, const, ReadonlyArray).
Semoga cheat sheet ini membantu menghindari jebakan TypeScript! 🚀
