Uniões de Texto e Autocompletar
Obtenha o autocompletar do editor para valores de texto conhecidos.
Uniões de Texto e Autocompletar é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.
Uniões alimentam o preenchimento automático
Uma união de literais de cadeia de caracteres cumpre duas funções: restringe os valores permitidos e alimenta o preenchimento automático do editor. Mas, às vezes, você quer sugestões e a liberdade de passar qualquer cadeia — uma técnica inteligente resolve isso.
Uma união básica de literais de cadeia
Declare uma união de cadeias permitidas. O editor oferece exatamente essas opções, e valores inválidos geram erros de compilação.
type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // ErrorPreenchimento automático no editor
Quando um parâmetro é uma união de literais de cadeia, digitar dentro da chamada exibe exatamente os membros. Essa é uma das características ergonômicas mais apreciadas do TypeScript.
type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blueA limitação
Uma união estrita proíbe qualquer valor fora da lista. Às vezes, você quer sugerir valores comuns e ainda permitir cadeias personalizadas arbitrárias — uma união simples não consegue fazer as duas coisas.
type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))Ampliar o tipo elimina sugestões
Se você simplesmente usar string, qualquer valor funcionará, mas o preenchimento automático desaparecerá por completo. Você trocou todas as dicas por flexibilidade total — o que nem sempre é ideal.
function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestionsO truque da união de cadeia e Literal-Union
O truque é unir seus literais a string & {}. Os literais continuam aparecendo no preenchimento automático, enquanto string & {} permite qualquer outra cadeia sem reduzir a união.
type Color = "red" | "green" | (string & {})
const a: Color = "red" // suggested
const b: Color = "#ff8800" // also allowed
console.log(a, b)Por que a cadeia e o objeto vazio funcionam
Normalmente, 'red' | string é simplificado para apenas string, apagando os literais. A interseção com {} cria um tipo ligeiramente diferente que o TypeScript mantém separado, permitindo que os literais sobrevivam para fins de conclusão enquanto qualquer cadeia continua sendo aceita.
type A = "red" | string // collapses to string — no hints
type B = "red" | (string & {}) // keeps "red" as a suggestion
const x: B = "red"
console.log(x)Um auxiliar reutilizável
Envolva a técnica em um alias genérico para que a intenção fique clara e reutilizável em toda a sua base de código.
type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)Aplicando-a a uma função
Use o auxiliar em uma API para oferecer sugestões de entradas comuns aos chamadores e ainda aceitar valores personalizados.
type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home")) // suggested
console.log(setIcon("my-icon")) // allowedQuando usar a técnica
Use-a quando uma API tiver valores conhecidos, mas precisar permanecer aberta: nomes de ícones, unidades de CSS, tokens de theme e predefinições de estruturas. Para conjuntos fechados, prefira uma união estrita para obter segurança completa.
type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)Compensações
A técnica mantém as sugestões, mas reduz a segurança — erros de digitação em cadeias personalizadas deixam de ser identificados. Use-a deliberadamente onde a abertura for um recurso, não como padrão.
type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)Verificação rápida
Teste sua compreensão da técnica de preenchimento automático.
Recapitulação
As uniões de literais de cadeia alimentam o preenchimento automático do editor e restringem os valores, mas uma união estrita proíbe cadeias personalizadas, enquanto string simples elimina todas as dicas. A técnica T | (string & {}) mantém os literais como sugestões e aceita qualquer cadeia. Envolva-a em um auxiliar LiteralUnion<T> e use-a somente quando a abertura for intencional — ela sacrifica a segurança de identificar erros de digitação.
Perguntas Frequentes
A aula “Uniões de Texto e Autocompletar” é grátis?
Sim — o texto completo de “Uniões de Texto e Autocompletar” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.
O que vou aprender em “Uniões de Texto e Autocompletar”?
Obtenha o autocompletar do editor para valores de texto conhecidos. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar TypeScript Academy?
Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Uniões de Texto e Autocompletar”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de TypeScript Academy?
Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Fundamentos dos Tipos Literais de Modelo
- Modelando Textos Estruturados
- Uniões de Texto e Autocompletar
- Tipos Intrínsecos de Manipulação de Texto