Frontend Academy · Pelajaran

Mode Ketat dan Menghapus any

Aktifkan semua flag ketat di tsconfig, gunakan unknown sebagai pengganti any, terapkan assertion tipe dengan aman, dan migrasikan file bertipe lemah ke mode ketat.

Mode Ketat dan Menghapus any adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Mode Strict?

strict: true dalam tsconfig.json mengaktifkan semua penanda keamanan TypeScript — standar untuk proyek yang serius. Pengaturan ini mendeteksi bug null, parameter tanpa tipe, dan penetapan yang tidak aman saat kompilasi.

Yang Diaktifkan oleh strict

strict adalah penanda meta yang mengaktifkan: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, noImplicitThis, useUnknownInCatchVariables.

strictNullChecks

Tanpa pengaturan ini, null dan undefined dapat ditetapkan ke setiap tipe — sumber bug yang terus muncul. Dengan pengaturan ini, Anda harus menangani kasus null secara eksplisit.

// Without strictNullChecks — runtime error:
function greet(name: string) { return name.toUpperCase(); }
greet(null); // compiler allows, crashes at runtime

// With strictNullChecks:
function greet(name: string | null) {
  if (name == null) return '';
  return name.toUpperCase();
}

noImplicitAny

Parameter tanpa anotasi tipe secara bawaan menjadi any tanpa penanda ini — sehingga sistem tipe dilewati secara diam-diam. Dengan noImplicitAny, Anda harus memberikan anotasi pada parameter tersebut.

// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any

// With:
function format(value: string) { return value.toUpperCase(); }

strictPropertyInitialization

Properti class tanpa penginisialisasi yang pasti dianggap mungkin bernilai undefined. Inisialisasikan properti tersebut atau gunakan operator penetapan pasti !.

class User {
  name!: string;     // tell TS: I'll set this elsewhere
  age = 0;           // default initialiser
  email: string;     // ERROR with strictPropertyInitialization
  constructor(email: string) { this.email = email; } // FIX: init in ctor
}

Gunakan unknown, Bukan any

any menonaktifkan pemeriksaan tipe. unknown aman secara tipe — Anda harus mempersempit tipenya sebelum digunakan. Selalu utamakan unknown.

// any — no checks, bug magnet:
function parse(input: any) {
  return input.toUpperCase(); // compiler is fine, runtime may crash
}

// unknown — must narrow:
function parse(input: unknown) {
  if (typeof input === 'string') {
    return input.toUpperCase();
  }
  throw new Error('Expected string');
}

Penegasan Tipe yang Aman

Jika Anda harus melakukan penegasan (karena Anda lebih mengetahui tipenya daripada TS), utamakan sintaks as. Jangan melakukan penegasan ganda (x as unknown as T) kecuali benar-benar tidak ada pilihan lain — ini merupakan indikasi kode yang bermasalah.

const el = document.getElementById('app') as HTMLDivElement;
el.style.background = 'blue';

// Safer alternative: runtime check
const el = document.getElementById('app');
if (!(el instanceof HTMLDivElement)) throw new Error('app missing');
el.style.background = 'blue'; // narrowed to HTMLDivElement

Menghapus any dari Proyek

Strateginya: aktifkan strict, lalu perbaiki error yang muncul satu file demi satu file. Gunakan unknown dan lakukan penyempitan tipe. Tambahkan @ts-expect-error beserta komentar TODO untuk bagian yang memang diketahui bermasalah agar bagian tersebut tidak dapat diabaikan.

Aturan Lint: no-explicit-any

Tambahkan @typescript-eslint/no-explicit-any ke konfigurasi ESLint untuk mencegah penambahan any baru.

// .eslintrc.json
{
  "rules": {
    "@typescript-eslint/no-explicit-any": "error"
  }
}

strictFunctionTypes

Menerapkan pemeriksaan parameter fungsi secara kontravarian — mencegah penetapan fungsi dengan tipe parameter yang lebih umum daripada yang diharapkan, yang dapat menyebabkan aplikasi gagal saat runtime.

Tipe Variabel Catch

useUnknownInCatchVariables membuat catch (e) menyimpulkan e: unknown, bukan any. Anda harus mempersempit tipe tersebut sebelum mengakses properti.

try {
  doRisky();
} catch (e) {
  // e is unknown
  if (e instanceof Error) {
    console.error(e.message);
  } else {
    console.error('Unknown error', e);
  }
}

Kiat Migrasi

Aktifkan strict pada proyek baru sejak hari pertama. Untuk proyek lama, aktifkan penanda secara bertahap. Mulailah dengan strictNullChecks (dampak terbesar), lalu noImplicitAny. Gunakan //@ts-expect-error, bukan //@ts-ignore, agar komentar tersebut dapat dihapus ketika masalahnya sudah diperbaiki.

Pemeriksaan Singkat

Mengapa unknown lebih aman daripada any ketika Anda tidak mengetahui tipe suatu nilai?

Ringkasan: Mode Strict

Aktifkan strict: true untuk keamanan penuh. strictNullChecks memaksa Anda menangani null. noImplicitAny mengharuskan anotasi parameter. Gunakan strictPropertyInitialization untuk properti class. Gunakan unknown, bukan any — lakukan penyempitan dengan penjaga tipe. Hindari penegasan ganda. Gunakan lint dengan no-explicit-any. Migrasikan kode lama satu file demi satu file menggunakan penanda @ts-expect-error.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mode Ketat dan Menghapus any” gratis?

Ya — teks lengkap “Mode Ketat dan Menghapus any” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mode Ketat dan Menghapus any”?

Aktifkan semua flag ketat di tsconfig, gunakan unknown sebagai pengganti any, terapkan assertion tipe dengan aman, dan migrasikan file bertipe lemah ke mode ketat. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Mode Ketat dan Menghapus any” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Tipe Literal Templat
Dekorator dan Metadata
TypeScript dengan React: Generik FC dan Hook
Mode Ketat dan Menghapus any

← Kembali ke Frontend Academy