Principais erros de desenvolvedores TypeScript iniciantes: como evitá-los

Principais erros de desenvolvedores TypeScript iniciantes: como escrever código limpo e seguro

TypeScript é uma ferramenta poderosa que ajuda desenvolvedores a escrever código JavaScript mais previsível e seguro. No entanto, ao migrar do JS, muitos iniciantes cometem os mesmos erros, anulando as vantagens da tipagem estrita. Neste artigo, vamos analisar os 4 erros mais comuns de desenvolvedores TypeScript iniciantes e mostrar como corrigi-los com exemplos práticos.

1. Abuso do tipo any

O erro mais comum e perigoso é usar any em todos os lugares onde o TypeScript pede para especificar um tipo. Isso transforma seu código de volta em JavaScript comum, privando você das dicas do editor e da verificação de tipos durante a compilação.

❌ Exemplo ruim:

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

const result = processData(42); // Erro em tempo de execução! Números não têm a propriedade name

✅ Exemplo bom:

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

function processData(data: UserData): string {    return data.name.toUpperCase();}

const user: UserData = { name: "Ivan", age: 30 };const result = processData(user); // Funciona corretamente

Dica: Tente usar unknown em vez de any se o tipo for realmente desconhecido. unknown forçará você a realizar uma verificação de tipo antes de usar o valor.

2. Ignorar o Strict Mode

Muitos desenvolvedores iniciantes desativam o modo estrito (strict: true) no tsconfig.json para "não se distrair com erros". Isso priva você da principal vantagem do TypeScript: a detecção precoce de bugs potenciais.

O que o Strict Mode inclui:

• strictNullChecks — proíbe atribuir null e undefined a variáveis, a menos que seja explicitamente especificado.
• noImplicitAny — proíbe o uso implícito de any.
• strictFunctionTypes — verificação de tipos de funções mais rigorosa.

❌ Sem Strict Mode:

function getLength(value: string | null) {    return value.length; // Erro em tempo de execução se value = null}

✅ Com Strict Mode:

function getLength(value: string | null): number {    if (value === null) {        return 0; // Tratamos null explicitamente    }    return value.length; // TypeScript sabe que value é uma string}

Dica: Sempre ative "strict": true no tsconfig.json. Isso economizará horas de depuração no futuro.

3. Trabalho incorreto com assincronia

Erros com promises e async/await são clássicos. Iniciantes frequentemente esquecem de tratar erros ou tipam incorretamente funções assíncronas.

❌ Exemplo ruim:

async function fetchData(url: string) {    const response = await fetch(url);    const data = response.json(); // Esqueceu o await!    return data;}

✅ Exemplo bom:

interface ApiResponse {    id: number;    title: string;}

async function fetchData(url: string): Promise<ApiResponse> {    try {        const response = await fetch(url);        if (!response.ok) {            throw new Error(`HTTP error! status: ${response.status}`);        }        const data: ApiResponse = await response.json();        return data;    } catch (error) {        console.error("Erro ao carregar dados:", error);        throw error; // Propaga o erro adiante    }}

Dica: Sempre use try...catch para tratar erros em funções assíncronas e não se esqueça do await ao chamar métodos que retornam uma promise.

4. Ignorar a