Verificadores de tipos estáticos, como Flow e TypeScript, identificam certos tipos de problemas mesmo antes do seu código ser executado. Eles também melhoram o fluxo de trabalho do desenvolvedor adicionando features como preenchimento automático. Por isso, recomendamos usar Flow ou TypeScript ao invés de PropTypes para bases de código maiores.
Flow é um verificador de tipos estáticos para o seu código JavaScript. É desenvolvido no Facebook e frequentemente usado com o React. Ele permite que você faça anotações às variáveis, funções e componentes do React com um tipo especial de sintaxe e capture erros cedo. Você pode ler a introdução ao Flow para aprender o básico.
\nPara usar o Flow, você precisa:
\nExplicaremos abaixo esses passos com detalhes.
\nPrimeiro, use o terminal e navegue até o diretório do seu projeto. Você precisará executar o seguinte comando:
\nSe você usa Yarn, execute:
\nyarn add --dev flow-binSe você usa npm, execute:
\nnpm install --save-dev flow-binEste comando instala a versão mais recente do Flow no seu projeto.
\nAgora, adicione flow à seção "scripts" do seu package.json para conseguir usar isto no terminal:
{\n // ...\n \"scripts\": {\n \"flow\": \"flow\", // ...\n },\n // ...\n}Por fim, execute um dos comandos a seguir:
\nSe você usa Yarn, execute:
\nyarn run flow initSe você usa npm, execute:
\nnpm run flow initEste comando criará um arquivo de configuração do Flow que você precisará fazer commit.
\nO Flow estende a linguagem JavaScript com uma sintaxe especial para anotações de tipo. Entretanto, os navegadores não estão cientes desta sintaxe. Assim, precisamos ter certeza que a sintaxe do Flow não permaneça no código JavaScript compilado que é enviado ao navegador.
\nA forma exata de fazer isso depende das ferramentas que você usa para compilar o JavaScript.
\nSe o seu projeto foi configurado com Create React App, parabéns! As anotações do Flow já estão sendo retiradas por padrão, então você não precisa fazer mais nada nesta etapa.
\n\n\nNota:
\nEstas instruções não são para usuários do Create React App. Apesar do Create React App usar Babel por baixo dos panos, ele já está configurado para entender o Flow. Siga estes passos somente se você não usa o Create React App.
\n
Se você configurou o Babel manualmente no seu projeto, precisará instalar um preset especial para Flow.
\nSe você usa Yarn, execute:
\nyarn add --dev @babel/preset-flowSe você usa npm, execute:
\nnpm install --save-dev @babel/preset-flowEntão adicione o preset flow à sua configuração do Babel. Por exemplo, se você configura o Babel através do arquivo .babelrc, pode ficar parecido com isto:
{\n \"presets\": [\n \"@babel/preset-flow\", \"react\"\n ]\n}Isto permitirá que você use a sintaxe do Flow no seu código.
\n\n\nNota:
\nO Flow não requer o preset
\nreact, mas eles são frequentemente usados juntos. O Flow por si só já vem pronto para entender a sintaxe JSX.
Se você não usa Create React App nem Babel, você pode usar flow-remove-types para remover as anotações de tipos.
\nSe você seguiu os passos acima, deve ser capaz de executar o Flow pela primeira vez.
\nSe você usa Yarn, execute:
\nyarn flowSe você usa npm, execute:
\nnpm run flowVocê deverá ver uma mensagem como esta:
\nNo errors!\n✨ Done in 0.17s.Por padrão, o Flow checa apenas os arquivos que incluem esta anotação:
\n// @flowNormalmente, é posicionado no topo de um arquivo. Tente adicioná-la em alguns arquivos do seu projeto e execute yarn flow ou npm run flow para ver se o Flow já achou algum problema.
Também há uma opção para forçar o Flow a checar todos os arquivos independente se há a anotação ou não. Isto pode ser meio turbulento para projetos já existentes, mas é sensato para um novo projeto se você quer deixá-lo totalmente tipado com o Flow.
\nAgora está tudo certo! Recomendamos dar uma lida nos seguintes recursos para aprender mais sobre o Flow (em inglês):
\nO TypeScript é uma linguagem de programação desenvolvida pela Microsoft. É um superset tipado do JavaScript e inclui seu próprio compilador. Sendo uma linguagem tipada, o TypeScript consegue detectar erros e bugs em tempo de compilação, muito antes do seu aplicativo iniciar. Você pode aprender mais sobre o uso do TypeScript com React aqui.
\nPara usar o TypeScript você precisa:
\nVamos passar por cada uma em detalhes.
\nO Create React App já vem com suporte para o TypeScript.
\nPara criar um novo projeto com suporte ao TypeScript, execute:
\nnpx create-react-app my-app --template typescriptVocë também pode adicioná-lo a um projeto Create React App existente, como está documentado aqui.
\n\n\nNota:
\nSe você usa Create React App, você pode pular o resto desta página. Ela descreve a configuração manual no qual não se aplicam a usuários do Create React App.
\n
Tudo começa executando um comando no seu terminal.
\nSe você usa Yarn, execute:
\nyarn add --dev typescriptSe você usa npm, execute:
\nnpm install --save-dev typescriptParabéns! Você instalou a versão mais recente do TypeScript no seu projeto. Instalar o TypeScript nos dá acesso ao comando tsc. Antes da configuração, vamos adicionar tsc à seção “scripts” no nosso package.json:
{\n // ...\n \"scripts\": {\n \"build\": \"tsc\", // ...\n },\n // ...\n}O compilador não é de ajuda alguma até que o dizemos o que deve fazer. No TypeScript, essas regras são definidas em um arquivo especial chamado tsconfig.json. Para gerar esse arquivo execute:
Se você usa Yarn, execute:
\nyarn run tsc --initSe você usa npm, execute:
\nnpx tsc --initOlhando o então gerado tsconfig.json, você pode ver que há muitas opções que você pode usar para configurar o compilador. Para uma descrição detalhada de todas as opções, veja aqui.
Das muitas opções, daremos uma olhada em rootDir e outDir. Na sua forma verdadeira, o compilador receberá arquivos typescript e gerará arquivos javascript. Entretanto, não queremos que nossos arquivos fontes e a saída gerada fiquem confusos.
Vamos cobrir isso em dois passos:
\nsrc.├── package.json\n├── src\n│ └── index.ts\n└── tsconfig.json// tsconfig.json\n\n{\n \"compilerOptions\": {\n // ...\n \"rootDir\": \"src\", \"outDir\": \"build\" // ...\n },\n}Ótimo! Agora quando executarmos o nosso script de build, o compilador vai colocar o JavaScript gerado na pasta build. O TypeScript React Starter oferece um tsconfig.json com um bom conjunto de regras para você começar.
Geralmente, você não quer manter o JavaScript gerado no seu repositório, então tenha certeza de que adicionou a pasta do build no seu .gitignore.
No React, você provavelmente escreverá seus componentes em um arquivo .js. No TypeScript temos 2 extensões de arquivo:
.ts é a extensão de arquivo padrão, enquanto .tsx é uma extensão especial usada em arquivos que contém JSX.
Se você seguiu as instruções acima, você deverá ser capaz de executar o TypeScript pela primeira vez.
\nyarn buildSe você usa npm, execute:
\nnpm run buildSe você não vê um output, significa que completou com sucesso.
\nPara ser capaz de mostrar erros e dicas de outros pacotes, o compilador depende dos arquivos de declaração. Um arquivo de declaração oferece todo a informação de tipos sobre uma biblioteca. Isso nos permite usar bibliotecas javascript, como as que estão no npm, no nosso projeto.
\nExistem duas formas principais de conseguir declarações para uma biblioteca:
\nBundled - A biblioteca empacota o seu próprio arquivo de declaração. Isto é ótimo para nós, pois tudo o que precisaremos fazer é instalar a biblioteca e estaremos prontos para usá-la. Para verificar se uma biblioteca tem tipos empacotados, procure por um arquivo index.d.ts no projeto. Algumas bibliotecas terá o arquivo especificado em seus package.json, no campo typings ou types.
DefinitelyTyped - DefinitelyTyped é um repositório enorme de declarações para bibliotecas que não empacotam um arquivo de declaração. As declarações são feitas pelo público e gerenciadas pela Microsoft e contribuidores de código aberto. O React, por exemplo, não empacota seu próprio arquivo de declaração. Em vez disso, nós podemos pegá-lo do DefinitelyTyped. Para isso, entre este comando no seu terminal:
\n# yarn\nyarn add --dev @types/react\n\n# npm\nnpm i --save-dev @types/reactDeclarações Locais\nAlgumas vezes o pacote que você quer usar não empacota declarações nem está disponível no DefinitelyTyped. Neste caso, podemos ter um arquivo de declaração local. Para fazer isto, crie um arquivo declarations.d.ts na raiz da pasta do seu código fonte. Uma declaração simples ficaria assim:
declare module 'querystring' {\n export function stringify(val: object): string\n export function parse(val: string): object\n}Vocé agora pode começar a programar! Nós recomendamos verificar os seguintes recursos para aprender mais sobre TypeScript (em inglês):
\nReason não é uma linguagem nova; é uma nova sintaxe e cadeia de ferramentas disponibilizada pela linguagem testada em batalha OCaml. A Reason dá a OCaml uma sintaxe familiar voltada para programadores JavaScript e atende ao fluxo de trabalho do NPM/Yarn que o pessoal já conhece.
\nA Reason é desenvolvida no Facebook e é usada em alguns dos seus produtos como o Messenger. Ainda é de alguma forma experimental, mas ela tem ligações dedicadas com o React mantida pelo Facebook e pela comunidade vibrante.
\nKotlin é uma linguagem estaticamente tipada desenvolvida pelo JetBrains. As plataformas alvo dela incluem o JVM, Android, LLVM e JavaScript.
\nJetBrains desenvolve e mantém algumas ferramentas especificamente para a comunidade do React: ligações com o React assim como Create React Kotlin App. A última auxilia você a começar a construir aplicações React com Kotlin sem precisar configurar um build.
\nPerceba que há outras linguagens estaticamente tipadas que compilam para JavaScript e assim são compatíveis com React. Por exemplo, F#/Fable com elmish-react. Verifique os respectivos sites para mais informações e sinta-se livre para adicionar a esta página mais linguagens estaticamente tipadas que trabalham com React!
","frontmatter":{"title":"Verificando Tipos Estáticos","next":null,"prev":null},"fields":{"path":"content/docs/static-type-checking.md","slug":"docs/static-type-checking.html"}}},"pageContext":{"slug":"docs/static-type-checking.html"}},"staticQueryHashes":[]}