TypeScript Academy · Pelajaran

Penjaga Tipe

Bekerjalah dengan aman menggunakan tipe unknown atau any melalui penjaga tipe

Pelajaran 4 dari 410 langkah

Penjaga Tipe adalah pelajaran TypeScript 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 TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Pengenalan Penjaga Tipe

Penjaga Tipe

Selamat datang di pelajaran berikutnya! Dalam pelajaran ini, Anda akan mempelajari penjaga tipe, fitur canggih dalam TypeScript yang memungkinkan Anda mempersempit tipe saat program berjalan. Penjaga tipe memastikan kode Anda aman terhadap tipe dan terhindar dari kesalahan. Mari mulai!

Penjaga Tipe — ilustrasi 1

Apa Itu Penjaga Tipe?

Penjaga tipe adalah fungsi atau konstruksi yang menentukan tipe suatu variabel saat program berjalan. Penjaga ini memungkinkan TypeScript mempersempit tipe variabel dalam blok kode tertentu.

Contoh:

Tugas: Tulis fungsi yang menggunakan penjaga tipe untuk memeriksa apakah suatu nilai berupa angka.

function isString(value: unknown): boolean {
  return typeof value === "string";
}

function printLength(value: unknown): void {
  if (isString(value)) {
    console.log(value.length); 
// TypeScript knows 'value' is a string here
  } else {
    console.log("Value is not a string");
  }
}

printLength("Hello"); 
// Output: 5
printLength(42); 
// Output: Value is not a string

Menggunakan Pemeriksaan Tipe untuk Nilai Primitif

Menggunakan typeof untuk Nilai Primitif

Anda dapat menggunakan operator typeof untuk memeriksa tipe nilai primitif seperti teks, angka, dan nilai boolean.

Contoh:

Tugas: Gunakan typeof untuk membedakan teks dan angka dalam sebuah fungsi.

function printValue(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String value: ${value}`);
  } else {
    console.log(`Number value: ${value}`);
  }
}

printValue("Hello"); 
// Output: String value: Hello
printValue(42); 
// Output: Number value: 42

Menggunakan Pemeriksaan Instance untuk Kelas

Menggunakan instanceof untuk Kelas

Operator instanceof memeriksa apakah suatu objek merupakan instans dari kelas tertentu. Contoh:

Tugas: Gunakan instanceof untuk menangani berbagai instans kelas dalam sebuah fungsi.

class Dog {
  bark(): void {
    console.log("Woof!");
  }
}

class Cat {
  meow(): void {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat): void {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

let dog = new Dog();
let cat = new Cat();
makeSound(dog); 
// Output: Woof!
makeSound(cat); 
// Output: Meow!

Menggunakan Penjaga Tipe Kustom

Anda dapat membuat fungsi penjaga tipe kustom menggunakan tipe hasil value is Type. Contoh:

interface Car {
  make: string;
  model: string;
}

interface Bike {
  brand: string;
  type: string;
}

function isCar(vehicle: Car | Bike): vehicle is Car {
  return (vehicle as Car).make !== undefined;
}

function printVehicle(vehicle: Car | Bike): void {
  if (isCar(vehicle)) {
    console.log(`Car: ${vehicle.make} ${vehicle.model}`);
  } else {
    console.log(`Bike: ${vehicle.brand} ${vehicle.type}`);
  }
}

let car: Car = { make: "Toyota", model: "Corolla" };
let bike: Bike = { brand: "Yamaha", type: "Sport" };

printVehicle(car); 
// Output: Car: Toyota Corolla
printVehicle(bike);
 // Output: Bike: Yamaha Sport

Union Terdiskriminasi

Union terdiskriminasi menggunakan properti umum untuk membedakan berbagai tipe. Contoh:

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function calculateArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.width * shape.height;
  }
}

let circle: Circle = { kind: "circle", radius: 5 };
let rectangle: Rectangle = { kind: "rectangle", width: 10, height: 20 };

console.log(calculateArea(circle)); 
// Output: 78.53981633974483
console.log(calculateArea(rectangle)); 
// Output: 200

Pemeriksaan Kelengkapan Kasus

Pemeriksaan kelengkapan kasus memastikan semua kemungkinan kasus dalam union terdiskriminasi telah ditangani. Contoh:

function getShapeInfo(shape: Shape): string {
  switch (shape.kind) {
    case "circle":
      return `Circle with radius ${shape.radius}`;
    case "rectangle":
      return `Rectangle with dimensions ${shape.width}x${shape.height}`;
    default:
      // This line ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

Kesalahan Umum

Berikut beberapa kesalahan umum saat menggunakan penjaga tipe:

  • Lupa menyertakan semua kasus dalam tipe union.
  • Tidak menggunakan penjaga tipe di semua cabang logika bersyarat.
  • Menyalahgunakan as untuk mengonversi tipe tanpa pemeriksaan yang tepat.

Tips: Selalu gunakan penjaga tipe untuk mempersempit tipe sebelum mengakses properti atau metodenya yang spesifik!

Kerja Bagus!

Selamat! Anda telah mempelajari cara menggunakan penjaga tipe dalam TypeScript untuk mempersempit tipe saat program berjalan dan memastikan keamanan tipe. Penjaga tipe sangat penting untuk menangani tipe union yang kompleks dan membuat kode yang andal serta bebas kesalahan. Pada pelajaran berikutnya, kita akan mempelajari tipe terpetakan tingkat lanjut. Mari terus menulis kode!

Penjaga Tipe — ilustrasi 10
Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
101
Pelajaran
352

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penjaga Tipe” gratis?

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

Apa yang akan aku pelajari di “Penjaga Tipe”?

Bekerjalah dengan aman menggunakan tipe unknown atau any melalui penjaga tipe Kamu berlatih TypeScript 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 TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript 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 “Penjaga Tipe” 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 TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript 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

  1. Generik
  2. Alias Tipe dan Antarmuka
  3. Tipe Utilitas
  4. Penjaga Tipe
← Kembali ke TypeScript Academy