Kesalahan Umum pada TypeScript dan Cara Mengatasinya

TypeScript, sebuah superset pengetikan statis dari JavaScript, menawarkan pengembang keamanan pengetikan dan perkakas yang lebih baik. Namun, sistem pengetikannya yang ketat dapat menimbulkan berbagai kesalahan, terutama bagi mereka yang beralih dari JavaScript. Di bawah ini, kita akan membahas beberapa kesalahan umum pada TypeScript dan cara mengatasinya.

1. “Tidak dapat menemukan nama 'variableName'”

Penyebab: Hal ini disebabkan oleh penggunaan variabel sebelum mendeklarasikannya atau kesalahan pengetikan pada nama variabel.

Perbaikan: Pastikan variabel dideklarasikan sebelum digunakan dan periksa kesalahan pengetikan Deklarasikan variabel dengan benar, jika Anda ingin variabel tersebut tersedia secara global.

let count = 5;
console.log(count); // ✅ No error

sumber: dev.to

2. “Jenis 'X' tidak dapat ditetapkan untuk jenis 'Y'”

Penyebab: Hal ini terjadi ketika Anda mencoba menetapkan nilai dari satu tipe ke variabel yang dideklarasikan dengan tipe lain.

Perbaikan: Dan, jika Anda yakin dengan tipenya, Anda dapat menggunakan pernyataan tipe (as).

let num: number = 10;
// let str: string = num; ❌ Error
let str: string = num.toString(); // ✅ Fix

3. “Properti 'X' tidak ada pada tipe 'Y'”

Penyebab: Ini karena objek tidak memiliki key/property.

Perbaikan: Pastikan untuk menyertakan properti dalam definisi tipe atau gunakan pernyataan tipe.

interface User {
name: string;
}

let user: User = { name: "Alice" };
// console.log(user.age); ❌ Error

4. “Argumen bertipe 'X' tidak dapat ditetapkan ke parameter bertipe 'Y'”

Penyebab: Gagal mengoper argumen dengan tipe yang diharapkan ke fungsi.

Perbaikan: Pastikan tipe parameter fungsi sesuai dengan input yang diharapkan.

function greet(name: string) {
console.log(`Hello, ${name}`);
}

greet("John"); // ✅ No error
// greet(42); ❌ Error

5. “Objek mungkin 'null' atau 'tidak terdefinisi'”

Penyebab: TypeScript memiliki pemeriksaan null yang ketat untuk menandai kasus-kasus ketika sebuah variabel dapat menjadi null atau tidak terdefinisi.

Perbaikan: Gunakan perangkaian opsional (?.), penggabungan null (??), atau secara eksplisit memeriksa null.

let user: { name?: string } = {};
console.log(user.name?.toUpperCase()); // ✅ No error

6. “Fungsi yang tipe deklarasinya bukan 'void' atau 'any' harus mengembalikan nilai”

Penyebab: Fungsi yang memiliki keterangan tipe pengembalian harus mengembalikan nilai.

Perbaikan: Pastikan fungsi selalu mengembalikan nilai.

function add(a: number, b: number): number {
return a + b; // ✅ No error
}

7. “TypeScript mengeluh tentang penggunaan 'apa saja'”

Penyebabnya: TypeScript tidak menyarankan untuk menggunakan apapun, karena melanggar sistem tipe.

Perbaikan: Hindari penggunaan apapun, targetkan tipe yang lebih sempit

let data: unknown = "Hello";
if (typeof data === "string") {
console.log(data.toUpperCase()); // ✅ Type-safe
}

8. “Tidak dapat menetapkan ke 'X' karena ini adalah properti hanya-baca”

Penyebab: Mencoba mengubah properti hanya-baca.

Perbaikan: Jangan ubah properti hanya-baca, atau hapus pengubah hanya-baca jika mutasi diperlukan.

interface Config {
readonly apiKey: string;
}

let config: Config = { apiKey: "12345" };
// config.apiKey = "67890"; ❌ Error

Kesimpulan

Sistem tipe TypeScript membantu menangkap kesalahan sejak dini, tetapi juga dapat menimbulkan tantangan. Memahami kesalahan umum ini dan perbaikannya akan membuat pengembangan menjadi lebih lancar dan membantu meningkatkan potensi penuh TypeScript.

Kembali ke>>>> Menggunakan TypeScript dengan JavaScript: Panduan Komprehensif