Para ajudar você a conquistar seus objetivos em 2025 como Desenvolvedor de Software, estou disponibilizando um curso completo de Typescript totalmente GRATUITO!
📚 O que você vai aprender?
🔷 Aula 001 - Tipos Primitivos
🔷 Aula 002 - Objetos e Arrays
🔷 Aula 003 - Funções
🔷 Aula 004 - Outros tipos
🔷 Aula 005 - Union Types, Type Assertion e Literal Types
🔷 Aula 006 - Inferência de tipo
🔷 Aula 007 - Interface e Types
🔷 Aula 008 - Generics
🔷 Aula 009 - Utility Types
🔷 Aula 010 - Classes (Parte 1)
🔷 Aula 011 - Classes (Parte 2)
🔷 Aula 012 - Dicas Extras
🔷 Aula 013 - Desafio prático
Você vai aprender tudo que você mais vai utilizar ao trabalhar com Typescript no seu dia a dia de forma prática.
Se você já conhece Javascript, o Typescript será um divisor de águas na sua carreira, trazendo mais segurança e escalabilidade ao seu código.
Setup
Antes de iniciar a aula, precisamos primeiro configurar o setup do nosso ambiente de desenvolvimento, instalando e configurando algumas ferramentas que vamos utilizar.
Instalação do Node
Se você não tiver o Node instalado em sua máquina, você pode acessar https://nodejs.org/en/download e fazer a instalação conforme o seu sistema operacional.
Instalação do VS Code
Irei utilizar o VS Code como editor, você pode baixar ele acessando https://code.visualstudio.com.
Instalação do Typescript
Com o Node instalado, podemos inciar o projeto e configurar o Typescript.
Crie uma pasta e abra o terminal nessa pasta recém criada e rode o seguinte comando pressionando ENTER:
npm init -y && code .
O comando irá criar um arquivo package.json e abrir o VS Code na pasta. No VS Code click em View > Terminal para abir o terminal integrado.
Agora, no terminal integrado do VS Code, rode o seguinte comando:
npm i -D typescript
Esse comando vai instalar o Typescript como uma dependência de desenvolvimento no nosso package.json.
Crie um arquivo chamado tsconfig.json e adicione a seguinte configuração ao arquivo:
{
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"target": "ES2020",
"strict": true,
"noEmitOnError": true
}
}
O arquivo tsconfig.json serve para configurar o compilador do Typescript, existe diversas configurações que podemos fazer, nesse momento estamos interessado apenas nas seguintes configurações:
-
rootDir- Define o caminho para os arquivos Typescript. -
outDir- Define a pasta de saida para os arquivos Javascript. -
target- Define a versão do Javascript que o compilador deve utilizar para compilar os arquivos. -
strict- Habilita o strict mode. -
noEmitOnError- Não executa a compilação, caso tenha algum erro de tipo.
Você pode conhecer todas as opções disponíveis, acessando https://www.typescriptlang.org/docs/handbook/compiler-options.html
Acesse o arquivo package.json e crie um novo script para build com o comando:
npx tsc && node ./dist/index.js
O navegador assim como o Node não entende Typescript, precisamos compilar o código Typescript para Javascript para que ele possa entender e executar. Esse comando vai compilar nosso código Typescript para Javascript para que a gente possa executar ele no Node.
Lembre-se, no fim todo o nosso código Typescript vai virar Javascript. Typescript é apenas uma ferramenta utilizada no desenvolvimento para melhorar a segurança de tipo e escalabilidade do nosso código.
Para finalizar, crie uma pasta chamada src e um arquivo index.ts com o seguinte código:
console.log('Hello World')
Agora, vamos testar se está tudo funcionado. Abra o terminal e rode:
npm run build
Ao rodar, se tudo estiver certo, você deve ver no terminal Hello World.
Sempre que quiser ver algo no console, vai ser preciso rodar esse comando para compilar o arquivo para Javascript, beleza?
Tipos primitivos
Em TypeScript, existem seis tipos primitivos que são: string, number, boolean, symbol, bigint, null e undefined.
const nome: string = 'Leandro'; // Qualquer tipo de string: '' "" ``
const idade: number = 10; // 10, 1.57, -5.55
const adulto: boolean = true; // true ou false
const simbolo: symbol = Symbol('symbol-id');
const big: bigint = 10n;
const nulo: null = null;
const indefinido: undefined = undefined;
String
Uma string é qualquer coisa entre aspas. Pode ser aspas simples ('’), duplas ("”) ou crase ().
Number
Aqui não tem distinção: inteiros, decimais, positivos, negativos, tudo é tratado como number.
Boolean
O clássico verdadeiro ou falso.
Symbol
Um pouco abstrato, mas symbol é um identificador único. Pense nele como uma impressão digital para objetos.
Bigint
Se um number já é grande, o bigint é quase infinito. Use para lidar com números que nem calculadora científica resolve.
Null
Representa uma variável que não possui valor.
Undefined
Representa um valor não inicializado.
Você pode acessar o código da aula, acessando o link abaixo:
https://github.com/d3vlopes/curso-typescript/tree/aula-001
Próxima aula
Na próxima aula, vamos aprender sobre Objetos e Arrays em Typescript.
💡 Dúvidas ou problemas?
Teve algum problema com a configuração do setup? Ficou com alguma dúvida sobre a aula? Coloca aqui nos comentários, vamos juntos construir um material de qualidade e acessível a todos.
Top comments (0)