Mod Ketat dan Menghapuskan any
Dayakan semua bendera ketat dalam tsconfig, gunakan unknown sebagai ganti any, gunakan penegasan jenis dengan selamat, dan pindahkan fail yang ditaip secara lemah kepada mod ketat.
Mod Ketat dan Menghapuskan any ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Mengapa Mod Ketat?
strict: true dalam tsconfig.json mengaktifkan setiap bendera keselamatan TypeScript — aras piawai untuk projek serius. Ia mengesan pepijat nilai kosong, parameter tanpa jenis dan penetapan tidak selamat pada masa kompilasi.
Perkara yang Diaktifkan oleh Mod Ketat
Mod ketat ialah bendera meta yang mengaktifkan: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, noImplicitThis, useUnknownInCatchVariables.
strictNullChecks
Tanpanya, nilai kosong dan nilai yang tidak ditakrifkan boleh diberikan kepada setiap jenis — punca pepijat yang berterusan. Dengan mengaktifkannya, anda mesti mengendalikan kes nilai kosong 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 jenis secara lalai menjadi jenis sebarang tanpa bendera ini — lalu memintas sistem jenis secara senyap. Dengan noImplicitAny, anda mesti membuat anotasi padanya.
// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any
// With:
function format(value: string) { return value.toUpperCase(); }strictPropertyInitialization
Sifat kelas tanpa pemula pasti menjadi mungkin tidak ditakrifkan. Sama ada mulakannya 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 Jenis Tidak Diketahui dan Bukannya Jenis Sebarang
any tidak menyertai pemeriksaan jenis. unknown selamat dari segi jenis — anda mesti mengecilkan jenisnya sebelum digunakan. Sentiasa utamakan jenis tidak diketahui.
// 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 Jenis dengan Selamat
Jika anda mesti membuat penegasan (anda lebih mengetahui daripada TS), utamakan sintaks as. Jangan buat penegasan berganda (x as unknown as T) kecuali anda benar-benar tiada pilihan — itu tanda bau kod.
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 HTMLDivElementMenghapuskan Jenis Sebarang daripada Projek
Strategi: aktifkan mod ketat, kemudian betulkan ralat yang terhasil satu fail pada satu masa. Gunakan jenis tidak diketahui bersama pengecilan jenis. Tambahkan @ts-expect-error dengan ulasan TODO untuk bahagian yang diketahui bermasalah supaya bahagian itu tidak boleh diabaikan.
Peraturan Analisis Kod: no-explicit-any
Tambahkan @typescript-eslint/no-explicit-any pada konfigurasi ESLint anda untuk menghalang jenis any baharu daripada ditambahkan.
// .eslintrc.json
{
"rules": {
"@typescript-eslint/no-explicit-any": "error"
}
}strictFunctionTypes
Menguatkuasakan pemeriksaan parameter fungsi secara kontravarian — menghalang penetapan fungsi dengan jenis parameter yang lebih luas daripada jangkaan, yang boleh menyebabkan aplikasi ranap semasa masa jalan.
Jenis Pemboleh Ubah Tangkapan
useUnknownInCatchVariables membuat inferens catch (e) sebagai e: unknown, bukannya jenis sebarang. Anda mesti mengecilkan jenisnya sebelum mengakses sifat.
try {
doRisky();
} catch (e) {
// e is unknown
if (e instanceof Error) {
console.error(e.message);
} else {
console.error('Unknown error', e);
}
}Petua Migrasi
Aktifkan mod ketat untuk projek baharu sejak hari pertama. Untuk projek legasi: aktifkan bendera secara berperingkat. Mulakan dengan strictNullChecks (manfaat terbesar), kemudian noImplicitAny. Gunakan //@ts-expect-error dan bukannya //@ts-ignore supaya ulasan itu boleh dibuang apabila isu telah dibaiki.
Semakan Pantas
Mengapakah jenis unknown lebih selamat daripada any apabila anda tidak mengetahui jenis sesuatu nilai?
Imbas Kembali: Mod Ketat
Aktifkan mod ketat untuk keselamatan menyeluruh. strictNullChecks memaksa pengendalian nilai kosong. noImplicitAny memerlukan anotasi parameter. Gunakan strictPropertyInitialization untuk medan kelas. Gunakan jenis tidak diketahui dan bukannya jenis sebarang — kecilkan jenis dengan pengawal jenis. Elakkan penegasan berganda. Jalankan analisis kod dengan no-explicit-any. Migrasikan kod legasi satu fail pada satu masa menggunakan penanda @ts-expect-error.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Mod Ketat dan Menghapuskan any” percuma?
Ya — teks penuh “Mod Ketat dan Menghapuskan any” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Mod Ketat dan Menghapuskan any”?
Dayakan semua bendera ketat dalam tsconfig, gunakan unknown sebagai ganti any, gunakan penegasan jenis dengan selamat, dan pindahkan fail yang ditaip secara lemah kepada mod ketat. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Mod Ketat dan Menghapuskan any” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Jenis Literal Templat
- Penghias dan Metadata
- TypeScript dengan React: Generik FC dan Hook
- Mod Ketat dan Menghapuskan any