ReactJS com Typescript
Hoje em dia o React representa uma grande fatia do desenvolvimento frontend, contendo diversas ferramentas no seu ecossistema que melhoram a experiência de desenvolvimento. Quando utilizamos o Typescript com React ganhamos a vantagem de definir bem os tipos dos nossos componentes sem o uso do PropTypes. Além disso nos beneficiamos do principio de fail fast, que nos permite identificar e evitar erros, e melhorar a qualidade do código.
Quando iniciamos um projeto React existem certas configurações como Babel e Webpack que são desejadas no projeto e podem ser configuradas manualmente. Porém, caso o seu projeto não tenha configurações bem específicas, a melhor forma de iniciar um novo projeto é utilizar um boiler plate, como por exemplo o "Create React App" , que atenderá a maioria dos casos.
Iniciando a aplicação com create-react-app
Para utilizar a ferramenta é necessário ter instalado o Node na versão 8.10 ou superior. Utilizaremos o package runner npx. Para criar o projeto, rode no seu terminal os comandos:
npx create-react-app my-app --template typescript
cd my-app
npm start
Quando criamos um novo projeto, a CLI utiliza o Yarn para instalar as dependência. Caso deseje utilizar npm basta adicionar a seguinte flag no comando: -use -npm.
Além de configurar o Babel e o Webpack, o comando também cria a seguinte estrutura de pastas:
Caso deseje, podemos simplificar essa estrutura deletando alguns arquivos e as suas correspondentes importações.
Adicionando ESLint
Iniciamos adicionando o ESLint como dependência de desenvolvimento:
yarn add eslint -D
O próximo comando é para iniciar o ESLint
yarn eslint --init
No terminal a dependência faz algumas perguntas de configuração. Aqui irei colocar as minhas configurações. Você é livre para escolher outras e testar a que mais se encaixa ao seu projeto.
Ao não selecionar a instalação com npm, o comando irá finalizar, mas antes ele gerou alguns comandos no console, que podemos copiar e rodar com yarn, fazendo as modificações necessárias nas versões das dependências
yarn add eslint-plugin-react@^7.19.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^2.5.0 @typescript-eslint/parser@latest -D
Adicionando Prettier
Para adicionar o Prettier e seus plugins devemos rodar no terminal o seguinte comando
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
Com a dependência instalada, criaremos um arquivo prettier.config.js que irá conter as informações de configuração do Prettier.
module.exports = { singleQuote: true, trailingComma: 'all', allowParens: 'avoid', };
Essas configurações forçam o padrão de aspas simples, vírgula no final dos objetos e evita parenteses em arrow functions com apenas um parâmetro.
Configurando ESLint e Prettier
Primeiramente criamos um arquivo .eslintignore , que inclui os arquivos onde o ESLint não irá visualizar.
Agora movemos para o arquivo .eslintrc.json onde iremos alterar algumas regras.
Em extends iremos adicionar as dependências que instalamos
Depois iremos adicionar os plugins
"plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
O próximo passo é editar as regras que o ESLint irá avaliar. Entre as regras temos a permissão de código JSX dentro de arquivos .tsx e permissão de importação de arquivos .ts e .tsx sem declarar explicitamente a extensão. Você pode consultar mais regras no link, e pode alterar durante o desenvolvimento. Porém, cuidado com muitas modificações para não criar inconsistências no código.
Para resolver as importações com Typescript primeiro devemos adicionar a dependência abaixo:
E por fim, para resolver as importações com Typescript adicionamos a seguinte configuração.
yarn add eslint-import-resolver-typescript -D
E por fim, para resolver as importações com Typescript adicionamos a seguinte configuração.
"settings": {
"import/resolver": {
"typescript": {}
}
}
O resultado final da configuração do arquivo você pode conferir nesse link
Adicionando EditorConfig
O EditorConfig é um formato de arquivo que contém regras de configuração do editor de texto e padronização de código. Em alguns editores esse arquivo é lido automaticamente e aplica as configurações. É ideal em casos onde existe uma equipe de desenvolvimento e se deseja que todos estejam com a mesma configuração no editor de texto ou IDE de sua preferência. No site do EditorConfig você pode conferir se há necessidade de instalar o plugin ou se o seu editor já possui suporte nativo a esse formato de arquivo
Crie um arquivo .editorconfig e adicione as regras de sua preferência. O arquivo final deve ser algo parecido com a configuração abaixo.
root = true
[*] end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
Extra: Configurando VSCode
Caso você utilize VSCode como o seu editor de texto, existem duas configurações que são importantes adicionar no seu arquivo settings.json para que o editor possa realizar a formatação automática dos arquivos ao salvar.
"[typescript]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},typescript
"[typescriptreact]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
},
Conclusão
O processo de configuração do React com Typescript se beneficia de boilerplates como o Create React App, onde configurações como Babel e Webpack já vem pré configuradas para nós. Na grande maioria dos projetos essas configurações são necessárias. Para padronização do código devemos configurar nossa ferramenta de linting para entender os arquivos e importações Typescript, configurar o Prettier para aplicar a formatação no código e caso o projeto seja compartilhado entre um time de desenvolvedores é interessante configurar o EditorConfig.
Lembrando que essas são as configurações que eu utilizo ao iniciar um novo projeto. É importante você conhecer o seu projeto e com o tempo entender quais configurações funcionam para você. Essa publicação é apenas um guia com o objetivo de facilitar o inicio do desenvolvimento. Outro ponto a se observar é que a tecnologia evolui em um ritmo acelerado, então é importante ter em mente que as configurações podem alterar com o passar do tempo.
Fonte: React Docs
Postar um comentário