Aula 1 – Introdução ao TypeScript: Entendendo a base
Esta é a primeira aula da nova série sobre TypeScript aqui no blog GuilhermeMachadoDev.
Depois de concluir nossa jornada pelo universo do JavaScript, chegou o momento de dar um novo passo na evolução como desenvolvedor.
O TypeScript é o próximo capítulo natural para quem já domina o JavaScript e quer escrever códigos mais organizados, seguros e escaláveis.
Se no JavaScript aprendemos a construir a base da lógica e entender o funcionamento do navegador, agora vamos descobrir como o TypeScript traz uma camada a mais de inteligência para o código.
Ele nos ajuda a prever erros, melhorar a legibilidade e facilitar o trabalho em equipe.
Então Boraa CODAR!!!
Introdução ao TypeScript
Se você já escreveu código em JavaScript, talvez tenha passado por situações em que algo não funcionava e o erro só aparecia depois que o código já estava rodando.
Por exemplo:
function somar(a, b) {
return a + b;
}
console.log(somar(2, "3")); // Resultado: "23"
O JavaScript não reclama. Ele simplesmente junta o número e a string e segue em frente, o que pode gerar confusões em aplicações maiores.
O TypeScript surgiu para resolver exatamente esse tipo de problema.
Um pouco de história
O TypeScript foi criado pela Microsoft, sob a liderança de Anders Hejlsberg, o mesmo criador da linguagem C#.
Lançado em 2012, ele foi pensado para resolver uma dor que crescia na comunidade: a dificuldade de manter grandes projetos em JavaScript de forma segura e previsível.
Antes do TypeScript, grandes times enfrentavam dificuldades em projetos complexos.
O código JavaScript, por ser muito flexível, podia gerar comportamentos inesperados.
Com o TypeScript, foi possível adicionar tipagem estática e novos recursos de linguagem, tornando o desenvolvimento mais confiável e organizado.
Relação com o JavaScript
Todo código JavaScript é também um código válido em TypeScript.
Isso acontece porque o TypeScript é um superset do JavaScript, ou seja, ele adiciona funcionalidades sem alterar a base da linguagem.
Em outras palavras, o TypeScript não substitui o JavaScript.
Ele funciona como uma camada extra de segurança e inteligência, mas o resultado final continua sendo JavaScript, já que o navegador entende apenas essa linguagem.
O que é TypeScript
TypeScript é uma linguagem que adiciona tipagem estática ao JavaScript.
Isso significa que você pode definir o tipo de cada variável, parâmetro ou retorno de função, e o compilador vai te avisar se algo estiver errado, ainda durante a escrita do código.
function somar(a: number, b: number): number {
return a + b;
}
console.log(somar(2, 3)); // Correto
console.log(somar(2, "3")); // Erro: tipo incorreto
O compilador do TypeScript detecta o erro antes da execução, evitando comportamentos inesperados.
Diferenças conceituais entre JavaScript e TypeScript
| Conceito | JavaScript | TypeScript |
|---|---|---|
| Tipagem | Dinâmica | Estática |
| Verificação de erros | Em tempo de execução | Em tempo de compilação |
| Sintaxe | Simples e livre | Estruturada com tipos |
| Arquivo | .js | .ts |
| Suporte em IDEs | Básico | Avançado (autocompletar, refatoração, etc.) |
Como o TypeScript funciona
Tipagem estática
No TypeScript, o tipo das variáveis é conhecido antes da execução.
Isso permite identificar erros enquanto o código ainda está sendo escrito.
let nome: string = "Guilherme";
nome = 42; // Erro detectado imediatamente
O processo de compilação
O navegador não entende TypeScript diretamente.
Por isso, precisamos compilar o código .ts para .js.
O compilador (tsc) faz esse trabalho: verifica se há erros e gera o JavaScript correspondente.
let mensagem: string = "Olá, TypeScript!";
console.log(mensagem);
Após a compilação com tsc index.ts, o resultado será:
var mensagem = "Olá, TypeScript!";
console.log(mensagem);
Principais vantagens do TypeScript
1. Detecção precoce de erros
Os erros aparecem durante a escrita, não apenas na execução.
2. Desenvolvimento em equipe
Os tipos tornam o código mais previsível e fácil de entender por outros desenvolvedores.
3. Melhor manutenção
A tipagem atua como uma forma de documentação automática, ajudando na leitura e refatoração do código.
4. Suporte aprimorado em editores
O TypeScript potencializa recursos como autocompletar, refatoração e verificação automática de erros no VSCode.
Instalando o TypeScript
1. Verifique se o Node.js está instalado
No terminal:
node -v
npm -v
Se aparecerem as versões, está tudo certo.
Se não, baixe e instale em nodejs.org.
2. Instalar o TypeScript globalmente
npm install -g typescript
Verifique a versão instalada:
tsc -v
3. Criar um projeto com TypeScript localmente
Crie uma pasta para o projeto:
mkdir projeto-ts
cd projeto-ts
Inicie o npm:
npm init -y
Isso criará o arquivo package.json, que armazena informações e dependências do projeto.
Depois, instale o TypeScript localmente:
npm install typescript --save-dev
4. Criar o arquivo de configuração tsconfig.json
Use o comando:
npx tsc --init
Esse arquivo define as regras de compilação do TypeScript.
Um exemplo básico:
{
"compilerOptions": {
"target": "ES6",
"outDir": "./dist",
"rootDir": "./src",
"strict": true}
}
Entendendo a estrutura do projeto
package.json
É o arquivo que descreve o projeto e suas dependências.
Nele, também podemos adicionar scripts personalizados.
{
"name": "projeto-ts",
"version": "1.0.0",
"scripts": {
"build": "tsc"
},
"devDependencies": {
"typescript": "^5.3.3"
}
}
node_modules
É a pasta que contém todas as dependências instaladas.
Ela é gerada automaticamente pelo npm e não deve ser alterada manualmente.
Relação com o TypeScript
O TypeScript utiliza essas dependências e as configurações do tsconfig.json para gerar o JavaScript final.
Exemplo prático: o primeiro código em TypeScript
Crie o arquivo src/index.ts:
function saudacao(nome: string): string {
return `Olá, ${nome}! Seja bem-vindo ao TypeScript`;
}
console.log(saudacao("Guilherme"));
// console.log(saudacao(42)); // Erro de tipo
Compile o código:
npx tsc
O arquivo gerado será dist/index.js:
function saudacao(nome) {
return "Olá, " + nome + "! Seja bem-vindo ao TypeScript";
}
console.log(saudacao("Guilherme"));
Entendendo a diferença na prática
Em JavaScript
let idade = 20;
idade = "vinte"; // Permitido
Em TypeScript
let idade: number = 20;
idade = "vinte"; // Erro: tipo incorreto
O TypeScript garante que cada variável mantenha seu tipo, evitando erros sutis e demorados de encontrar.
Conclusão
Encerramos aqui nossa introdução ao TypeScript.
Nesta aula entendemos o que ele é, por que foi criado, como se relaciona com o JavaScript e como ele traz mais segurança e clareza para o código.
Também vimos como configurá-lo e criamos nosso primeiro projeto real.
Repositório da aula no Github: 🔗https://github.com/guilherme-silvam/TS-aulas-guilhermemachadodev/tree/main/typescript-aula-1
Publicar comentário