Ketik Penjaga

Penyempitan tipe adalah salah satu konsep terpenting dalam TypeScript. Namun sering kali, pelindung tipe standar seperti typeof atau instanceof tidak cukup untuk objek khusus yang kompleks. Di sinilah Pengaman Tipe Kustom berperan.

Pelindung Tipe Standar

Mari kita mulai dengan merangkum bagaimana TypeScript mempersempit tipe menggunakan operator JavaScript standar:

function processInput(val: string | number) {
  if (typeof val === 'string') {
    // Here 'val' is of type string
    console.log(val.toUpperCase());
  } else {
    // Here 'val' is of type number
    console.log(val.toFixed(2));
  }
}

Pelindung Tipe Khusus (operator is)

Untuk mendefinisikan pelindung tipe khusus, kita membuat fungsi yang mengembalikan predikat tipe dalam format parameterName is Type alih-alih tipe pengembalian boolean standar.

Fungsi tersebut harus mengembalikan boolean (true atau false). Jika ia mengembalikan true, TypeScript akan mengetahui bahwa parameter yang diteruskan adalah tipe yang ditentukan.

interface Cat {
  name: string;
  meow(): void;
}

interface Dog {
  name: string;
  bark(): void;
}

// This is a custom type guard
function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}

function makeNoise(pet: Cat | Dog) {
  if (isCat(pet)) {
    // Here TypeScript knows 'pet' is a Cat
    pet.meow();
  } else {
    // Here TypeScript knows 'pet' is a Dog
    pet.bark();
  }
}

Keamanan dan Pengecoran (as vs Pelindung Tipe)

Jenis casting (misalnya, val as Cat) memaksa kompiler untuk mempercayai pengembang tanpa verifikasi waktu proses yang sebenarnya. Jika objek runtime tidak memenuhi harapan, kode akan gagal secara diam-diam atau memunculkan pengecualian.

Sebaliknya, pelindung tipe khusus melakukan pemeriksaan waktu proses yang kuat dan dinamis, dengan aman dan akurat memberi tahu kompiler TypeScript tentang tipe variabel sebenarnya:

function processInput(input: unknown) {
  // unsafe casting: could crash if input does not have the split method
  // const str = input as string;
  // console.log(str.split(' '));

  // safe guard
  if (isString(input)) {
    console.log(input.split(' ')); // 100% Safe!
  }
}

Cobalah sendiri

Latihan 1: Pelindung Tipe Senar

Latihan 2: Penjaga Tipe Pengguna Premium

Latihan 3: Validasi Objek Kesalahan Kustom

Latihan 4: Penjaga Tipe Admin