Arrays Genéricos
Parte da seção Introdução ao TypeScript do Journey de JavaScript da Coddy — lição 60 de 73.
Arrays e genéricos trabalham juntos perfeitamente no TypeScript. Quando você aprendeu sobre arrays tipados anteriormente, você usou a sintaxe T[] para especificar que um array pode conter apenas elementos de um tipo específico. Os genéricos oferecem outra maneira de expressar esse mesmo conceito.
O TypeScript fornece uma sintaxe alternativa para arrays tipados usando o formato Array<T>:
// Estas duas declarações são equivalentes:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];A sintaxe Array<T> é particularmente útil ao trabalhar com funções genéricas que operam em arrays. Ela torna a natureza genérica do seu código mais explícita e legível, especialmente quando você está criando funções que podem trabalhar com arrays de qualquer tipo, mantendo a segurança de tipos.
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Desafio
FácilCrie uma função genérica chamada getFirstElement que recebe um array de qualquer tipo e retorna o primeiro elemento ou undefined se o array estiver vazio.
A função deve:
- Usar um parâmetro de tipo genérico
T - Aceitar um parâmetro chamado
arrdo tipoArray<T> - Retornar o primeiro elemento do tipo
Touundefined - Ter uma anotação de tipo de retorno explícita de
T | undefined
Crie os seguintes arrays usando a sintaxe Array<T>:
stringArraydo tipoArray<string>contendo["apple", "banana", "cherry"]numberArraydo tipoArray<number>contendo[10, 20, 30, 40]booleanArraydo tipoArray<boolean>contendo[true, false, true]emptyStringArraydo tipoArray<string>que está vazio
Teste sua função e imprima as seguintes saídas:
- Imprima o resultado da chamada de
getFirstElementcomstringArray - Imprima o resultado da chamada de
getFirstElementcomnumberArray - Imprima o resultado da chamada de
getFirstElementcombooleanArray - Imprima o resultado da chamada de
getFirstElementcomemptyStringArray - Imprima o resultado da chamada de
getFirstElementcom um novoArray<string>contendo["single"]
Folha de consulta
O TypeScript fornece duas sintaxes equivalentes para arrays tipados:
// Estas duas declarações são equivalentes:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];A sintaxe Array<T> é particularmente útil ao trabalhar com funções genéricas que operam em arrays, tornando a natureza genérica do seu código mais explícita e legível, ao mesmo tempo que preserva a segurança de tipos.
Experimente você mesmo
// TODO: Escreva seu código aqui
// Crie a função genérica getFirstElement
// Crie os arrays necessários usando a sintaxe Array<T>
// Teste a função 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 Tipadas
2Tipos 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 Tuplas6Tipagem de Objetos e Interfaces
Anotações de Tipo de Objeto InlineType Aliases para ObjetosIntrodução a InterfacesInterfaces vs. Type AliasesProps Opcionais e ReadonlyEstendendo Interfaces e TiposAdicionando Métodos a InterfacesRecapitulação: Definindo Formatos de Objetos9Generics: Uma Primeira Olhada
O Problema que Generics ResolvemCriando uma Função de Identidade GenéricaUsando uma Função GenéricaArrays GenéricosInterfaces GenéricasRecapitulação: Prática de Funções Genéricas