TypeScript: 18 dicas e padrões para seu código!

Uma lista completa para utilizar com ou sem React

"Melhorando a qualidade do seu JavaScript assim ó.."

⭐️ Créditos

{
"@types/react": "16.4.16",
"@types/react-dom": "16.0.9",
"typescript": "3.1.3",
"react": "16.5.2",
"react-dom": "16.5.2"
}

Tabela de conteúdo

Porquê?

1. Acessadores public dentro de classes

2. Acessadores private dentro de classes

3. Acessadores protected dentro de classes

4. Evite usar enum

5. O método constructor em classes

Inicializando estado com alguma lógica

6. Evite decoradores para suas classes

7. Faça a busca de tipos (state/props) diretamente no componente

8. Sempre forneça tipos explícitos para props children

Restrição para o tipo children

9. Use inferência de tipos para definir state de componentes ou defaultProps

10. Ao usar uma função como fábrica ao invés de classes para modelos/entidades, aproveite a fusão de declaração, exportando o tipo e a implementação

11. Use a importação padrão para importar React

{ 
"compilerOptions": {
/ *
Permite a emissão de interoperabilidade entre os módulos CommonJS e ES
através da criação de objetos de namespace para todas as importações.
Implica 'allowSyntheticDefaultImports: true'.
* /
"esModuleInterop": true
}
}
{ 
"compilerOptions": {
/ *
Especifique a função de fábrica de JSX para ser usada ao direcionar a emissão de JSX 'react', por exemplo , 'React.createElement' ou 'h'.
* /
"jsxFactory": "createElement"
}
}

12. Evite namespace

13. Evite importações de módulos ES2015 ao importar tipos que não tenham código de tempo de execução

14. Evite camelCase/PascalCase para nomes de arquivos

SkaterBoy.tsx
userAccessHandlers.ts
skater-boy.tsx
user-access-handlers.ts

15. Declare tipos antes da implementação

16. Evite declarações de métodos dentro de alias de interface/tipo

17. Evite number para chave de tipo indexável

18. Evite JSX.Element para anotar o tipo de retorno de função/componente ou filhos/props

Finalizando

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store