Construindo Uniões Discriminadas
Marque membros de uniões com uma propriedade discriminante compartilhada.
Construindo Uniões Discriminadas é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 1 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.
O que é uma união discriminada?
Uma união discriminada é uma união de tipos de objeto que compartilham uma propriedade literal comum, chamada discriminante. Essa etiqueta compartilhada permite que TypeScript diferencie os membros.
// The shared "kind" property is the discriminant
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;A propriedade discriminante
O discriminante deve ser um tipo literal, como "circle", e não um tipo amplo, como string. Cada membro recebe seu próprio valor literal exclusivo.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
const c: Circle = { kind: "circle", radius: 10 };
console.log(c.kind); // "circle"Cada membro tem seus próprios campos
Além do discriminante compartilhado, cada membro contém os campos que fazem sentido apenas para ele. Um círculo tem um radius; um quadrado tem um side.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Rectangle = { kind: "rectangle"; width: number; height: number };
type Shape = Circle | Square | Rectangle;Construção de valores de união
Ao construir um valor, TypeScript verifica se o formato corresponde exatamente a um membro da união com base em seu kind.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const shapes: Shape[] = [
{ kind: "circle", radius: 5 },
{ kind: "square", side: 4 }
];
console.log(shapes.length); // 2Por que não usar apenas campos opcionais?
Um tipo permissivo com campos opcionais (radius?, side?) permite combinações inválidas. A união discriminada torna estados ilegais impossíveis de representar.
// Loose and error-prone: nothing stops radius + side together
type BadShape = { radius?: number; side?: number };
const bad: BadShape = { radius: 5, side: 4 }; // nonsense, but allowedO nome do discriminante fica a seu critério
A etiqueta costuma ser chamada de kind ou type, mas qualquer nome funciona, desde que todos os membros usem o mesmo nome de propriedade com um valor literal distinto.
type Event =
| { type: "click"; x: number; y: number }
| { type: "scroll"; delta: number };
const e: Event = { type: "click", x: 10, y: 20 };
console.log(e.type); // "click"Modelagem de uma calculadora de áreas de formas
As uniões discriminadas são especialmente úteis quando cada variante precisa de um tratamento diferente. Aqui configuramos shapes que uma função de área processará mais adiante.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const myShapes: Shape[] = [
{ kind: "circle", radius: 3 },
{ kind: "square", side: 6 }
];
console.log("Count:", myShapes.length);Adição de uma terceira variante
As uniões podem ser estendidas. Adicionar um membro triangle é uma alteração de uma linha, e TypeScript acompanhará essa mudança em todos os lugares onde a união for usada.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number }
| { kind: "triangle"; base: number; height: number };
const t: Shape = { kind: "triangle", base: 4, height: 8 };
console.log(t.kind);Literais exclusivos evitam sobreposição
Como cada kind é exclusivo, não há ambiguidade. Um valor corresponde exatamente a um membro, nunca a dois ao mesmo tempo.
type A = { kind: "a"; value: number };
type B = { kind: "b"; label: string };
type Union = A | B;
function describe(u: Union) {
return u.kind === "a" ? u.value : u.label;
}
console.log(describe({ kind: "b", label: "hi" }));Discriminantes com etiquetas booleanas
O discriminante não precisa ser um texto. Um literal boolean também funciona, o que é útil para resultados de sucesso e falha.
type Result =
| { ok: true; data: string }
| { ok: false; error: string };
const r: Result = { ok: true, data: "loaded" };
console.log(r.ok ? r.data : r.error);Uniões discriminadas na prática
Agora você tem um modelo completo de formas. Na próxima lição, vamos refinar pelo discriminante para acessar com segurança os campos específicos de cada membro.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const sample: Shape = { kind: "circle", radius: 7 };
console.log(sample.kind, "ready");Verificação rápida: discriminantes
Teste sua compreensão das uniões discriminadas.
Recapitulação: construção de uniões discriminadas
Você aprendeu que uma união discriminada reúne tipos de objeto que compartilham um discriminante literal, como kind. Cada membro contém seus próprios campos, os literais exclusivos evitam sobreposição e o padrão torna estados ilegais impossíveis de representar.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const done: Shape = { kind: "square", side: 2 };
console.log("Recap complete:", done.kind);Perguntas Frequentes
A aula “Construindo Uniões Discriminadas” é grátis?
Sim — o texto completo de “Construindo Uniões Discriminadas” é 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 “Construindo Uniões Discriminadas”?
Marque membros de uniões com uma propriedade discriminante compartilhada. 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 1 de 4.
Quanto tempo leva a aula “Construindo Uniões Discriminadas”?
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
- Construindo Uniões Discriminadas
- Restrição pelo Discriminante
- Verificação de Exaustividade com never
- Modelando Máquinas de Estado