Tipos de Interseção ('&')
Parte da seção Introdução ao TypeScript do Journey de JavaScript da Coddy. Lição 34 de 73.
Embora os tipos de união permitam criar variáveis que podem ser de um entre vários tipos, os tipos de interseção funcionam na direção oposta. Eles combinam vários tipos em um único tipo que possui todas as propriedades dos tipos combinados.
Os tipos de interseção usam o operador de e comercial (&) para mesclar tipos. Quando você faz a interseção de dois tipos de objeto, o resultado contém todas as propriedades de ambos os tipos:
type HasName = { name: string };
type HasAge = { age: number };
type Person = HasName & HasAge;
// Person agora tem ambas as propriedades name E age
let user: Person = {
name: "Alice",
age: 30
};Isso é particularmente útil quando você quer criar tipos complexos a partir de partes menores e reutilizáveis. Em vez de definir um único tipo de objeto grande, você pode criar tipos específicos para determinadas responsabilidades e combiná-los conforme necessário.
Os tipos de interseção garantem que o tipo resultante satisfaça todos os requisitos dos tipos intersectados. A variável deve ter todas as propriedades de cada tipo na interseção — não é possível escolher propriedades, como acontece com as uniões.
Desafio
FácilCrie dois aliases de tipo: HasName para um objeto com uma propriedade name do tipo string e HasAge para um objeto com uma propriedade age do tipo number.
Crie um terceiro alias de tipo chamado Person fazendo a interseção de HasName e HasAge usando o operador &.
Crie outro alias de tipo chamado HasEmail para um objeto com uma propriedade email do tipo string.
Crie um quarto alias de tipo chamado Employee fazendo a interseção dos três tipos: HasName, HasAge e HasEmail.
Agora crie as seguintes variáveis:
- Crie uma variável chamada
userdo tipoPersoncom o nome"Alice"e a idade25 - Crie uma variável chamada
workerdo tipoEmployeecom o nome"Bob", a idade30e o e-mail"bob@company.com"
Crie uma função chamada displayPerson que aceite um parâmetro do tipo Person e retorne uma string no formato "Name: [name], Age: [age]".
Crie outra função chamada displayEmployee que aceite um parâmetro do tipo Employee e retorne uma string no formato "Name: [name], Age: [age], Email: [email]".
Chame ambas as funções com as variáveis apropriadas e imprima os resultados em linhas separadas.
Experimente você mesmo
// TODO: Escreva seu código aqui
// Crie aliases de tipo para HasName, HasAge, HasEmail
// Crie os tipos Person e Employee usando interseção
// Crie as variáveis user e worker
// Crie as funções displayPerson e displayEmployee
// 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