Pengecilan Jenis: typeof instanceof union berbeza
Gunakan pengawal jenis untuk mengecilkan jenis union semasa masa jalan dengan typeof, instanceof dan corak union berbeza.
Pengecilan Jenis: typeof instanceof union berbeza 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.
Apakah Penyempitan Jenis?
TypeScript bermula dengan jenis yang luas (contohnya, string | number). Penyempitan ialah proses memperincikan jenis kepada jenis yang lebih khusus di dalam blok bersyarat. TypeScript menjejaki penyempitan secara automatik.
Penyempitan typeof
Operator typeof menyempitkan jenis primitif. Di dalam blok if, TypeScript mengetahui jenis yang tepat.
function format(value: string | number | boolean): string {
if (typeof value === 'string') {
return value.toUpperCase(); // string here
}
if (typeof value === 'number') {
return value.toFixed(2); // number here
}
return String(value); // boolean here
}Penyempitan instanceof
instanceof menyempitkan tika kelas. TypeScript mengetahui kelas khusus di dalam blok tersebut.
function processError(err: unknown) {
if (err instanceof Error) {
console.error(err.message); // Error methods available
} else if (err instanceof Response) {
console.error('HTTP error:', err.status);
} else {
console.error('Unknown:', err);
}
}Penyempitan Kebenaran
TypeScript menyingkirkan null dan undefined daripada jenis dalam semakan nilai benar.
function printLength(value: string | null | undefined) {
if (value) {
console.log(value.length); // string here (null/undefined filtered)
}
}Penyempitan Kesamaan
Kesamaan ketat menyempitkan kepada jenis literal. Ini berguna untuk kesatuan terbeza dan enum rentetan.
function handle(action: 'submit' | 'cancel' | 'reset') {
if (action === 'submit') {
// action is exactly 'submit'
doSubmit();
}
}Penyempitan Operator in
Operator in menyempitkan jenis kesatuan objek dengan menyemak sifat yang wujud.
interface Cat { meow(): void; }
interface Dog { bark(): void; }
function speak(animal: Cat | Dog) {
if ('meow' in animal) {
animal.meow(); // Cat
} else {
animal.bark(); // Dog
}
}Kesatuan Terbeza — Penyempitan Berasaskan Tag
Kesatuan terbeza mempunyai sifat jenis literal yang dikongsi (iaitu penentu). TypeScript menyempitkan kesatuan dalam switch/if berdasarkan sifat tersebut.
type LoadingState = { status: 'loading' };
type SuccessState = { status: 'success'; data: User[] };
type ErrorState = { status: 'error'; message: string };
type State = LoadingState | SuccessState | ErrorState;
function render(state: State) {
switch (state.status) {
case 'loading': return '<Spinner />';
case 'success': return renderUsers(state.data); // state.data available
case 'error': return renderError(state.message);
}
}Predikat Jenis — Pengawal Jenis Tersuai
Fungsi predikat jenis menyempitkan jenis untuk pemanggil. Gunakan param is Type sebagai jenis pulangan.
function isUser(value: unknown): value is User {
return (
typeof value === 'object' &&
value !== null &&
'name' in value &&
typeof (value as User).name === 'string'
);
}
const data: unknown = await fetchJson('/api/me');
if (isUser(data)) {
console.log(data.name); // typed as User
}Fungsi Penegasan
Fungsi penegasan melontarkan ralat jika syarat gagal dan menyempitkan jenis selepas panggilan tersebut.
function assertIsString(val: unknown): asserts val is string {
if (typeof val !== 'string') throw new Error('Expected string');
}
const val: unknown = getInput();
assertIsString(val);
console.log(val.toUpperCase()); // val is string hereSemakan Kelengkapan
Apabila switch pada kesatuan terbeza meninggalkan jenis never dalam cabang lalai, TypeScript memastikan semua kes dikendalikan. Tambahkan lalai yang menetapkan nilai kepada never untuk mendapatkan ralat kompilasi jika varian baharu ditambahkan.
function render(state: State): string {
switch (state.status) {
case 'loading': return '...';
case 'success': return state.data.length.toString();
case 'error': return state.message;
default:
const _exhaustive: never = state;
throw new Error('Unhandled state: ' + _exhaustive);
}
}Penyempitan dengan Array.isArray
Array.isArray() menyempitkan nilai kepada jenis tatasusunan.
function processInput(input: string | string[]) {
if (Array.isArray(input)) {
return input.join(', '); // string[]
}
return input.toUpperCase(); // string
}Semakan Ringkas
Teknik penyempitan manakah yang menggunakan sifat literal yang dikongsi untuk membezakan varian bagi jenis kesatuan?
Imbas Kembali: Penyempitan TypeScript
typeof untuk jenis primitif. instanceof untuk kelas. Operator in untuk bentuk objek. Nilai benar menapis null/undefined. Kesatuan terbeza dengan sifat literal yang dikongsi membolehkan pernyataan switch yang lengkap. Predikat jenis tersuai (is) untuk semakan masa jalan yang kompleks. Semakan kelengkapan dengan never dalam nilai lalai.
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 “Pengecilan Jenis: typeof instanceof union berbeza” percuma?
Ya — teks penuh “Pengecilan Jenis: typeof instanceof union berbeza” 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 “Pengecilan Jenis: typeof instanceof union berbeza”?
Gunakan pengawal jenis untuk mengecilkan jenis union semasa masa jalan dengan typeof, instanceof dan corak union berbeza. 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 “Pengecilan Jenis: typeof instanceof union berbeza” 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
- Generik: T extends dan kekangan
- Jenis Utiliti: Partial Required Pick Omit
- Jenis Dipetakan dan Jenis Bersyarat
- Pengecilan Jenis: typeof instanceof union berbeza