Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translate static type checking #103

Merged
merged 18 commits into from
Mar 13, 2019
Merged
Changes from 4 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
507857a
[Translate: Static Type Checking] Intro
ericp3reira Feb 11, 2019
5cc1798
[Translate: Static Type Checking] Flow
ericp3reira Feb 17, 2019
fdbec15
[Translate: Static Type Checking] #adding-flow-to-a-project
ericp3reira Feb 17, 2019
48967e5
[Translate: Static Type Checking] #stripping-flow-syntax-from-the-com…
ericp3reira Feb 17, 2019
55cab8b
Update content/docs/static-type-checking.md
halian-vilela Feb 18, 2019
20422e8
Update content/docs/static-type-checking.md
halian-vilela Feb 18, 2019
2d9bad6
Update content/docs/static-type-checking.md
halian-vilela Feb 18, 2019
c3f7c32
Update content/docs/static-type-checking.md
halian-vilela Feb 18, 2019
fa623e4
Update content/docs/static-type-checking.md
michellocana Feb 20, 2019
8e19004
[Translate: Static Type Checking] #typescript
ericp3reira Mar 6, 2019
bedde55
[Translate: Static Type Checking] finished #typescript
ericp3reira Mar 10, 2019
bb6d355
Merge branch 'master' into translate-static-type-checking
ericp3reira Mar 11, 2019
446ba20
[Translate: Static Type Checking] #reason
ericp3reira Mar 11, 2019
9b98713
Merge branch 'translate-static-type-checking' of github.com:ericp3rei…
ericp3reira Mar 11, 2019
141dec2
[Translate: Static Type Checking] fix yarn suggestion
ericp3reira Mar 11, 2019
950193f
[Translate: Static Type Checking] #kotlin
ericp3reira Mar 11, 2019
dab4da4
[Translate: Static Type Checking] Fix removed lines
ericp3reira Mar 11, 2019
7f68b26
Update content/docs/static-type-checking.md
halian-vilela Mar 13, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 33 additions & 33 deletions content/docs/static-type-checking.md
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
---
id: static-type-checking
title: Static Type Checking
title: Verificando Tipos Estáticos
permalink: docs/static-type-checking.html
prev: typechecking-with-prototypes.html
next: refs-and-the-dom.html
---

Static type checkers like [Flow](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/) identify certain types of problems before you even run your code. They can also improve developer workflow by adding features like auto-completion. For this reason, we recommend using Flow or TypeScript instead of `PropTypes` for larger code bases.
Verificadores de tipos estáticos, como [Flow](https://flow.org/) e [TypeScript](https://www.typescriptlang.org/), 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 {#flow}

[Flow](https://flow.org/) is a static type checker for your JavaScript code. It is developed at Facebook and is often used with React. It lets you annotate the variables, functions, and React components with a special type syntax, and catch mistakes early. You can read an [introduction to Flow](https://flow.org/en/docs/getting-started/) to learn its basics.
[Flow](https://flow.org/) é 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](https://flow.org/en/docs/getting-started/) para aprender o básico.

To use Flow, you need to:
Para usar o Flow, você precisa:

* Add Flow to your project as a dependency.
* Ensure that Flow syntax is stripped from the compiled code.
* Add type annotations and run Flow to check them.
* Adicionar o Flow como dependência ao seu projeto.
* Garantir que a sintaxe do Flow é retirada do código compilado.
ericp3reira marked this conversation as resolved.
Show resolved Hide resolved
* Adicionar anotações de tipo e executar o Flow para checá-las.

We will explain these steps below in detail.
Explicaremos abaixo esses passos com detalhes.

### Adding Flow to a Project {#adding-flow-to-a-project}
### Adicionando Flow a um Projeto {#adding-flow-to-a-project}
ericp3reira marked this conversation as resolved.
Show resolved Hide resolved

First, navigate to your project directory in the terminal. You will need to run the following command:
Primeiro, use o terminal e navegue até o diretório do seu projeto. Você precisará executar o seguinte comando:

If you use [Yarn](https://yarnpkg.com/), run:
Se você usa [Yarn](https://yarnpkg.com/), execute:

```bash
yarn add --dev flow-bin
```

If you use [npm](https://www.npmjs.com/), run:
Se você usa [npm](https://www.npmjs.com/), execute:

```bash
npm install --save-dev flow-bin
```

This command installs the latest version of Flow into your project.
Este comando instala a versão mais recente do Flow no seu projeto.

Now, add `flow` to the `"scripts"` section of your `package.json` to be able to use this from the terminal:
Agora, adicione `flow` à seção `"scripts"` do seu `package.json` para conseguir usar isto no terminal:

```js{4}
{
Expand All @@ -51,53 +51,53 @@ Now, add `flow` to the `"scripts"` section of your `package.json` to be able to
}
```

Finally, run one of the following commands:
Por fim, execute um dos comandos a seguir:

If you use [Yarn](https://yarnpkg.com/), run:
Se você usa [Yarn](https://yarnpkg.com/), execute:

```bash
yarn run flow init
```

If you use [npm](https://www.npmjs.com/), run:
Se você usa [npm](https://www.npmjs.com/), execute:

```bash
npm run flow init
```

This command will create a Flow configuration file that you will need to commit.
Este comando criará um arquivo de configuração do Flow que você precisará fazer commit.

### Stripping Flow Syntax from the Compiled Code {#stripping-flow-syntax-from-the-compiled-code}
### Separando a Sintaxe do Flow do Código Compilado {#stripping-flow-syntax-from-the-compiled-code}

Flow extends the JavaScript language with a special syntax for type annotations. However, browsers aren't aware of this syntax, so we need to make sure it doesn't end up in the compiled JavaScript bundle that is sent to the browser.
O 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 termine no código JavaScript compilado que é enviado ao navegador.
ericp3reira marked this conversation as resolved.
Show resolved Hide resolved

The exact way to do this depends on the tools you use to compile JavaScript.
A forma exata de fazer isso depende das ferramentas que você usa para compilar o JavaScript.

#### Create React App {#create-react-app}

If your project was set up using [Create React App](https://github.com/facebookincubator/create-react-app), congratulations! The Flow annotations are already being stripped by default so you don't need to do anything else in this step.
Se o seu projeto foi configurado com [Create React App](https://github.com/facebookincubator/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.

#### Babel {#babel}

>Note:
>Nota:
>
>These instructions are *not* for Create React App users. Even though Create React App uses Babel under the hood, it is already configured to understand Flow. Only follow this step if you *don't* use Create React App.
>Estas instruções *não* são para usuário do Create React App. Apesar do Create React App usar Babel por baixo dos panos, ele já é configurado para entender o Flow. Siga estes passos somente se você *não* usa o Create React App.
ericp3reira marked this conversation as resolved.
Show resolved Hide resolved

If you manually configured Babel for your project, you will need to install a special preset for Flow.
Se você configurou o Babel manualmente no seu projeto, precisará instalar um preset especial para Flow.

If you use Yarn, run:
Se você usa [Yarn](https://yarnpkg.com/), execute:

```bash
yarn add --dev babel-preset-flow
```

If you use npm, run:
Se você usa [npm](https://www.npmjs.com/), execute:

```bash
npm install --save-dev babel-preset-flow
```

Then add the `flow` preset to your [Babel configuration](https://babeljs.io/docs/usage/babelrc/). For example, if you configure Babel through `.babelrc` file, it could look like this:
Então adicione o preset `flow` à sua [configuração do Babel](https://babeljs.io/docs/usage/babelrc/). Por exemplo, se você configura o Babel através do arquivo `.babelrc`, pode ficar parecido com isto:

```js{3}
{
Expand All @@ -108,15 +108,15 @@ Then add the `flow` preset to your [Babel configuration](https://babeljs.io/docs
}
```

This will let you use the Flow syntax in your code.
Isto permitirã que você use a sintaxe do Flow no seu código.
ericp3reira marked this conversation as resolved.
Show resolved Hide resolved

>Note:
>Nota:
>
>Flow does not require the `react` preset, but they are often used together. Flow itself understands JSX syntax out of the box.
>O Flow não requer o preset `react`, mas eles são frequentemente usados juntos. O Flow por si só já vem pronto para entender a sintaxe JSX.

#### Other Build Setups {#other-build-setups}
#### Outras Configurações de Build {#other-build-setups}

If you don't use either Create React App or Babel, you can use [flow-remove-types](https://github.com/flowtype/flow-remove-types) to strip the type annotations.
Se você não usa Create React App nem Babel, você pode usar [flow-remove-types](https://github.com/flowtype/flow-remove-types) para separar as anotações de tipos.
ericp3reira marked this conversation as resolved.
Show resolved Hide resolved

### Running Flow {#running-flow}

Expand Down