Type Guards: in и instanceof

Часть раздела Введение в TypeScript путешествия по JavaScript на Coddy. Урок 69 из 73.

При работе с объединениями типов (union types) вам часто нужно определить, с каким конкретно типом вы имеете дело, прежде чем вы сможете безопасно обращаться к свойствам или методам, специфичным для этого типа. Защитники типов (type guards) обеспечивают безопасный способ сужения типов во время выполнения.

Оператор in проверяет наличие свойства в объекте. Это особенно полезно, когда у вас есть объединение типов объектов с разными свойствами:

type Dog = { name: string; breed: string };
type Cat = { name: string; meow: () => void };

function petSound(pet: Dog | Cat) {
  if ('breed' in pet) {
    // Здесь TypeScript знает, что pet — это Dog
    console.log(`${pet.name} is a ${pet.breed}`);
  } else {
    // Здесь TypeScript знает, что pet — это Cat
    pet.meow();
  }
}

Оператор instanceof проверяет, был ли объект создан определенной функцией-конструктором или классом. Хотя мы еще не рассматривали классы, этот оператор полезен при работе со встроенными объектами JavaScript или пользовательскими классами:

function processValue(value: string | Date) {
  if (value instanceof Date) {
    // TypeScript знает, что value — это Date
    console.log(value.getFullYear());
  } else {
    // TypeScript знает, что value — это string
    console.log(value.toUpperCase());
  }
}

Оба оператора помогают компилятору TypeScript понять, с каким типом вы работаете, обеспечивая безопасный доступ к свойствам и методам, специфичным для конкретного типа.

Задание

Легко

Создайте функцию, которая обрабатывает различные типы медиа-объектов, используя оператор in для их различения.

Создайте два псевдонима типов:

Movie со свойствами title (string) и director (string)
Song со свойствами title (string) и artist (string)

Создайте функцию с именем getMediaInfo, которая:

Принимает параметр media типа Movie | Song
Использует оператор in для проверки существования свойства director
Возвращает "Movie: [title] directed by [director]", если это фильм
Возвращает "Song: [title] by [artist]", если это песня
Имеет явно указанный тип возвращаемого значения string

Создайте вторую функцию с именем processValue, которая:

Принимает параметр value типа string | Date
Использует оператор instanceof для проверки того, является ли value объектом Date
Возвращает год в виде числа, если это Date (используя getFullYear())
Возвращает длину строки в виде числа, если это строка
Имеет явно указанный тип возвращаемого значения number

Создайте тестовые данные:

movie1: { title: "Inception", director: "Christopher Nolan" }
song1: { title: "Bohemian Rhapsody", artist: "Queen" }
movie2: { title: "The Matrix", director: "The Wachowskis" }
song2: { title: "Imagine", artist: "John Lennon" }
testDate: new Date("2023-12-25")
testString: "TypeScript"

Выведите следующие результаты:

Вызовите getMediaInfo с movie1
Вызовите getMediaInfo с song1
Вызовите getMediaInfo с movie2
Вызовите getMediaInfo с song2
Вызовите processValue с testDate
Вызовите processValue с testString

Попробуйте сами

// TODO: Напишите ваш код здесь

// Создайте псевдонимы типов для Movie и Song


// Создайте функцию getMediaInfo


// Создайте функцию processValue


// Создайте тестовые данные
const movie1 = { title: "Inception", director: "Christopher Nolan" };
const song1 = { title: "Bohemian Rhapsody", artist: "Queen" };
const movie2 = { title: "The Matrix", director: "The Wachowskis" };
const song2 = { title: "Imagine", artist: "John Lennon" };
const testDate = new Date("2023-12-25");
const testString = "TypeScript";

// Выведите результаты
console.log(getMediaInfo(movie1));
console.log(getMediaInfo(song1));
console.log(getMediaInfo(movie2));
console.log(getMediaInfo(song2));
console.log(processValue(testDate));
console.log(processValue(testString));