TypeScript: o que é e para que serve? Guia para iniciantes

O que é TypeScript? TypeScript é JavaScript com tipos estáticos. Você adiciona anotações de tipo a variáveis, parâmetros e valores de retorno, o compilador do TypeScript as verifica antes de o programa rodar e gera JavaScript puro, sem os tipos. Esse JavaScript roda em qualquer lugar onde JavaScript roda: navegadores, Node.js, Deno e Bun. Em resumo, TypeScript, o que é: a mesma linguagem que você já conhece, com uma camada de tipos verificada pelo compilador.

Aqui está um pequeno programa em TypeScript. Clique em Run.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

Saída:

Ada is 36 years old
82.33333333333333

Tirando as partes depois dos dois-pontos (: string, : User, : number[]) e a interface, isto é JavaScript. Essas adições dizem ao compilador o que cada valor pode ser. Repare que total não tem anotação: o TypeScript descobre sozinho que é um número. A maior parte do código TypeScript anota as fronteiras das funções e deixa o compilador inferir o resto.

O que o verificador de tipos detecta

O objetivo das anotações é que os erros apareçam enquanto você escreve o código, e não quando um usuário esbarra neles. Rode este bloco e leia a saída:

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

O programa nem começa. Em vez disso, o compilador mostra dois erros:

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

Cada erro indica o arquivo, a linha e a coluna, um código de erro (TS2322) e o que está errado. Em JavaScript puro, as duas linhas rodariam, e a segunda imprimiria Linus is undefined years old sem nenhum aviso. Em um editor como o VS Code, os mesmos erros aparecem sublinhados em vermelho enquanto você digita, junto com um autocompletar que sabe que user tem exatamente um name e um age.

Bugs típicos que o verificador pega:

• Um nome de propriedade ou método digitado errado (user.nmae, list.lenght).
• Chamar uma função com argumentos de menos ou de mais, ou com argumentos do tipo errado.
• Usar um valor que pode ser null ou undefined sem verificá-lo antes.
• Esquecer de tratar um caso de uma union como "loading" | "done" | "error", quando o código usa uma verificação exaustiva.
• Código que quebra quando uma função da qual você depende muda de assinatura.

Os tipos desaparecem em tempo de execução

Os tipos do TypeScript existem só em tempo de compilação. O compilador os verifica e depois os remove: o JavaScript gerado não tem anotações nem interfaces e roda exatamente como um JavaScript escrito à mão.

Esta entrada:

function double(n: number): number {
    return n * 2;
}

vira esta saída:

function double(n) {
    return n * 2;
}

Por isso o TypeScript não consegue verificar valores que chegam enquanto o programa roda. Aqui o texto JSON diz ser um User, o compilador precisa confiar nisso e nada reclama em tempo de execução também:

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

Saída:

string
thirty-six1

Dados de fora do programa (respostas de API, entrada de formulários, arquivos) precisam de uma verificação em tempo de execução, por exemplo uma função type guard que inspeciona o valor. O TypeScript então confia na verificação e faz o narrowing do tipo para você.

Quem criou o TypeScript e por quê

O TypeScript foi criado na Microsoft, com Anders Hejlsberg (o criador do C#) liderando o design. Foi lançado ao público em outubro de 2012 como versão 0.8, e a 1.0 veio em abril de 2014. É open source sob a licença Apache 2.0 e desenvolvido no GitHub. Pela contagem de contribuidores mensais do GitHub, o TypeScript se tornou a linguagem mais usada no GitHub em agosto de 2025, à frente de Python e JavaScript.

A motivação eram as grandes bases de código JavaScript. O JavaScript não tem como dizer "esta função recebe um objeto de usuário", então renomear uma propriedade ou mudar uma função significava procurar no código inteiro e torcer para que os testes cobrissem todas as chamadas. O TypeScript acrescenta essa informação mantendo compatibilidade total com o JavaScript:

• É um superconjunto. JavaScript válido é sintaxe TypeScript válida, então um projeto pode migrar um arquivo por vez.
• Segue o JavaScript. Tirando algumas adições antigas como enum e namespace, o TypeScript não acrescenta recursos de tempo de execução próprios; a sintaxe nova vem do padrão JavaScript.
• Os tipos não custam nada em tempo de execução. Eles são apagados, então a saída é tão rápida quanto JavaScript escrito à mão.

A versão principal atual é o TypeScript 7, cujo compilador foi reescrito em Go como programa nativo e verifica tipos de projetos grandes cerca de dez vezes mais rápido que o compilador em JavaScript que ele substituiu. A página do TypeScript 7 explica o que mudou.

Para que serve o TypeScript? Frontend e backend

O TypeScript é usado para os mesmos softwares que o JavaScript, tanto no frontend quanto no backend. Como a saída é JavaScript, o TypeScript vai aonde o JavaScript vai:

A mesma linguagem cobre os dois lados de uma aplicação web, e por isso muitos times compartilham definições de tipo (por exemplo o formato de uma resposta de API) entre o código do servidor e o do navegador.

Como o código TypeScript vira JavaScript

São duas tarefas separadas, e ferramentas diferentes cuidam de cada uma:

1. Verificação de tipos. Só o compilador do TypeScript faz isso, normalmente pelo comando tsc (o deno check do Deno roda uma cópia do mesmo compilador). Ele lê seus arquivos .ts, reporta erros e, por padrão, também grava arquivos .js.
2. Remoção dos tipos. O tsc pode fazer isso, e também ferramentas mais rápidas que pulam a verificação de tipos por completo: esbuild, SWC, Babel e o type stripping embutido no Node.js, no Deno e no Bun.

Uma configuração comum usa uma ferramenta rápida para rodar o código e tsc --noEmit (só verifica, não grava nada) no editor e no CI. Instalar o tsc e rodar um arquivo .ts têm cada um a sua página neste capítulo.

Os recursos principais em um exemplo

O TypeScript do dia a dia usa um conjunto pequeno de recursos. Este bloco reúne os principais:

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

Saída:

Ada ada@example.com
Ada can log in
Linus is banned

• Anotações de tipo (name: string) dizem o que uma variável, parâmetro, propriedade ou valor de retorno guarda.
• Inferência de tipos preenche os tipos que você omite: account recebe o tipo daquilo que first retorna.
• Interfaces e type aliases (interface Account, type Status) dão nome ao formato dos seus dados.
• Union types ("active" | "banned", T | undefined) descrevem um valor que é uma entre várias coisas.
• Narrowing: depois de uma verificação como account !== undefined, o compilador sabe qual caso vale dentro do bloco.
• Propriedades opcionais (email?: string) podem faltar, então o tipo delas inclui undefined.
• Generics (first<T>) permitem que uma função ou tipo funcione com muitos tipos mantendo-os ligados: entra um array de Account, sai um Account.

Preciso aprender JavaScript primeiro?

Ajuda, mas dá para aprender os dois ao mesmo tempo. Tudo sobre como o código TypeScript se comporta em tempo de execução (variáveis, funções, objetos, arrays, promises, classes) é JavaScript, e o TypeScript adiciona uma camada que descreve esses valores. Se você já sabe JavaScript, o conteúdo novo é o sistema de tipos: anotações, interfaces, unions, generics e narrowing. Se os dois são novidade, comece pelo básico de valores e funções em JavaScript e acrescente tipos pelo caminho; as mensagens de erro do compilador ensinam bem, porque apontam a linha exata em que um valor é usado do jeito errado.

Uma ordem prática para aprender TypeScript: instale e rode um primeiro arquivo, aprenda os tipos básicos e os tipos de objeto, depois union types e narrowing e, em seguida, funções e generics. Isso cobre a maior parte do código de aplicações.