Principais erros de desenvolvedores TypeScript iniciantes: de A a Z

Principais erros de desenvolvedores TypeScript iniciantes: de A a Z

TypeScript é uma ferramenta poderosa que adiciona tipagem estática ao JavaScript, tornando o código mais previsível e seguro. No entanto, a transição de JS para TS frequentemente vem acompanhada de erros típicos que podem anular todas as vantagens da tipagem estrita. Neste artigo, vamos analisar os erros mais comuns de desenvolvedores TypeScript iniciantes — desde o abuso de any até o trabalho incorreto com null e undefined. Você aprenderá como evitá-los e escrever código limpo e confiável.

1. Abuso do tipo any

O erro mais comum de iniciantes é usar any em todos os lugares onde "não querem pensar". TypeScript foi criado para tipos, e any desativa completamente a verificação.

// ❌ Ruimfunction processData(data: any) {  return data.length; // Erro em tempo de execução se data for um número}

// ✅ Bomfunction processData(data: string | unknown[]) {  return data.length; // TypeScript verificará se data tem length}

Dica: Use unknown em vez de any se o tipo for realmente desconhecido. Sempre busque tipos específicos.

2. Ignorar strictNullChecks

Por padrão, strictNullChecks está ativado, mas muitos iniciantes o desativam "para simplificar". Isso leva a erros em tempo de execução.

// ❌ Ruim (se strictNullChecks: false)let name: string = null; // Funciona, mas depois causará erro

// ✅ Bomlet name: string | null = null; // Indicamos explicitamente a possibilidade de nullif (name !== null) {  console.log(name.toUpperCase());}

Dica: Nunca desative strictNullChecks. Use Optional Chaining (?.) e Nullish Coalescing (??) para trabalhar com segurança com null/undefined.

3. Uso incorreto de tipos de arrays

A confusão entre Array<T> e T[] é normal, mas o principal erro é não especificar o tipo dos elementos.

// ❌ Ruimlet items = []; // Tipo any[]items.push(1);items.push("hello"); // Funciona, mas perdemos o controle

// ✅ Bomlet items: number[] = []; // Apenas númeroslet strings: Array<string> = []; // Notação alternativa

Dica: Sempre anote o tipo do array, especialmente se ele estiver vazio na declaração. Use readonly para imutabilidade.

4. Tipagem incorreta de funções e callbacks

Iniciantes frequentemente esquecem de tipar os parâmetros das funções ou usam Function como tipo.

// ❌ Ruimfunction fetchData(callback: Function) {  callback("data", 123);}fetchData((err: string, data: number) => {}); // Erro: esperado 2 argumentos

// ✅ Bomfunction fetchData(callback: (err: string | null, data: number) => void) {  callback(null, 123);}

Dica: Tipifique os parâmetros e o valor de retorno explicitamente. Para callbacks, use tipos de arrow function ou type/interface.

5. Confusão entre interface e type

Muitos não entendem a diferença e os usam como intercambiáveis, o que pode levar a erros.

// interface — pode ser combinada (declaration merging)interface User {  name: string;}interface User {  age: number;} // Funciona

// type — não pode ser combinado, mas pode criar union/intersectiontype Status = "active" | "inactive";type Admin = User & { role: "admin" };

Dica: Use interface para objetos que podem ser estendidos (por exemplo, em bibliotecas). Use type para union-types, tuplas e composições complexas.

6. Ignorar readonly e const