Aula 10
Como Definir um Tuple (Tupla / Enupla) no TypeScript
Summary
Resumo da Aula sobre Tuplas em TypeScript
Nesta aula, aprendemos sobre como definir uma tupla no TypeScript.
Definição de Tupla
- O que é: Uma tupla é uma estrutura de dados que armazena um conjunto fixo de elementos de tipos variados, onde a ordem e o número de elementos são importantes.
- Exemplo: Definimos uma tupla com um elemento do tipo
string
e outro do tiponumber
. Por exemplo,let tupla: [string, number] = ['oi', 16];
.
Erros Comuns
- Se tentarmos inverter os tipos na tupla, como em
let tupla: [string, number] = [16, 'oi'];
, o compilador TypeScript irá gerar erros, indicando que os tipos não correspondem à definição original. - Erro de comprimento: Se tentarmos adicionar mais elementos, como
let tupla: [string, number] = ['oi', 16, true];
, também ocorrerá um erro, pois a tupla foi definida para conter exatamente dois elementos.
Compilação
- Ao compilar o TypeScript, o JavaScript gerado não contém anotações de tipo, mas os erros são detectados durante a compilação.
Conclusão
- As tuplas são úteis para armazenar coleções de dados heterogêneas em que a ordem e o número de elementos são fixos. É importante respeitar os tipos e a quantidade de elementos definidos para evitar erros.
Até a próxima aula!
Video Transcript
Nesta aula vamos aprender como definir um tuple, um anuple ou um anuple no TypeScript.
Então vamos começar aqui.
Vamos supor que a gente tenha uns dados que precisam de dois campos para armazenar.
Nós podemos usar um array, por exemplo, se eu quiser armazenar a mensagem oi, um texto e algum número 16, por exemplo.
Aqui a gente pode considerar essa array de dois elementos como uma tupla.
A tupla tem um tamanho fixo e a ordem dos elementos vai ser importante.
E também o tipo. O primeiro tipo será string e o segundo será um number.
Vamos definir isso aqui em uma variável. Vou chamar aqui let, chamar tupla, igual a esse cara aqui.
Eu estou no arquivo tuples.ts que eu criei.
Agora não tem nada de TypeScript ainda. Isso aqui é uma meta array.
Vamos colocar um vetor de dois elementos de tipos misturados.
O primeiro é uma string, o segundo é um number.
Então antes de definir o tupla aqui, vamos definir o tipo desse cara.
Então tupla aqui, dois pontos, você abre os corchetes, o primeiro elemento tem que ser do tipo string, o segundo do tipo number.
Quando você declarar dessa maneira, eu posso aqui separar a declaração da definição e fazer da maneira seguinte.
Eu declaro uma variável chamada tupla que vai armazenar uma array de dois elementos.
O primeiro elemento tem que ser do tipo string, o segundo elemento tem que ser do tipo number.
Então nós consideramos, podemos chamar isso aqui de uma tupla.
Então quando eu definir a variável, eu só posso definir da seguinte maneira.
Tem que ter dois elementos e o primeiro tem que ser um string, o oi nesse caso e o segundo tem que ser o number, o número 16 nesse caso.
Se eu terminar e compilar com o TSC, nosso compilador, não vai ter problema, certo?
Legal, olha que o arquivo foi gerado, deixo abrir no lado direito da tela, dist barra tuples.
Note que não tem nenhuma anotação de tipo porque é o arquivo normal de JavaScript.
Declara uma variável e define com o array de dois elementos.
Mas olha o que acontece aqui do lado esquerdo, se eu tentar redefinir a tupla e inverter os elementos.
Primeiro vou pôr 16 no segundo oi.
Note que agora nós temos como primeiro elemento tipo number e como segundo elemento tipo string.
Está invertido, não é o que corresponde ao que a gente declarou aqui na variável.
Vamos ver o que vai acontecer na hora da compilação.
Compilador vai dar erro, vai reclamar, vai dizer aqui, vamos ler a mensagem.
Primeiro, tem um erro no arquivo src barra tuples.ts na linha 3, coluna 10.
Está dizendo que o tipo número não pode ser atribuído ao tipo string.
Por quê? Porque ele está aqui, olha que ele marcou 16.
O tipo número não pode ser atribuído ao string que foi que a gente declarou para o primeiro elemento da tupla.
Então ele já vai te dizer que tem algo errado.
E da mesma maneira, para o segundo elemento está dizendo que o tipo string, que é o oi, não pode ser atribuído ao tipo number que a gente tinha declarado.
O segundo elemento tinha sido declarado como number, mas nós fornecemos um string, então também está errado.
Então o typescript nos diz na hora da compilação que se tem algum problema.
Então essa é a chamada tupla.
Então essa terceira linha está errada e vai dar erro.
E você pode definir com vários números de elementos e vários tipos.
Agora você tem que notar o detalhe que você tem que seguir o mesmo número de elementos e a mesma ordem dos tipos.
Se eu tivesse adicionado outro elemento ao redefinir tupla, por exemplo, embora que esteja na ordem certa, oi, 16 e eu adicionei o terceiro.
Nos JavaScript seria totalmente sem problemas.
Eu redefiniria uma variável com uma array de três elementos, mas no caso do typescript, porque nós declaramos tupla para ser uma variável de somente dois elementos, uma tupla.
Não vai funcionar.
Isso vai dar erro.
Então o erro aqui está dizendo que nós não podemos esse tipo aqui, string number, não pode ser atribuído ao tipo que só tem string e um number.
E está dizendo que o comprimento também está incompatível, porque ele viu que recebeu o comprimento 3 no lado direito, mas a tupla foi declarada somente com dois comprimentos de dois.
Então também outro erro detectado pelo typescript.
Tá certo? Então eu vou comentar essa linha que dá erro e por essa aula é só. Até a próxima então. Tchau.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: