Principais erros de iniciantes em TypeScript: de A a Z

Principais erros de iniciantes em TypeScript: de A a Z

TypeScript é uma ferramenta poderosa que ajuda a escrever código mais confiável e previsível. No entanto, no início, muitos desenvolvedores (especialmente aqueles vindos do JavaScript) cometem erros típicos. Neste artigo, analisaremos os 10 problemas mais comuns enfrentados por iniciantes e mostraremos como evitá-los. Mergulhamos no mundo do TypeScript de A a Z.

1. Uso excessivo de any

Este é, talvez, o erro mais popular. Quando o desenvolvedor não sabe qual tipo de dado esperar, ele escreve any. Isso mata toda a essência do TypeScript — a tipagem estática. Você perde as dicas do editor e a proteção contra erros em tempo de compilação.

Exemplo ruim:

function processData(data: any) {\n    return data.name.toLowerCase(); // O erro aparecerá apenas em tempo de execução\n}\n

Como corrigir: Use tipos mais específicos, unknown ou genéricos.

function processData(data: { name: string }) {\n    return data.name.toLowerCase(); // TypeScript verificará isso em tempo de compilação\n}\n

Se o tipo for realmente desconhecido, use unknown — ele forçará você a verificar os dados antes de usá-los.

2. Ignorar o modo strict

Muitos iniciantes desativam strict: true no tsconfig.json para "não ter erros extras". Isso é um grande erro. Sem o modo strict, você perde a verificação de null e undefined, o que leva a Cannot read property of undefined em produção.

// Sem strict: true — sem erro\nconst name: string = null; // Funciona, mas depois quebra\n\n// Com strict: true — erro de compilação\nconst name: string = null; // ❌ Type 'null' is not assignable to type 'string'\n

Dica: Sempre ative strict: true. Isso evitará centenas de bugs.

3. Uso incorreto de tipos e interfaces

Iniciantes frequentemente confundem type e interface, e os usam onde não é necessário. Por exemplo, criam uma interface para uma única função, quando poderiam simplesmente descrever o tipo diretamente no parâmetro.

Exemplo ruim:

interface UserData {\n    name: string;\n    age: number;\n}\nfunction greet(user: UserData) {\n    console.log(`Hello, ${user.name}`);\n}\n

Isso é redundante se a interface for usada apenas uma vez.

Como é melhor:

function greet(user: { name: string; age: number }) {\n    console.log(`Hello, ${user.name}`);\n}\n

Use interface para objetos que são estendidos ou implementados por classes, e type para uniões (union) e interseções (intersection).

4. Esquecer os Union Types

Um dos recursos mais poderosos do TypeScript são as uniões de tipos. Iniciantes frequentemente escrevem verificações redundantes ou usam any, quando poderiam simplesmente especificar vários tipos permitidos.

// Ruim\nfunction getLength(value: any) {\n    return value.length;\n}\n\n// Bom\nfunction getLength(value: string | any[]) {\n    return value.length;\n}\n

O próprio TypeScript sugerirá quais métodos estão disponíveis para cada tipo na união.

5. Erros com null e undefined

TypeScript é rigoroso com null e undefined, mas iniciantes frequentemente esquecem de verificá-los. Isso leva a erros em tempo de execução.

function printName(name: string | null) {\n    console.log(name.toUpperCase()); // ❌ Object is possibly 'null'\n}\n

Como corrigir: Use verificações de proteção (type guards):

function printName(name: stri