Combinando Aliases de Tipos
Parte da seção Introdução ao TypeScript do Journey de JavaScript da Coddy. Lição 35 de 73.
Um dos aspectos mais poderosos dos aliases de tipo é a sua capacidade de serem combinados e reutilizados para criar definições de tipo mais sofisticadas. Em vez de definir tipos complexos do zero a cada vez, você pode construí-los compondo aliases de tipo menores e focados.
Essa abordagem promove a reutilização de código e torna suas definições de tipo mais fáceis de manter. Quando você precisa atualizar um tipo base, todos os tipos compostos que o utilizam herdam automaticamente as alterações:
type Email = string;
type Phone = number;
type Contact = {
name: string;
email: Email;
phone: Phone;
};Você também pode combinar aliases de tipo dentro de tipos de união para criar estruturas de dados flexíveis. Isso é particularmente útil quando uma propriedade de objeto pode aceitar formatos diferentes:
type ContactMethod = Email | Phone;
type User = {
id: number;
preferredContact: ContactMethod;
};Essa abordagem composicional torna seu código mais expressivo e fácil de entender. Em vez de ver tipos genéricos como string ou number, outros desenvolvedores entendem imediatamente o propósito pretendido por meio de nomes de tipos significativos como Email e Phone.
Desafio
FácilCrie um alias de tipo chamado Username para o tipo string.
Crie um alias de tipo chamado UserAge para o tipo number.
Crie um alias de tipo chamado ContactMethod que combine Username e UserAge usando um tipo união.
Crie um alias de tipo chamado UserProfile para um objeto com as seguintes propriedades:
iddo tiponumberdisplayNamedo tipoUsernamepreferredContactdo tipoContactMethod
Crie um alias de tipo chamado AdminProfile que combine UserProfile com um tipo de objeto adicional contendo uma propriedade permissions do tipo string, usando tipos de interseção.
Agora crie as seguintes variáveis:
- Crie uma variável chamada
regularUserdo tipoUserProfilecom id1, displayName"john_doe"e preferredContact"john_doe" - Crie uma variável chamada
systemAdmindo tipoAdminProfilecom id2, displayName"admin", preferredContact25e permissions"full_access"
Crie uma função chamada getContactInfo que aceite um parâmetro chamado contact do tipo ContactMethod e retorne uma string. Use um protetor de tipo para verificar o tipo e retornar:
- Se for uma string:
"Contact: [contact]" - Se for um número:
"Age: [contact]"
Imprima as seguintes saídas em linhas separadas:
- Chame
getContactInfocomregularUser.preferredContacte imprima o resultado - Chame
getContactInfocomsystemAdmin.preferredContacte imprima o resultado - Imprima
systemAdmin.permissions
Experimente você mesmo
// TODO: Escreva seu código aqui
// Crie aliases de tipo para Username, UserAge, ContactMethod, UserProfile e AdminProfile
// Crie as variáveis regularUser e systemAdmin
// Crie a função getContactInfo
// Imprima as saídas necessáriasEsta 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: Compilador de JavaScript online