Type Guards: in & instanceof

Parte da seção Introdução ao TypeScript do Journey de JavaScript da Coddy. Lição 69 de 73.

Ao trabalhar com tipos de união, geralmente é necessário determinar com qual tipo específico você está lidando antes de poder acessar com segurança propriedades ou métodos específicos do tipo. Os protetores de tipo oferecem uma maneira segura de restringir os tipos em tempo de execução.

O operador in verifica se uma propriedade existe em um objeto. Isso é particularmente útil quando você tem uma união de tipos de objeto com propriedades diferentes:

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

function petSound(pet: Dog | Cat) {
  if ('breed' in pet) {
    // O TypeScript sabe que pet é um Dog aqui
    console.log(`${pet.name} is a ${pet.breed}`);
  } else {
    // O TypeScript sabe que pet é um Cat aqui
    pet.meow();
  }
}

O operador instanceof verifica se um objeto foi criado por uma função construtora ou classe específica. Embora ainda não tenhamos abordado classes, este operador é útil ao trabalhar com objetos JavaScript integrados ou classes personalizadas:

function processValue(value: string | Date) {
  if (value instanceof Date) {
    // O TypeScript sabe que value é um Date
    console.log(value.getFullYear());
  } else {
    // O TypeScript sabe que value é uma string
    console.log(value.toUpperCase());
  }
}

Ambos os operadores ajudam o compilador do TypeScript a entender com qual tipo você está trabalhando, permitindo o acesso seguro a propriedades e métodos específicos do tipo.

Desafio

Fácil

Crie uma função que processe diferentes tipos de itens de mídia usando o operador in para distingui-los.

Crie dois aliases de tipo:

Movie com as propriedades title (string) e director (string)
Song com as propriedades title (string) e artist (string)

Crie uma função chamada getMediaInfo que:

Receba um parâmetro media do tipo Movie | Song
Use o operador in para verificar se a propriedade director existe
Retorne "Movie: [title] directed by [director]" se for um filme
Retorne "Song: [title] by [artist]" se for uma música
Tenha um tipo de retorno explícito string

Crie uma segunda função chamada processValue que:

Receba um parâmetro value do tipo string | Date
Use o operador instanceof para verificar se value é um Date
Retorne o ano como um número se for uma data (usando getFullYear())
Retorne o comprimento da string como um número se for uma string
Tenha um tipo de retorno explícito number

Crie os dados de teste:

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"

Imprima as seguintes saídas:

Chame getMediaInfo com movie1
Chame getMediaInfo com song1
Chame getMediaInfo com movie2
Chame getMediaInfo com song2
Chame processValue com testDate
Chame processValue com testString

Experimente você mesmo

// TODO: Escreva seu código aqui

// Cria aliases de tipo para Movie e Song


// Cria a função getMediaInfo


// Cria a função processValue


// Cria dados de teste
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";

// Imprime as saídas
console.log(getMediaInfo(movie1));
console.log(getMediaInfo(song1));
console.log(getMediaInfo(movie2));
console.log(getMediaInfo(song2));
console.log(processValue(testDate));
console.log(processValue(testString));