angular-fixes.org

Angular stuff to fix

Pasta compartilhada app/shared

• Distinguir entre o que é uma service, componente, model, mock ou utility
  • shared/
    • components/
    • models/
    • directives/
    • pipes/
    • endpoints/
• Assim como component, service, module e directive possuem prefixo no nome do arquivo, podemos criar novos prefixos adicionais para arquivos como shared/models/employee.model.ts

Contratos de objeto de negócio (interface/abstract class)

• Não utilizar abstract class ao menos que precise de um comportamento padrão definido, e uma classe que derive da classe abstrata.
• Para representar um contrato de um objeto, utilize interface
• Não use tipos não-primitivos como String, Number ou Boolean em momento algum, exceto para definir métodos de extensão. Em vez disso, opte por tipos primitivos.
• Todas as propriedades devem seguir estritamente o modelo de negócio, caso contrário, haverá problemas em usar o objeto que vem de uma requisição (por exemplo).
• Não é preciso colocar o prefixo “ViewModel” ou “DTO” numa interface nem o sufixo I
  • Nem todos contratos seguem esse padrão
  • Conceito de view model ou DTO não existe no Typescript
• Não defina todos atributos como any, use os tipos apropriados
• Modificadores de acesso não seguem modelo de negócio:
  • Definir o que é readonly (não confundir com private)
• ;

any ou tipos inferidos em variáveis, membros, lambdas, callbacks e retorno de métodos

• Usar any mesmo quando se sabe o tipo de algo invalida o motivo de usar Typescript
• Sempre colocar tipo de retorno, mesmo que seja void
• Inutiliza plugins IntelliSense

Remover imports, variáveis e métodos não sendo usados

Repetição de código em services

• DataService foi criado para eliminar essa duplicação de código
  • Não precisa declarar uma nova promise
  • Não é preciso lidar com erros (catch)

Valores constantes não são implícitos

• Rotas (services), arrays etc não utilizam const

Endpoints

type Endpoint = Record<string, string>;

namespace HR {
    export {
        base: '',
        employee_contracts: '/api/v1/employee/contracts'
    } as Endpoint;
};

namespace Timesheet {
    export {
        base: ''
    } as Endpoint;
};

Recursos

• Typescript - Do’s and Don’ts
• Angular Coding Style Guide