Executando verificação de segurança...
8

Curso gratuito de Typescript 2025

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 escabilidade 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 incializado.


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.

Carregando publicação patrocinada...
2
0
2
2