Clean Code no TypeScript: Variáveis

Publicação inspirada em clean-code-typescript de Labs42

Olá dev! 👋

Essa publicação apresenta boas práticas de como manusear e manipular suas variáveis no TypeScript, seguindo como base o conceito de clean code.

Antes de começarmos, você sabe o que é clean code?

A definição mais popular de clean code é «código que é fácil de entender e fácil de alterar». Apesar de ser assustadora para muitos, a definição de clean code é abstrata, uma definição que "define sem definir", que "afirma sem afirmar".

Ficou confuso?

Vamos partir para os exemplos que aos poucos você irá compreender melhor.

Práticas

Seja consistente

Ao nomear variáveis, seja consistente no padrão de escrita. Padrões comumente utilizados: camelCase, PascalCase, snake_case e kebab-case.

OBS: Geralmente, para classes e tipagens é utilizado PascalCase, para funções e variáveis é utilizado camelCase e para «MAGIC VARIABLES» é utilizado snake_case e em maiúsculo.

❌ Ruim:

const ultimocliente = '...';

const Ultimocliente = '...';

const ultiMocliEnTe = '...';

✅ Bom:

const ultimoCliente = '...';

const UltimoCliente = '...';

const ultimo_cliente = '...';

const DESCONTO_EM_PERCENTAGEM = 25;

type Cliente = {
  // ...
};

interface Catalogo {
  // ...
}

class Recibo {
  // ...
}

function cobrar(): void {
  // ...
}

Dê nomes descritivos para suas variáveis

Nomeie suas variáveis de forma que seja possível distinguí-las.

❌ Ruim:

function gerarNumero(a: number, b: number): number {
  const c = Math.floor(Math.random() * (b - a + 1) + a);

  return c;
}

✅ Bom:

function gerarNumero(min: number, max: number): number {
  const numero = Math.floor(Math.random() * (max - min + 1) + min);

  return numero;
}

Dê nomes pronunciáveis para suas variáveis

Nomeie suas variáveis de forma que seja possível lê-las, caso contrário, dificultará a argumentação do seu código.

❌ Ruim:

type Rcb = {
  nmr: number;
  nmClnt: string;
  vlrCmpr: number;
  dtEmss: Date;
};

✅ Bom:

type Recibo = {
  numero: number;
  nomeCliente: string;
  valorCompra: number;
  dataEmissao: Date;
};

Dê nomes fáceis de serem pesquisados

❌ Ruim:

function calcularDesconto(valor: number): number {
  // O que «25» representa?
  const valorComDesconto = (valor * (100 - 25)) / 100;

  return valorComDesconto;
}

✅ Bom:

// Declare as variáveis como constantes e em maiúsculo
const DESCONTO_EM_PERCENTAGEM = 25;

function calcularDesconto(valor: number): number {
  const valorComDesconto = (valor * (100 - DESCONTO_EM_PERCENTAGEM)) / 100;

  return valorComDesconto;
}

Use variáveis que expliquem o código

❌ Ruim:

const clientes = [];

clientes.forEach((value) => {
  // ...
});

✅ Bom:

const clientes = [];

clientes.forEach((cliente) => {
  // ...
});

Apresente seu raciocínio de forma clara

❌ Ruim:

const c = { nome: 'José Hirai', idade: 80 };

const p = 'pro';

const t = cobrar(c, p);

✅ Bom:

const cliente = { nome: 'José Hirai', idade: 80 };

const plano = 'pro';

const transacao = cobrar(cliente, plano);

Escreva apenas o necessário

Se sua classe te diz algo, não a repita no nome da sua variável. DRY!

❌ Ruim:

type Carro = {
  carroMarca: string;
  carroModelo: string;
  carroCor: string;
};

✅ Bom:

type Carro = {
  marca: string;
  modelo: string;
  cor: string;
};

Evite encadeamento condicional

Geralmente, utilizar argumentos padrões tornam o código mais limpo do que condicionais.

❌ Ruim:

function adicionarCaixas(quantidade?: number): void {
  const quantidadeCaixas = quantidade || 1;

  // ...
}

✅ Bom:

function adicionarCaixas(quantidade: number = 1): void {
  // ...
}

Opte por tipagem implícita ao invés de tipagem explícita

❌ Ruim:

const mensagem: string = 'Olá dev!';

const numero: number = 27;

const valido: boolean = false;

✅ Bom:

const mensagem = 'Olá dev!';

const numero = 27;

const valido = false;

type Cliente = {
  nome: string;
  idade: 80;
};

const cliente: Cliente = {
  nome: 'José Hirai',
  idade: 80,
};

Utilize enum para documentar o código

enum's podem te ajudar na compreensão e documentação do código.

❌ Ruim:

const GENERO = {
  ROMANCE: 'romance',
  COMEDIA: 'comedia',
  AVENTURA: 'aventura',
};

function selecionarFilmes(genero): void {
  switch (genero) {
    case GENERO.AVENTURA: {
      // ...
    }
  }
}

✅ Bom:

enum GENERO {
  ROMANCE,
  COMEDIA,
  AVENTURA,
}

function selecionarFilmes(genero): void {
  switch (genero) {
    case GENERO.AVENTURA: {
      // ...
    }
  }
}