TypeScript Tipos Básico
Union types
Em TypeScript, union types permitem que uma variável aceite valores de mais de um tipo. Você os declara usando o operador | (pipe), por exemplo: let id: number | string. Isso é útil quando um valor pode ser de tipos diferentes em momentos distintos.
Além de tipos primitivos, você pode usar tipos literais para restringir a valores específicos, como "ativo" | "inativo". A combinação de unions com literais cria tipos precisos e seguros.
Para usar um valor de union type, muitas vezes é necessário narrowing (estreitamento). O operador typeof é uma forma comum de verificar o tipo em tempo de execução e permitir que o TypeScript saiba qual tipo está presente em cada ramo do código.
Unions também são essenciais para lidar com null e undefined, especialmente quando a opção strictNullChecks está ativada. Você pode incluir esses tipos na união e depois verificar com typeof ou comparações diretas.
Pontos-chave
- Union types são declarados com
|e permitem que uma variável tenha mais de um tipo. - Tipos literais restringem os valores possíveis a strings ou números específicos.
typeofé usado para narrowing: verifica o tipo em tempo de execução e refina o tipo estático.nulleundefinedpodem ser incluídos em unions para indicar ausência de valor.- O narrowing é essencial para acessar propriedades ou métodos específicos de cada tipo.
// Exemplo de union types com narrowing usando typeof
function formatarId(id: number | string): string {
// Narrowing: se for number, formata como número
if (typeof id === 'number') {
return `ID numérico: ${id.toFixed(0)}`;
}
// Aqui id é string
return `ID textual: ${id.toUpperCase()}`;
}
// Union com tipos literais
type Status = 'ativo' | 'inativo' | 'pendente';
function mostrarStatus(status: Status): void {
console.log(`Status: ${status}`);
}
// Union com null e undefined
function saudacao(nome: string | null | undefined): string {
if (nome === null) return 'Olá, visitante (null)';
if (nome === undefined) return 'Olá, visitante (undefined)';
return `Olá, ${nome}`;
}
// Testando
console.log(formatarId(42));
console.log(formatarId('abc123'));
mostrarStatus('ativo');
console.log(saudacao('Maria'));
console.log(saudacao(null));
console.log(saudacao(undefined));