Principais erros de desenvolvedores TypeScript iniciantes

Top erros de desenvolvedores TypeScript iniciantes

TypeScript é uma ferramenta poderosa que ajuda a escrever código mais confiável e sustentável. No entanto, como qualquer linguagem, ele esconde armadilhas, especialmente para iniciantes. Muitos desenvolvedores vêm do JavaScript e continuam usando velhos hábitos, anulando as vantagens da tipagem estática. Neste artigo, vamos analisar os 4 erros mais comuns de desenvolvedores TypeScript iniciantes, mostrar como corrigi-los e dar dicas práticas. Se você está começando sua jornada com TypeScript, este artigo vai ajudá-lo a evitar as armadilhas típicas.

1. Abuso do tipo any

O erro mais comum é usar any em todos os lugares onde o TypeScript não consegue inferir o tipo automaticamente. Iniciantes frequentemente escrevem assim:

function processData(data: any) {    console.log(data.name.toUpperCase());}

Isso desativa completamente a verificação de tipos para a variável data. Você perde todas as vantagens do TypeScript: autocompletar, verificação de erros e documentação do código.

O que fazer em vez disso?

Sempre tente descrever o tipo explicitamente, mesmo que seja complexo. Use unknown se o tipo for realmente desconhecido no momento da escrita do código:

function processData(data: unknown) {    if (typeof data === 'object' && data !== null && 'name' in data) {        console.log((data as { name: string }).name.toUpperCase());    }}

Ou, melhor ainda, descreva a interface:

interface DataItem {    name: string;    age?: number;}

function processData(data: DataItem) {    console.log(data.name.toUpperCase());}

Dica: Configure noImplicitAny: true no tsconfig.json. O compilador reclamará de qualquer any implícito, e você se acostumará a escrever tipos.

2. Ignorar strictNullChecks

Em JavaScript, null e undefined são valores normais. Em TypeScript, sem verificações estritas, você pode acidentalmente acessar uma propriedade de null e obter um erro em tempo de execução. Erro típico:

function getLength(str: string | null) {    return str.length; // Erro: Object is possibly 'null'}

Se strictNullChecks estiver desligado, o TypeScript não vai avisá-lo, e o erro só aparecerá em tempo de execução.

Solução: Ative strict: true no tsconfig.json. Isso ativará automaticamente strictNullChecks. Agora o TypeScript forçará você a lidar com null e undefined:

function getLength(str: string | null): number {    if (str === null) {        return 0;    }    return str.length;}

// Ou use optional chaining e nullish coalescing:function getLengthSafe(str: string | null): number {    return str?.length ?? 0;}

Importante: Nunca desative strictNullChecks. Este é um dos principais recursos do TypeScript que previne milhões de bugs.

3. Trabalho incorreto com async/await e promises

TypeScript tipa estritamente funções assíncronas, mas iniciantes frequentemente esquecem o tipo de retorno Promise. Exemplo de erro:

async function fetchUser(id: number) {    const response = await fetch(`/api/users/${id}`);    return response.json(); // TypeScript pode não saber o tipo exato}

Aqui, response.json() retorna Promise<any>, e você novamente perde a tipagem. Um segundo problema comum é esquecer de tratar erros:

async function loadData() {    const data = await fetchUser(1); // Se fetch falhar, o erro não é tratado    console.log(data.name);}

Como fazer corretamente?

Sempre especifique explicitamente o tipo de retorno da função assíncrona e trate os erros adequadamente:

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

async function fetchUser(id: number): Promise<User> {    const response = await fetch(`/api/users/${id}`);    if (!response.ok) {        throw new Error(`Failed to fetch user: ${response.statusText}`);    }    return response.json() as Promise<User>;}

async function loadData() {    try {        const data = await fetchUser(1);        console.log(data.name);    } catch (error) {        console.error('Error loading data:', error);    }}