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.
Desafio
FácilCrie 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 resultadosEsta 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
1Primeiros Passos com TS
O que é TypeScript?Por que usar TypeScript?Seu Primeiro Código TypeScriptProcesso de Compilação e ErrosRecapitulação: Introdução ao TS4Trabalhando com Funções
Tipagem de Parâmetros e RetornosTipagem de Arrow FunctionsO Tipo de Retorno 'void'Parâmetros Opcionais com '?'Valores Padrão de ParâmetrosTipagem de Rest ParametersDefinindo Tipos de FunçõesRecapitulação: Criando Funções Tipadas2Tipos Principais
Tipos Básicos: str, num, booleanO Tipo 'any': Válvula de EscapeO Tipo 'unknown'Trabalhando com 'null' e 'undef'Inferência de Tipo na PráticaAnotações de Tipo ExplícitasRecapitulação: Prática de Tipos Principais5Tipos: Aliases, Uniões e Interseções
Aliases de Tipos para PrimitivosTipos de União ('|')Trabalhando com Tipos de UniãoTipos LiteraisTipos de Interseção ('&')Combinando Aliases de TiposRecapitulação: Combinações Avançadas de Tipos3Estrutura de Dados: Arrays e Tuplas
Arrays TipadosModificador 'readonly' para ArraysO que é uma Tupla?Declarando e Acessando TuplasDesestruturando TuplasTuplas ReadonlyArrays Tipados MultidimensionaisSpread Operator com ArraysRecapitulação: Arrays e TuplasPratique por conta própria: Playground de TypeScript