Como escrever código limpo e sustentável com TypeScript

Escrever código limpo e sustentável é essencial para o sucesso do projeto a longo prazo e a produtividade da equipe. O TypeScript, com sua tipagem estática e recursos poderosos, fornece ferramentas e práticas para aprimorar a qualidade do código. Este artigo explora estratégias para escrever código TypeScript limpo e sustentável.

1. Use Anotações de Tipo Descritivo

Anotações de tipo ajudam a esclarecer o uso pretendido de variáveis, funções e objetos, tornando o código mais fácil de entender e manter.

function greet(name: string): string {
  return `Hello, ${name}`;
}

const user: { name: string; age: number } = {
  name: 'Alice',
  age: 30,
};

2. Prefira interfaces em vez de aliases de tipo para formas de objetos

As interfaces são mais versáteis e extensíveis em comparação aos aliases de tipo, especialmente para definir formas de objetos.

interface User {
  name: string;
  email: string;
}

const user: User = {
  name: 'Bob',
  email: 'bob@example.com',
};

3. Inferência de tipo de alavancagem

O TypeScript pode inferir tipos com base no contexto, reduzindo a necessidade de anotações de tipo explícitas e tornando o código menos prolixo.

const numbers = [1, 2, 3]; // TypeScript infers numbers as number[]
const sum = numbers.reduce((a, b) => a + b, 0); // TypeScript infers sum as number

4. Escreva funções pequenas e focadas

Mantenha as funções pequenas e focadas em uma única tarefa para melhorar a legibilidade e facilitar a manutenção.

function calculateTax(amount: number, rate: number): number {
  return amount * rate;
}

function formatCurrency(amount: number): string {
  return `$${amount.toFixed(2)}`;
}

5. Use protetores de tipo para melhor segurança de tipo

As proteções de tipo ajudam a garantir que as operações sejam executadas nos tipos corretos, reduzindo erros de tempo de execução.

function isString(value: any): value is string {
  return typeof value === 'string';
}

function printLength(value: string | number) {
  if (isString(value)) {
    console.log(value.length);
  } else {
    console.log('Not a string');
  }
}

6. Organizar código em módulos

Organize o código relacionado em módulos para manter a base de código gerenciável e melhorar a clareza.

// user.ts
export interface User {
  name: string;
  email: string;
}

// utils.ts
export function greet(user: User): string {
  return `Hello, ${user.name}`;
}

7. Implementar tratamento de erros

Lide com erros com elegância e forneça mensagens significativas para ajudar na depuração e melhorar a experiência do usuário.

function fetchData(url: string): Promise {
  return fetch(url).catch((error) => {
    console.error('Failed to fetch data:', error);
    throw error;
  });
}

8. Escreva testes para componentes críticos

O teste garante que o código se comporte como esperado e ajuda a detectar problemas logo no início. Use frameworks de teste como Jest para escrever testes unitários.

import { greet } from './utils';

test('greet function', () => {
  const user = { name: 'Charlie', email: 'charlie@example.com' };
  expect(greet(user)).toBe('Hello, Charlie');
});

Conclusão

Seguindo essas práticas, você pode escrever código TypeScript limpo e sustentável que é mais fácil de entender, estender e gerenciar. Aproveitar os recursos do TypeScript efetivamente leva a um código de maior qualidade e a uma base de código mais sustentável.