Menu
CoddyTech

Trabalhando com Tipos de União

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

Quando você trabalha com tipos de união, o TypeScript impõe uma regra de segurança importante: você só pode acessar propriedades e métodos que existem em todos os tipos na união. Isso evita erros em tempo de execução, mas significa que você precisa de técnicas especiais para acessar recursos específicos de cada tipo.

Considere uma função que aceita uma string ou um array de strings. Ambos os tipos possuem uma propriedade length, então você pode acessá-la com segurança:

function getLength(input: string | string[]): number {
  return input.length; // Seguro - ambos os tipos possuem length
}

No entanto, se você tentar usar um método que existe apenas em um tipo, o TypeScript exibirá um erro. Para acessar com segurança membros específicos de um tipo, você precisa de um guardião de tipo — uma verificação em tempo de execução que restringe o tipo:

function processInput(input: string | string[]): void {
  if (typeof input === "string") {
    // TypeScript sabe que input é uma string aqui
    console.log(input.toUpperCase());
  } else {
    // TypeScript sabe que input é string[] aqui
    console.log(input.join(", "));
  }
}

O operador typeof é um dos protetores de tipo mais comuns. Após a verificação, o TypeScript reduz automaticamente o tipo dentro de cada ramificação, dando a você acesso completo a propriedades e métodos específicos do tipo, mantendo ao mesmo tempo a total segurança de tipos.

challenge icon

Desafio

Fácil

Crie uma função chamada processData que aceite um parâmetro chamado input do tipo string | string[] e retorne um number. A função deve usar um protetor de tipo para determinar o tipo de entrada e comportar-se da seguinte forma:

  • Se a entrada for uma string, retorne o comprimento dela
  • Se a entrada for uma string[], retorne o número total de caracteres em todas as strings do array

Crie outra função chamada formatMessage que aceite um parâmetro chamado content do tipo number | boolean e retorne uma string. A função deve usar um protetor de tipo para determinar o tipo de entrada e comportar-se da seguinte forma:

  • Se a entrada for um number, retorne "Value: [number]"
  • Se a entrada for um boolean, retorne "Status: [boolean]"

As seguintes entradas serão fornecidas:

  • Primeira entrada: uma string que representa uma única palavra ou um array JSON de strings, como ["apple", "banana", "cherry"]
  • Segunda entrada: uma string que representa um número ou um booleano ("true" ou "false")

Processe as entradas da seguinte forma:

  • Para a primeira entrada: se ela começar com "[", analise-a como um array JSON de strings; caso contrário, trate-a como uma única string
  • Para a segunda entrada: se for "true" ou "false", converta-a para um booleano; caso contrário, converta-a para um número

Chame processData com a primeira entrada processada e imprima o resultado. Em seguida, chame formatMessage com a segunda entrada processada e imprima o resultado.

Experimente você mesmo

import * as fs from "fs";

// Ler entradas
const stdinBuffer: Buffer = fs.readFileSync(0);
const inputs: string[] = stdinBuffer.toString().trim().split('\n');
const firstInput = inputs[0];
const secondInput = inputs[1];

// TODO: Escreva seu código aqui
// Crie a função processData com type guard
// Crie a função formatMessage com type guard
// Processe as entradas de acordo com os requisitos
// Chame as funções e imprima os resultados
quiz iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Introdução ao TypeScript

Pratique por conta própria: Playground de TypeScript