Penjaga Tipe
Bekerjalah dengan aman menggunakan tipe unknown atau any melalui penjaga tipe
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!

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
asuntuk 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!

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
- Generik
- Alias Tipe dan Antarmuka
- Tipe Utilitas
- Penjaga Tipe