From be4df6f88144243e755bcba50cded2246ea4e098 Mon Sep 17 00:00:00 2001 From: dalikat Date: Sat, 5 Nov 2016 13:58:21 +0000 Subject: [PATCH] README.md edited online with Bitbucket --- tutorial/12-flow/README.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/tutorial/12-flow/README.md b/tutorial/12-flow/README.md index fa820860..cfcf5c18 100644 --- a/tutorial/12-flow/README.md +++ b/tutorial/12-flow/README.md @@ -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'; @@ -26,7 +26,7 @@ gulp.task('lint', () => ); ``` -Опция `abort` прерывает задачу Gulp если Flow обнаруживает проблему. +Опция `abort` прерывает задачу Gulp, если Flow обнаруживает проблему. Отлично, теперь мы можем запустить Flow. @@ -57,10 +57,10 @@ 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` @@ -68,25 +68,25 @@ export default Dog; Теперь `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 }) =>
{message}
; ``` -Как можете видеть, при деструктурировании параметра функции, вы должны делать аннотации для выделяемых свойств в виде объекта в литеральной нотации. +Как вы видите, при деструктурировании параметра функции, необходимо делать аннотации для выделяемых свойств в виде объекта в литеральной нотации. -Другим случаем, с которым вы столкнетесь, будет в `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'; @@ -94,16 +94,16 @@ 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).