Principais erros de desenvolvedores TypeScript iniciantes: nível avançado

Principais erros de desenvolvedores TypeScript iniciantes: nível avançado

TypeScript é uma ferramenta poderosa que ajuda a escrever código mais seguro e previsível. No entanto, a transição do JavaScript para o TypeScript, especialmente em nível avançado, frequentemente acompanha erros específicos. Mesmo desenvolvedores familiarizados com os fundamentos da tipagem cometem erros típicos ao trabalhar com generics, tipos condicionais e sobrecargas. Neste artigo, analisaremos os 4 erros mais comuns de iniciantes avançados e mostraremos como corrigi-los.

1. Uso incorreto de Generic: perda de informação sobre o tipo

Um dos erros mais comuns é declarar generics muito amplos ou, ao contrário, muito restritos. Desenvolvedores frequentemente especificam o tipo any dentro de uma função genérica, anulando completamente os benefícios do TypeScript.

Problema

// Ruim: a função retorna any, perdemos a tipagemfunction getProperty(obj: any, key: string): any {    return obj[key];}

const user = { name: 'Alice', age: 30 };const value = getProperty(user, 'name'); // value: any

Solução

// Bom: usamos generic para preservar o tipofunction getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {    return obj[key];}

const user = { name: 'Alice', age: 30 };const value = getProperty(user, 'name'); // value: string

Importante: sempre use restrições extends para generics. Isso não apenas preserva os tipos, mas também fornece autocompletar na IDE.

2. Abuso do tipo any em vez de unknown

Muitos desenvolvedores iniciantes colocam any em todos os lugares onde não conseguem determinar o tipo imediatamente. Isso anula todo o benefício do TypeScript. A abordagem correta é usar unknown e depois restringir o tipo.

Problema

// Ruim: any permite fazer qualquer coisafunction parseData(data: any): void {    console.log(data.toUpperCase()); // Erro em tempo de execução se data for número    data.someMethod(); // Nenhuma verificação}

Solução

// Bom: unknown exige verificaçãofunction parseData(data: unknown): void {    if (typeof data === 'string') {        console.log(data.toUpperCase()); // Seguro    } else if (Array.isArray(data)) {        console.log(data.length);    } else {        console.log('Tipo de dado desconhecido');    }}

Use any apenas em casos extremos (migração de JS ou trabalho com APIs dinâmicas). Para todo o resto, use unknown com guards.

3. Erros na sobrecarga de funções (Function Overloads)

A sobrecarga de funções no TypeScript é um mecanismo poderoso, mas traiçoeiro. O erro típico: ordem incorreta das assinaturas ou incompatibilidade da implementação com as sobrecargas declaradas.

Problema

// Ruim: assinaturas se contradizemfunction process(value: string): string;function process(value: number): number;function process(value: string | number): string | number {    // Implementação não cobre todos os casos    return value.toString(); // Retornamos string, mas prometemos number para number}

Solução

// Bom: separação clara da lógicafunction process(value: string): string;function process(value: number): number;function process(value: string | number): string | number {    if (typeof value === 'string') {        return value.toUpperCase(); // Retornamos string    } else {        return value * 2; // Retornamos number    }}

const result1 = process('hello'); // stringconst result2 = process(10);      // number

Dica: sempre verifique se a implementação da função cobre todas as variantes declaradas nas assinaturas. Use typeof ou guards personalizados.

4. Ignorar modos estritos de compilação

Muitos desenvolvedores desabilitam o modo estrito do TypeScript (strict: true) para evitar erros durante o desenvolvimento. Isso é um grande erro, pois o modo estrito ajuda a detectar potenciais problemas em tempo de compilação.

Problema

// tsconfig.json sem modo estrito{    \"compilerOptions\": {        \"target\": \"ES2020\",        \"module\": \"commonjs\"        // strict: false por padrão    }}

Solução

// tsconfig.json com modo estrito{    \"compilerOptions\": {        \"target\": \"ES2020\",        \"module\": \"commonjs\",        \"strict\": true,        \"noImplicitAny\": true,        \"strictNullChecks\": true    }}

Importante: ativar o modo estrito desde o início do projeto. Isso evitará muitos erros e tornará o código mais seguro e previsível.