Guia Rápido para Iniciantes em TypeScript

Se você é um(a) programador(a) buscando melhorar suas habilidades em JavaScript, TypeScript provavelmente já está no seu radar. Criado pela Microsoft, o TypeScript é um superset do JavaScript que adiciona tipagem estática, ferramentas melhores e estruturas de código mais limpas.

Como Anders Hejlsberg, arquiteto-chefe do TypeScript, disse certa vez:

"TypeScript é sobre fazer o JavaScript escalar."

Neste guia rápido para iniciantes em TypeScript, vamos cobrir o essencial e explicar por que tantos desenvolvedores o adotam tanto no front-end quanto no back-end.

O que é TypeScript?

TypeScript é uma linguagem de programação open-source desenvolvida e mantida pela Microsoft. Ele estende o JavaScript adicionando tipos estáticos. Isso permite que você capture erros durante o desenvolvimento, em vez de somente em tempo de execução.

Principais recursos do TypeScript

• Tipagem estática: ajuda a evitar bugs ao impor tipos de dados.
• Ferramentas melhores: autocompletar, navegação e refatoração aprimorados.
• Suporte ao JavaScript moderno: funciona com recursos ES6+, compilando para compatibilidade com navegadores.
• Escalabilidade: facilita o gerenciamento de bases de código grandes.

Por que usar TypeScript como desenvolvedor?

Se você já trabalhou em projetos grandes de JavaScript, provavelmente enfrentou erros “undefined inesperado” em tempo de execução. O TypeScript reduz essas surpresas.

Benefícios para desenvolvedores Front‑End

• Funciona perfeitamente com React, Angular e Vue.
• Fornece segurança de tipos para props, state e eventos.

Benefícios para desenvolvedores Back‑End

• Tipagem forte com APIs do Node.js.
• Integração mais fácil com bancos de dados ao definir modelos com tipagem segura.

Instalando o TypeScript

Para começar, você precisará do Node.js e do npm instalados.

Execute este comando no seu terminal:

npm install -g typescript

Verifique a instalação:

tsc --version

Escrevendo seu primeiro código TypeScript

Vamos criar um programa simples para entender o básico.

// hello.ts
const greet = (name: string): string => {
    return `Hello, ${name}!`;
};

console.log(greet("Developer"));

Para compilar o arquivo:

tsc hello.ts
node hello.js

O que está acontecendo aqui:

• name: string significa que o parâmetro da função deve ser uma string.
• : string após os parênteses da função indica que a função retorna uma string.

Entendendo anotações de tipo

O TypeScript permite definir explicitamente os tipos de variáveis:

let count: number = 5;
let username: string = "Vinicius";
let isActive: boolean = true;

Se você tentar atribuir um tipo diferente:

count = "five"; // ❌ Isto vai causar um erro de compilação

Trabalhando com Interfaces

Interfaces definem o formato dos objetos:

interface User {
    id: number;
    name: string;
    email?: string; // optional property
}

const newUser: User = {
    id: 1,
    name: "Alice"
};

Interfaces ajudam a tornar seu código autoexplicativo e fácil de manter.

TypeScript com Funções

Funções podem ter parâmetros tipados e tipos de retorno:

const sum = (a: number, b: number): number => {
    return a + b;
};

console.log(sum(3, 7)); // 10

TypeScript com Classes

class Person {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    greet(): string {
        return `Hi, I'm ${this.name}`;
    }
}

const dev = new Person("Vinicius");
console.log(dev.greet());

TypeScript em projetos reais

A maioria dos projetos usa TypeScript junto com frameworks populares:

Exemplo com React

interface Props {
    title: string;
    count: number;
}

const Header = ({ title, count }: Props) => {
    return <h1>{title} - {count}</h1>;
};

Exemplo com Node.js

import express from "express";
const app = express();

app.get("/", (req, res) => {
    res.send("Hello TypeScript");
});

app.listen(3000, () => console.log("Server running"));

Boas práticas para iniciantes

• Ative o Strict Mode no tsconfig.json para uma verificação de tipos mais rigorosa.
• Use const sempre que possível para variáveis imutáveis.
• Mantenha interfaces e tipos consistentes entre arquivos.
• Migre gradualmente de JavaScript, em vez de reescrever tudo de uma vez.

TypeScript é uma ferramenta que ajuda você a escrever código mais seguro, limpo e escalável. Esteja você criando um pequeno app front-end ou um grande sistema back-end, adotar TypeScript provavelmente vai melhorar sua produtividade e confiança como desenvolvedor(a).

---

Referências

• Microsoft. (2025). Documentação do TypeScript. Disponível em: https://www.typescriptlang.org/docs
• Hejlsberg, A. (2012). Anúncio do TypeScript. Microsoft Channel 9.
• Mozilla Developer Network. (2025). Guia de JavaScript. Disponível em: https://developer.mozilla.org