TypeScript - Type Guards: A Beginner's Guide

Здравствуйте, будущая coding-суперзвезда! ? Я рад стать вашим проводником в увлекательное путешествие в мир TypeScript и Type Guards. Как某人, кто teaches компьютерные науки на протяжении многих лет, я могу сказать, что понимание type guards похоже на обладание суперсилой в вселенной TypeScript. Так что давайте окунемся и разблокируем эту силу вместе!

Что такое Type Guards?

Прежде чем мы углубимся в детали, давайте поймем, что такое type guards. Представьте, что вы охранник на модной вечеринке. Ваша работа - проверять приглашение каждого гостя и убедиться, что они могут находится в правильных зонах. Type guards в TypeScript выполняют аналогичную работу - они помогают компилятору проверять и сужать тип переменной в определенном блоке кода.

Теперь давайте рассмотрим три основные типа guard, о которых мы сегодня будем говорить:

Type Guard	Описание
typeof	Проверяет тип переменной
in	Проверяет, существует ли свойство в объекте
instanceof	Проверяет, является ли объект экземпляром класса

The 'typeof' Type Guard в TypeScript

The 'typeof' type guard как будто спрашивает: "Какой ты?" Он используется для проверки типа переменной. Давайте рассмотрим пример:

function printAll(strs: string | string[] | null) {
if (typeof strs === "object") {
for (const s of strs) {
console.log(s);
}
} else if (typeof strs === "string") {
console.log(strs);
} else {
// не делать ничего
}
}

В этом примере мы используем typeof для проверки, является ли strs объектом (что включает массивы) или строкой. Если это объект, мы проходим по нему. Если это строка, мы выводим ее напрямую.

Вот интересный способ запомнить это: представьте, что вы в зоомагазине и хотите узнать, является ли животное собакой или кошкой. Вы можете спросить: "Какой ты вид животного?" Это exactly то, что typeof делает в TypeScript!

The 'in' Type Guard в TypeScript

The 'in' type guard как будто спрашивает: "У тебя есть эта функция?" Он проверяет, существует ли свойство в объекте. Давайте рассмотрим пример:

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
if ("swim" in animal) {
animal.swim();
} else {
animal.fly();
}
}

В этом коде мы проверяем, есть ли у animal свойство swim. Если есть, мы假定 это Рыба и вызываем метод swim. Если нет, мы假定 это Птица и вызываем метод fly.

Представьте это так: если вы пытаетесь понять, является ли ваш новый питомец рыбой или птицей, вы можете проверить, есть ли у него плавники. Это то, что 'in' type guard делает - он проверяет наличие характерного свойства.

The 'instanceof' Type Guard в TypeScript

The 'instanceof' type guard как будто спрашивает: "Ты ли член этой семьи?" Он проверяет, является ли объект экземпляром определенного класса. Вот пример:

class Bird {
fly() {
console.log("Летаю...");
}
}

class Fish {
swim() {
console.log("Плыву...");
}
}

function move(pet: Bird | Fish) {
if (pet instanceof Bird) {
pet.fly();
} else {
pet.swim();
}
}

let myBird = new Bird();
move(myBird); // Вывод: Летаю...

В этом примере мы проверяем, является ли pet экземпляром класса Bird. Если да, мы вызываем метод fly. Если нет, мы假定 это Fish и вызываем метод swim.

Представьте, что вы на семейном собрании и пытаетесь понять, является ли кто-то частью семьи Джонсон. Вы можете спросить: "Ты Джонсон?" Это exactly то, что instanceof делает в TypeScript!

Использование всех вместе

Теперь, когда мы узнали о这三个 type guard, давайте посмотрим, как мы можем использовать их все вместе:

class Car {
drive() { console.log("Вжжжж!"); }
}

class Bicycle {
ride() { console.log("Крутить!"); }
}

type Vehicle = Car | Bicycle | string;

function useVehicle(vehicle: Vehicle) {
if (typeof vehicle === "string") {
console.log(`Транспортное средство: ${vehicle}`);
} else if (vehicle instanceof Car) {
vehicle.drive();
} else if ("ride" in vehicle) {
vehicle.ride();
} else {
console.log("Неизвестный тип транспортного средства");
}
}

useVehicle("Скейтборд");  // Вывод: Транспортное средство: Скейтборд
useVehicle(new Car());     // Вывод: Вжжжж!
useVehicle(new Bicycle()); // Вывод: Крутить!

В этом примере мы используем все три type guard:

1. Мы используем typeof для проверки, является ли транспортное средство строкой.
2. Мы используем instanceof для проверки, является ли это машиной.
3. Мы используем in для проверки, имеет ли оно метод ride (что указывает на Велосипед).

Это как быть супер детективом, используя все свои навыки, чтобы понять exactly, с каким видом транспортного средства вы имеете дело!

Заключение

И вот мы и arrived, мои coding-ученики! Мы прошли через страну TypeScript Type Guards, исследуя typeof, in, и instanceof guards. Эти мощные инструменты помогут вам писать безопасный и предсказуемый код, позволяя TypeScript лучше понимать ваши намерения.

Запомните, использование type guards похоже на дружескую беседу с вашим кодом. Вы просто задаете вопросы, чтобы лучше понять его. Так что в следующий раз, когда вы пишете код, не стесняйтесь - начните разговор с вашими переменными, используя эти type guards!

Продолжайте практиковаться, оставайтесь любопытными, и скоро вы будете охранять типы, как профи. Пока, счастливого кодирования! ??

Credits: Image by storyset