Tipagem no TypeScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 02 Horas 13 Min 20 Seg Tempo restante da oferta: 02 13 20 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Tipagem no TypeScript [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # Tipagem no TypeScript Neste artigo vamos aprender a trabalhar utilizando a tipagem do TypeScript com variáveis, constantes, arrays e objetos. [ Wesley Gado ](https://www.treinaweb.com.br/blog/autor/wesley-gado) 5 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/TYPESCRIPT.png) Um dos principais recursos que o [TypeScript](https://www.treinaweb.com.br/blog/precisamos-falar-sobre-o-typescript) traz é a utilização da tipagem estática para o [JavaScript](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript), que trabalha com [tipagem dinâmica](https://www.treinaweb.com.br/blog/quais-as-diferencas-entre-tipagens-estatica-ou-dinamica-e-forte-ou-fraca). Desta forma o desenvolvedor tem a responsabilidade de declarar qual o tipo da variável que será utilizada. Entre os tipos disponíveis, nós temos: - number - string - boolean - undefined - null - symbols - any [ ![Node.js - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/node-js.svg) Curso Node.js - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/nodejs-fundamentos) ## Tipagem no TypeScript: Variáveis. Primeiramente, para declarar variáveis utilizando o TypeScript, podemos utilizar a seguinte sintaxe: ```tsx let numero: number; let texto: string; let status: boolean; ``` Também podemos declarar e atribuir um valor: ```tsx let idade: number = 25; let nome: string = 'TreinaWeb'; let statusPublicacao: boolean = true; ``` Neste caso a tipagem garante que as variáveis devem conter dados dos seus respectivos tipos. Utilizando o [Visual Studio Code](https://www.treinaweb.com.br/blog/vs-code-o-que-e-e-por-que-voce-deve-usar) (por exemplo) podemos ver que, caso alguma variável receba algum valor diferente do seu tipo declarado anteriormente, o TypeScript apresentará um aviso:![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/tipagem-no-typescript.png) ![Erro no tipo da variavel](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/erro-variavel-number.png) ## Tipagem no TypeScript: Constantes. Agora, seguindo a mesma maneira que declaramos as variáveis no TypeScript, precisamos apontar o tipo das constantes, com a sintaxe: ```tsx const PI: number = 3.14 ``` Vale lembrar que, no caso das constantes, devemos inicializar a constante com o valor definido, ou seja, não é possível alterar seu valor posteriormente. ![Erro ao alterar valor de constante](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/erro-constante.png) ## Tipagem no TypeScript: arrays. Quando vamos trabalhar com arrays no TypeScript é preciso se atentar para algumas particularidades, primeiramente, podemos trabalhar com os arrays que recebem dados de apenas um tipo, da seguinte forma: ```tsx let carros: string[] = []; carros.push('Gol'); carros.push('Fiesta'); ``` Ou podemos inicializar o array com os valores: ```tsx let animais: string[] = ['Cachorro', 'Gato']; ``` Agora perceba que em ambos os casos, se tentarmos adicionar algum valor de um tipo diferente do que foi declarado anteriormente, vamos obter um aviso: ![Erro ao adicionar item de tipo diferente ao array](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/erro-number-array.png) Neste caso tentamos adicionar um valor ao nosso array “carros” utilizando o método `push()`, porém não podemos pois o array só aceita strings e não numbers. ## Array com mais de um tipo O TypeScript traz este recurso, onde podemos trabalhar com arrays que recebem mais de um tipo, neste caso ao declarar o array é necessário passar quais tipos de dados que esse array estará apto a receber: ```tsx let carros: (string | number)[] = ['Gol', 2014,'Fiesta', 2018]; ``` Também é possível definir exatamente qual o conteúdo que o array estará apto a receber, além do tipo: ```tsx let cursos: ('TreinaWeb' | number)[] = ['TreinaWeb', 2018]; ``` Neste exemplo acima, o array cursos não irá aceitar nenhuma string exceto “TreinaWeb”. ![Erro ao adicionar string diferente do esperado ao array](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/erro-string-array.png) ## Criando tipos personalizados Existe a possibilidade de criarmos tipos para trabalhar com a nossa aplicação. Seguindo o exemplo dos arrays, podemos criar um array com tipo para usá-lo quantas vezes quisermos, facilitando o desenvolvimento: ```tsx type Cursos = ('TreinaWeb' | number)[]; let curso: Cursos = ['TreinaWeb', 200]; let curso2: Cursos = ['TreinaWeb', 700, 'TreinaWeb', 800]; ``` Podemos criar tipos para trabalhar com objetos também, da seguinte forma: ```tsx type Animal = { nome: string; idade: number; } let cachorro: Animal = { nome: 'Rex', idade: 3 } ``` Neste caso criamos o tipo Animal, que possui as propriedades nome (string) e idade (number) e declaramos um objeto “cachorro” para este tipo. Caso alguma propriedade não esteja de acordo com o tipo, o TypeScript irá apresentar um aviso, como a seguir: ![Erro de tipo incompátivel da propriedade idade do Tipo Animal](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/erro-tipo-prop.png) Foi declarado um objeto “gato” do tipo “Animal”. Porém na propriedade “idade” passamos a string “dois” no lugar de um number (2), e então, o TypeScript apresenta um aviso que a propriedade idade declarada no tipo Animal espera um number. Desta forma é possível criar tipos conforme a necessidade da aplicação que está sendo desenvolvida, tanto para a utilização de arrays como em objetos. ## Conclusão A tipagem estática nos ajuda a desenvolver um código mais confiável e robusto, diminui possíveis erros futuros e ainda pode tornar nossa IDE mais inteligente com recursos de autocomplete apresentando assim maior eficiência. Claro que tudo deve ser colocado no papel, afinal, para equipes acostumadas a trabalhar com JavaScript e em projetos que não são tão complexos, devemos considerar se realmente há a necessidade de alguma migração e levar em conta toda a curva de aprendizagem que a equipe terá para aplicar o TypeScript. Mas, é inegável que o TypeScript é uma tecnologia muito importante atualmente, já que está sendo muito utilizada e requisitada no mercado de trabalho. [ ![TypeScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/typescript.svg) Curso TypeScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/typescript-fundamentos) Por fim, caso queira aprender mais sobre TypeScript saiba que aqui na [TreinaWeb](https://treinaweb.com.br/) temos o curso [TypeScript - Fundamentos](https://www.treinaweb.com.br/curso/typescript-fundamentos) que possui **01h31 de vídeos** e um total de **30 exercícios**. Conheça também nossos outros cursos de [TypeScript](https://www.treinaweb.com.br/cursos?q=typescript). Veja quais são os tópicos abordados durante o curso de TypeScript - Fundamentos: - Compreender melhor as vantagens que a utilização do TypeScript pode trazer; - Utilizar a tipagem estática que o TypeScript traz; - Utilizar o conceito de type assertion; - Aplicar construção e desconstrução (ou decomposição) de objetos no TypeScript; - Aplicar conceitos típicos de orientação a objetos, como classes, métodos acessores, interfaces e herança com o TypeScript; - Verificar qual seria o código JavaScript que teria que ser produzido para se obter um efeito análogo à utilização do TypeScript. - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #TypeScript ](https://www.treinaweb.com.br/blog/tag/typescript) Autor ![Wesley Gado](//secure.gravatar.com/avatar/1b770ca482a7232b1885881430a592bb?d=mm) ## Wesley Gado Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wesley-gado) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/tipagem-no-typescript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Classes no TypeScript ](https://www.treinaweb.com.br/blog/classes-no-typescript) Neste artigo você aprenderá criar classes, implementar métodos e instanciar objetos no TypeScript usando a tipagem adequadamente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/TYPESCRIPT-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Como instalar o TypeScript ](https://www.treinaweb.com.br/blog/como-instalar-o-typescript) Neste artigo veremos como instalar o TypeScript, conhecer o arquivo tsconfig, executar nosso primeiro código no Node.js e no navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/typescript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Precisamos falar sobre o TypeScript ](https://www.treinaweb.com.br/blog/precisamos-falar-sobre-o-typescript) O TypeScript é um caso interessante. Ou você o adora ou o odeia. Parece não haver um consenso intermediário de maneira geral na comunidade. Vamos conversar um pouco sobre? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/12/TS-ZOD-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ O que é o Zod? ](https://www.treinaweb.com.br/blog/o-que-e-o-zod) Neste artigo vamos ter uma introdução sobre o Zod, uma biblioteca de declaração e validação de dados em TypeScript e criar um exemplo de como utilizá-la. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/guia-da-linguagem-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 6 anos atrás ## [ Guia da linguagem Python ](https://www.treinaweb.com.br/blog/guia-da-linguagem-python) Entenda os principais conceitos para iniciar seus estudos neste guia da linguagem Python. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/06145813/react-16-400x280.jpg) [ Padrões de Projeto ](https://www.treinaweb.com.br/blog/categoria/padroes-de-projeto) 4 anos atrás ## [ Boas práticas para o React ](https://www.treinaweb.com.br/blog/boas-praticas-para-o-react) Veja neste artigo algumas das dicas e boas práticas para utilizar em uma aplicação React e tenha um código mais limpo na sua aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/03/o-que-e-fastapi-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Criando o primeiro CRUD com FastAPI ](https://www.treinaweb.com.br/blog/criando-o-primeiro-crud-com-fastapi) Neste artigo nós iremos aprender um pouco mais sobre o FastAPI durante o desenvolvimento de uma API com todas as operações de CRUD. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/ang_ignore-1-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Perdendo o preconceito com o novo Angular ](https://www.treinaweb.com.br/blog/perdendo-o-preconceito-com-o-novo-angular) Vou citar alguns itens que me desanimavam sobre o novo Angular e o motivo de eu ter mudado de ideia. Quem sabe você considere utilizá-lo em seu próximo projeto? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/tipagem-no-python-com-type-hints-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Tipagem no Python com Type Hints ](https://www.treinaweb.com.br/blog/tipagem-no-python-com-type-hints) Neste artigo vamos aprender sobre os Type Hints no Python, veremos como eles funcionam e como podem nos ajudar a escrever códigos mais legíveis. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/02/18180247/DIFERENÇAS-TIPAGENS-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ Quais as diferenças entre tipagens: estática ou dinâmica e forte ou fraca ](https://www.treinaweb.com.br/blog/quais-as-diferencas-entre-tipagens-estatica-ou-dinamica-e-forte-ou-fraca) Uma dúvida muito comum é sobre tipagem nas linguagens de programação. Nesse artigo falamos de forma simples e com exemplos sobre as tipagens estática, dinâmica, fraca e forte. Além do conceito de inferência de tipo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/CONHECENDO-VÁRIAVEIS-CONSTANTES-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Conhecendo variáveis e constantes no JavaScript ](https://www.treinaweb.com.br/blog/conhecendo-variaveis-e-constantes-no-javascript) Neste artigo vamos aprender a declarar e a utilizar constantes e variáveis no JavaScript, entendendo quando definir var, let e const. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **02h 13min 20s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58