Skip to content

Commit

Permalink
Merged in dalikat/readmemd-edited-online-with-bitbucket-1478354300236…
Browse files Browse the repository at this point in the history
… (pull request #2)

README.md edited online with Bitbucket
  • Loading branch information
usulpro committed Nov 7, 2016
2 parents 33c496d + be4df6f commit 16e5c1b
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions tutorial/12-flow/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

[Flow](https://flowtype.org/) - статический типизатор (static type checker). Он определяет несоответствие типов в вашем коде и позволяет напрямую декларировать типы через аннотации.

- Для того, чтобы Babel мог понимать и убирать аннотации Flow в процессе транспиляции, установите плагин Flow для Babel выполнив `yarn add --dev babel-preset-flow`. Затем добавье `"flow"` после `babel.presets` в `package.json`.
- Для того, чтобы Babel мог понимать и убирать аннотации Flow в процессе транспиляции, установите плагин Flow для Babel, выполнив `yarn add --dev babel-preset-flow`. Затем добавье `"flow"` после `babel.presets` в `package.json`.

- Создайте пустой файл `.flowconfig` в корне проекта.

- Запустите `yarn add --dev gulp-flowtype` чтобы установить Gulp плагин для Flow, и добавьте `flow()` в задачу `lint`:
- Запустите `yarn add --dev gulp-flowtype`, чтобы установить Gulp плагин для Flow, и добавьте `flow()` в задачу `lint`:

```javascript
import flow from 'gulp-flowtype';
Expand All @@ -26,7 +26,7 @@ gulp.task('lint', () =>
);
```

Опция `abort` прерывает задачу Gulp если Flow обнаруживает проблему.
Опция `abort` прерывает задачу Gulp, если Flow обнаруживает проблему.

Отлично, теперь мы можем запустить Flow.

Expand Down Expand Up @@ -57,53 +57,53 @@ class Dog {
export default Dog;
```

Комментарий `// @flow` говорит Flow что мы хотим проверять типы для этого файла. В остальном, аннотации Flow - это обычно двоеточие после параметра фукции или имени функции. Подробности посмотрите в документации.
Комментарий `// @flow` говорит Flow, что мы хотим проверять типы для этого файла. Сами анатации Flow предваряються двоеточием и обычно добавляються после параметра функции или имени функции. Подробности смотрите в документации.

Теперь, если вы запустите `yarn start`, Flow будет работать, но ESLint начнет жаловаться, что используется нестандартный синтаксис.
Поскольку парсер Babel отлично справляется с парсингом Flow контента (благодаря установленному нами плагину `babel-preset-flow`), было бы здорово, если бы ESLint мог опираться на парсер Babel, вместо того, чтобы пытаться самому понять аннотации Flow. Вообще, это возможно при использовании пакета `babel-eslint`. Давайте сделаем это.
Поскольку парсер Babel отлично справляется с парсингом Flow контента (благодаря установленному нами плагину `babel-preset-flow`), было бы здорово, если бы ESLint мог опираться на парсер Babel, вместо того, чтобы пытаться самому понять аннотации Flow. Это возможно при использовании пакета `babel-eslint`. Давайте сделаем это.

- Запустите `yarn add --dev babel-eslint`

- В `package.json`, после `eslintConfig`, добавьте следующее свойство: `"parser": "babel-eslint"`

Теперь `yarn start` должен одновременно анализировать код с помощью ESLint и проверять типы посредством Flow.

Теперь, поскольку ESLint и Babel совместно использовать общий парсер, мы можем заставить ESLint проверять наши Flow аннотации, используя плагин `eslint-plugin-flowtype`.
Далее, поскольку ESLint и Babel совместно используют общий парсер, мы можем заставить ESLint проверять наши Flow аннотации, используя плагин `eslint-plugin-flowtype`.

- Запустите `yarn add --dev eslint-plugin-flowtype` и добавьте `"flowtype"` после `eslintConfig.plugins` в `package.json`, и добавьте `"plugin:flowtype/recommended"` после `eslintConfig.extends` в массив после `"airbnb"`.
- Запустите `yarn add --dev eslint-plugin-flowtype` и добавьте `"flowtype"` после `eslintConfig.plugins` в `package.json`. Затем добавьте `"plugin:flowtype/recommended"` после `eslintConfig.extends` в массив после `"airbnb"`.

Теперь если вы, например, введете `name:string` в качестве аннотации, ESLint должен пожаловаться, что вы забыли пробел после двоеточия.
Теперь, если вы, например, введете `name:string` в качестве аннотации, ESLint должен пожаловаться, что вы забыли пробел после двоеточия.

**Замечание**: Свойство `"parser": "babel-eslint"` которое я заставил вас написать в `package.json` вообще-то входит в конфигурацию `"plugin:flowtype/recommended"`, так что теперь можете убрать его, чтобы сократить `package.json`. С другой стороны, оставить его здесь будет более наглядным, так что это на ваше предпочтение. Поскольку это руководство нацелено на максимальную краткость, я уберу.
**Примечание**: Свойство `"parser": "babel-eslint"`, которое я заставил вас написать в `package.json`, вообще-то входит в конфигурацию `"plugin:flowtype/recommended"`, так что теперь можете убрать его, чтобы сократить `package.json`. С другой стороны, оставить его здесь будет более наглядным, так что это на ваше усмотрение. Поскольку это руководство нацелено на максимальную краткость, я его уберу.

- Вы можете теперь добавить `// @flow` в каждый `.js` и `.jsx` файл в папке `src`, запустить `yarn test` или `yarn start`, и добавлять аннотации везде где этого попросит Flow.
- Теперь вы можете добавить `// @flow` в каждый `.js` и `.jsx` файл в папке `src`, запустить `yarn test` или `yarn start`, и добавлять аннотации везде, где этого попросит Flow.

Вы можете обнаружить неожиданный случай в `src/client/component/message.jsx`:
Вы можете обнаружить неожиданный случай (результат) в `src/client/component/message.jsx`: (предлажение кривое надо заменить - неожиданную проблему?)

```javascript
const Message = ({ message }: { message: string }) => <div>{message}</div>;
```

Как можете видеть, при деструктурировании параметра функции, вы должны делать аннотации для выделяемых свойств в виде объекта в литеральной нотации.
Как вы видите, при деструктурировании параметра функции, необходимо делать аннотации для выделяемых свойств в виде объекта в литеральной нотации.

Другим случаем, с которым вы столкнетесь, будет в `src/client/reducers/dog-reducer.js`. Flow начнет жаловаться, что Immutable не имеет возвращаемого значения по умолчанию. Эта проблема описана тут: [#863 on Immutable](https://github.com/facebook/immutable-js/issues/863), и имеет два обходных путя:
Другой случай, с которым вы столкнетесь, будет в `src/client/reducers/dog-reducer.js`. Flow начнет жаловаться, что Immutable не имеет возвращаемого значения по умолчанию. Эта проблема описана тут: [#863 on Immutable](https://github.com/facebook/immutable-js/issues/863), и имеет два обходных пути:

```javascript
import { Map as ImmutableMap } from 'immutable';
// или
import * as Immutable from 'immutable';
```

Пока Immutable официально не разрешит проблему, просто выберите то, что вам больше нравится, когда импортируете компоненты Immutable. Лично я, буду использовать `import * as Immutable from 'immutable'`, поскольку это короче и не потребует рефакторинга кода после того, как проблема будет решена.
Пока Immutable официально не решит проблему, просто выберите то, что вам больше нравится, когда импортируете компоненты Immutable. Лично я, буду использовать `import * as Immutable from 'immutable'`, поскольку это короче и не потребует рефакторинга кода, после того, как проблема будет решена.

**Замечание**: Если Flow определяет ошибки типизации в папке `node_modules`, добавьте раздел `[ignore]` в файл `.flowconfig` чтобы указать какие именно пакеты игнорировать (не игнорируйте полностью директорию `node_modules`). Это может выглядеть так:
**Примечание**: Если Flow выявляет ошибки типизации в папке `node_modules`, добавьте раздел `[ignore]` в файл `.flowconfig`, чтобы указать какие именно пакеты игнорировать (не игнорируйте полностью директорию `node_modules`). Это может выглядеть так:
```
[ignore]
.*/node_modules/gulp-flowtype/.*
```
В моем случе плагин `linter-flow` для Atom обнаружил ошибки типизации в директории `node_modules/gulp-flowtype`, которая содержит файлы аннотированные `// @flow`.
В моем случе, плагин `linter-flow` для Atom обнаружил ошибки типизации в директории `node_modules/gulp-flowtype`, которая содержит файлы аннотированные `// @flow`.

Теперь у вас есть "пуленепробиваемый" код, который проанализирован, протипизирован и протестирован - отличная работа!
Теперь, у вас есть "пуленепробиваемый" код, который проанализирован, протипизирован и протестирован - отличная работа!

Назад в [предыдущий раздел](/tutorial/11-testing-mocha-chai-sinon) или [Содержание](/README.md).

0 comments on commit 16e5c1b

Please sign in to comment.