Frontend Academy · Pelajaran

Pengecilan Jenis: typeof instanceof union berbeza

Gunakan pengawal jenis untuk mengecilkan jenis union semasa masa jalan dengan typeof, instanceof dan corak union berbeza.

Pelajaran 4 daripada 413 langkah

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 here

Semakan 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.

Percuma untuk bermula

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

  1. Generik: T extends dan kekangan
  2. Jenis Utiliti: Partial Required Pick Omit
  3. Jenis Dipetakan dan Jenis Bersyarat
  4. Pengecilan Jenis: typeof instanceof union berbeza
← Kembali ke Frontend Academy