From 800c320927d90636facea8b03a8b32516a0517b3 Mon Sep 17 00:00:00 2001 From: acilsd Date: Thu, 14 Feb 2019 17:33:45 +0300 Subject: [PATCH 01/37] Translate first two subsections. --- content/docs/static-type-checking.md | 38 +++++++++++++++------------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index b01b92fec..cda5d609c 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -1,44 +1,46 @@ --- id: static-type-checking -title: Static Type Checking +title: Статическая типизация 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. +Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать некоторые потенциальные ошибки еще до исполнения кода. Кроме того, они делают процесс разработки более удобным, добавляя такие возможности, как авдодополнение. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. ## 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/) — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React компонентов. Ознакомиться с основами Flow можно на сайте [официальной документации](https://flow.org/en/docs/getting-started/). -To use Flow, you need to: +Чтобы начать пользоваться возможностями Флоу, необходимо: -* 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. +* Установить Flow как локальную зависимость в ваш проект. +* Убедиться, что аннотации Flow удаляются из кода при его компиляции. +* Добавить несколько аннотаций типов и запустить Flow для их проверки. -We will explain these steps below in detail. +Рассмотрим подробнее каждый из этих шагов. -### Adding Flow to a Project {#adding-flow-to-a-project} +### Добавление Flow в проект {#adding-flow-to-a-project} -First, navigate to your project directory in the terminal. You will need to run the following command: +Убедитесь, что вы находитесь в директории вашего проекта, после чего запустите одну из следующих команд: -If you use [Yarn](https://yarnpkg.com/), run: +Если вы используете [Yarn](https://yarnpkg.com/): ```bash yarn add --dev flow-bin ``` -If you use [npm](https://www.npmjs.com/), run: +Если вы используете [npm](https://www.npmjs.com/): ```bash npm install --save-dev flow-bin ``` +Последняя версия Flow должна + This command installs the latest version of Flow into your project. -Now, add `flow` to the `"scripts"` section of your `package.json` to be able to use this from the terminal: +Далее нужно добавить `flow` в раздел `"scripts"` файла `package.json`: ```js{4} { @@ -51,23 +53,23 @@ Now, add `flow` to the `"scripts"` section of your `package.json` to be able to } ``` -Finally, run one of the following commands: +Теперь мы можем запустить скрипт, прописав в терминале: -If you use [Yarn](https://yarnpkg.com/), run: +Если вы используете [Yarn](https://yarnpkg.com/): ```bash yarn run flow init ``` -If you use [npm](https://www.npmjs.com/), run: +Если вы используете [npm](https://www.npmjs.com/): ```bash npm run flow init ``` -This command will create a Flow configuration file that you will need to commit. +Эта команда создаст файл с конфигурацией Flow, который обязательно нужно закоммитить. -### Stripping Flow Syntax from the Compiled Code {#stripping-flow-syntax-from-the-compiled-code} +### Удаление аннотаций Flow из скомпилированного кода {#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. From fa526866050f03d2a735fef7f90f060ac4f67cc5 Mon Sep 17 00:00:00 2001 From: acilsd Date: Mon, 18 Feb 2019 02:42:42 +0300 Subject: [PATCH 02/37] Finish translating Flow stuffy --- content/docs/static-type-checking.md | 60 +++++++++++++--------------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index cda5d609c..d5b924c5e 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -6,15 +6,15 @@ prev: typechecking-with-prototypes.html next: refs-and-the-dom.html --- -Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать некоторые потенциальные ошибки еще до исполнения кода. Кроме того, они делают процесс разработки более удобным, добавляя такие возможности, как авдодополнение. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. +Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать большую часть ошибок еще до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя такие возможности, как авдодополнение. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. ## Flow {#flow} -[Flow](https://flow.org/) — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React компонентов. Ознакомиться с основами Flow можно на сайте [официальной документации](https://flow.org/en/docs/getting-started/). +[Flow](https://flow.org/) — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React компонентов. Ознакомиться с основами Flow можно на странице [официальной документации](https://flow.org/en/docs/getting-started/). -Чтобы начать пользоваться возможностями Флоу, необходимо: +Чтобы начать пользоваться возможностями Флоу необходимо: -* Установить Flow как локальную зависимость в ваш проект. +* Установить Flow как локальную зависимость проекта. * Убедиться, что аннотации Flow удаляются из кода при его компиляции. * Добавить несколько аннотаций типов и запустить Flow для их проверки. @@ -36,9 +36,7 @@ yarn add --dev flow-bin npm install --save-dev flow-bin ``` -Последняя версия Flow должна - -This command installs the latest version of Flow into your project. +Эти команды установят последнюю версию Flow в качестве локальной зависимости вашего проекта. Далее нужно добавить `flow` в раздел `"scripts"` файла `package.json`: @@ -53,7 +51,7 @@ This command installs the latest version of Flow into your project. } ``` -Теперь мы можем запустить скрипт, прописав в терминале: +Теперь можно запустить скрипт, прописав в терминале: Если вы используете [Yarn](https://yarnpkg.com/): @@ -67,39 +65,37 @@ yarn run flow init npm run flow init ``` -Эта команда создаст файл с конфигурацией Flow, который обязательно нужно закоммитить. +Эти команды создадут файл с исходной конфигурацией Flow, который обязательно нужно закоммитить. ### Удаление аннотаций Flow из скомпилированного кода {#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. +Flow дополняет JavaScript собственным синтаксисом для указания типов, который не поддерживается браузерами. Для того, чтобы код работал, нужно убедиться в том, что аннотации Flow корректно удаляются из скомипилированного JavaScript бандла. -The exact way to do this depends on the tools you use to compile JavaScript. +В зависимости от того, какими инструментами для сборки 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. +Если для изначальной конфигурации проекта вы выбрали [Create React App](https://github.com/facebookincubator/create-react-app), вам ничего не нужно делать! Проект уже настроен должным образом и аннотации Flow должны удаляться при сборке проекта. #### Babel {#babel} ->Note: +>Примечание: > ->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. - -If you manually configured Babel for your project, you will need to install a special preset for Flow. +>Дальнейшие инструкции рассчитаны на тех, кто *не использует* Create React App, т.к. в нем уже есть все необходимые настройки для работы с Flow. -If you use Yarn, run: +Если для своего проекте вы самостоятельно настраивали Babel, нужно установить специальный пресет для работы с Flow: ```bash yarn add --dev babel-preset-flow ``` -If you use npm, run: +Или через `npm`: ```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: +Затем добавьте установленный пресет `flow` в свою [конфигурацю Babel](https://babeljs.io/docs/usage/babelrc/). Например так, если вы используете конфигурационный файл `.babelrc`: ```js{3} { @@ -112,48 +108,48 @@ Then add the `flow` preset to your [Babel configuration](https://babeljs.io/docs This will let you use the Flow syntax in your code. ->Note: +>Примечание: > ->Flow does not require the `react` preset, but they are often used together. Flow itself understands JSX syntax out of the box. +>Для работы с Flow не нужно отдельно устанавливать пресет `react` — Flow уже понимает JSX синтаксис. Тем не менее, часто используют оба пресета одновременно. -#### Other Build Setups {#other-build-setups} +#### Другие инструменты сборки {#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. +Для удаления аннотаций Flow существует отдельная библиотека: [flow-remove-types](https://github.com/flowtype/flow-remove-types). Она может пригодиться, если вы пользуетесь другими инструментами для сборки проекта. -### Running Flow {#running-flow} +### Запуск Flow {#running-flow} -If you followed the instructions above, you should be able to run Flow for the first time. +Если все было сделано правильно, можно попробовать запустить процесс Flow. ```bash yarn flow ``` -If you use npm, run: +Или при помощи npm: ```bash npm run flow ``` -You should see a message like: +Вы должны увидеть примерно такое сообщение в терминале: ``` No errors! ✨ Done in 0.17s. ``` -### Adding Flow Type Annotations {#adding-flow-type-annotations} +### Добавление аннотаций типов {#adding-flow-type-annotations} -By default, Flow only checks the files that include this annotation: +По умолчанию, Flow проверяет только файлы, содержащие специальную аннотацию (обычно ее указывают в самом начале файла): ```js // @flow ``` -Typically it is placed at the top of a file. Try adding it to some files in your project and run `yarn flow` or `npm run flow` to see if Flow already found any issues. +Попробуйте добавить эту аннотацию в некоторые файлы вашего проекта, а затем запустить скрипт `yarn flow` или `npm run flow` и посмотреть, найдет ли Flow какие-нибудь ошибки. -There is also [an option](https://flow.org/en/docs/config/options/#toc-all-boolean) to force Flow to check *all* files regardless of the annotation. This can be too noisy for existing projects, but is reasonable for a new project if you want to fully type it with Flow. +Кроме того, есть [возможность](https://flow.org/en/docs/config/options/#toc-all-boolean) заставить Flow проверять вообще *все* файлы. Если вы переводите на Flow проект, в котором уже есть наработки кода — может возникнуть множество конфликтов, а вот для старта с нуля такая опция может стать неплохим выбором. -Now you're all set! We recommend to check out the following resources to learn more about Flow: +Все должно работать! Советуем ознакомиться с этими ресурсами и познакомиться с Flow подробнее: * [Flow Documentation: Type Annotations](https://flow.org/en/docs/types/) * [Flow Documentation: Editors](https://flow.org/en/docs/editors/) From 97fcc01e7f2b36f98bb5b265c37f8e40481a7ada Mon Sep 17 00:00:00 2001 From: acilsd Date: Mon, 18 Feb 2019 02:57:38 +0300 Subject: [PATCH 03/37] Finish other lang and fix some typos --- content/docs/static-type-checking.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index d5b924c5e..41f8bfad8 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -106,7 +106,7 @@ npm install --save-dev babel-preset-flow } ``` -This will let you use the Flow syntax in your code. +Этот пресет позволит использовать Flow в вашем коде. >Примечание: > @@ -139,7 +139,7 @@ No errors! ### Добавление аннотаций типов {#adding-flow-type-annotations} -По умолчанию, Flow проверяет только файлы, содержащие специальную аннотацию (обычно ее указывают в самом начале файла): +По умолчанию Flow проверяет только файлы, содержащие специальную аннотацию (обычно ее указывают в самом начале файла): ```js // @flow @@ -320,6 +320,6 @@ Reason is developed at Facebook, and is used in some of its products like Messen JetBrains develops and maintains several tools specifically for the React community: [React bindings](https://github.com/JetBrains/kotlin-wrappers) as well as [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). The latter helps you start building React apps with Kotlin with no build configuration. -## Other Languages {#other-languages} +## Другие языки {#other-languages} -Note there are other statically typed languages that compile to JavaScript and are thus React compatible. For example, [F#/Fable](http://fable.io) with [elmish-react](https://elmish.github.io/react). Check out their respective sites for more information, and feel free to add more statically typed languages that work with React to this page! +Помните: есть и другие языки со статической типизацией, которые могут компилироваться в JavaScript, а значит — совместимы с React. Например, [F#/Fable](http://fable.io) вместе с [elmish-react](https://elmish.github.io/react). Для подробной информации - переходите на соответствующие сайты и не стесняйтесь предлагать больше React-совместимых статически типизированных языков в этот раздел! From e1c89f0fbcd0f136706b0d343db48860476662b7 Mon Sep 17 00:00:00 2001 From: acilsd Date: Mon, 18 Feb 2019 03:18:22 +0300 Subject: [PATCH 04/37] Finish ReasonML and Kotlin sections --- content/docs/static-type-checking.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 41f8bfad8..91954ed38 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -310,15 +310,15 @@ You are now ready to code! We recommend to check out the following resources to ## Reason {#reason} -[Reason](https://reasonml.github.io/) is not a new language; it's a new syntax and toolchain powered by the battle-tested language, [OCaml](https://ocaml.org/). Reason gives OCaml a familiar syntax geared toward JavaScript programmers, and caters to the existing NPM/Yarn workflow folks already know. +[Reason](https://reasonml.github.io/) — это не новый язык, а новый синтаксис и набор инструментов для проверенного временем языка [OCaml](https://ocaml.org/). Reason предоставляет синтаксис, ориентированный на JavaScript программистов, и использует уже известный всем способ распространения через NPM/Yarn. -Reason is developed at Facebook, and is used in some of its products like Messenger. It is still somewhat experimental but it has [dedicated React bindings](https://reasonml.github.io/reason-react/) maintained by Facebook and a [vibrant community](https://reasonml.github.io/docs/en/community.html). +Reason был разработан в Facebook и используется в некоторых продуктах этой компании — например, в Messenger. Reason все еще считается довольно экспериментальным инструментом, но уже имеет [библиотеку привязок для React](https://reasonml.github.io/reason-react/), поддерживаемую Facebook, а также [отзывчивое коммьюнити](https://reasonml.github.io/docs/en/community.html) ## Kotlin {#kotlin} -[Kotlin](https://kotlinlang.org/) is a statically typed language developed by JetBrains. Its target platforms include the JVM, Android, LLVM, and [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html). +[Kotlin](https://kotlinlang.org/) это язык со статической типизацией, разработанный в JetBrains. Он нацелен на платформы работающие на основе JVM, Android, LLVM, и [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html). -JetBrains develops and maintains several tools specifically for the React community: [React bindings](https://github.com/JetBrains/kotlin-wrappers) as well as [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). The latter helps you start building React apps with Kotlin with no build configuration. +JetBrains разрабатывает и поддерживает несколько библиотек специально для React community: [React bindings](https://github.com/JetBrains/kotlin-wrappers) совместно с [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). Последняя позволит вам начать использовать Kotlin вместе с React в одном проекте без необходимости ручной конфигурации. ## Другие языки {#other-languages} From 871df18c5fb51a73ec002546037321639c2ef924 Mon Sep 17 00:00:00 2001 From: acilsd Date: Mon, 18 Feb 2019 03:20:15 +0300 Subject: [PATCH 05/37] rephrase --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 91954ed38..4e034a11d 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -6,7 +6,7 @@ prev: typechecking-with-prototypes.html next: refs-and-the-dom.html --- -Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать большую часть ошибок еще до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя такие возможности, как авдодополнение. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. +Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать большую часть ошибок еще до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя авдодополнение и другие возможности. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. ## Flow {#flow} From 8bbd7b59f097c9b7ae2163369a86f6975a03c407 Mon Sep 17 00:00:00 2001 From: acilsd Date: Mon, 18 Feb 2019 03:20:53 +0300 Subject: [PATCH 06/37] =?UTF-8?q?=D0=A4=D0=BB=D0=BE=D1=83=20->=20Flow?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 4e034a11d..41e4d67d8 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -12,7 +12,7 @@ next: refs-and-the-dom.html [Flow](https://flow.org/) — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React компонентов. Ознакомиться с основами Flow можно на странице [официальной документации](https://flow.org/en/docs/getting-started/). -Чтобы начать пользоваться возможностями Флоу необходимо: +Чтобы начать пользоваться возможностями Flow необходимо: * Установить Flow как локальную зависимость проекта. * Убедиться, что аннотации Flow удаляются из кода при его компиляции. From 10193f577668966d72bbb2da0e8f58b751d97503 Mon Sep 17 00:00:00 2001 From: acilsd Date: Mon, 18 Feb 2019 03:26:25 +0300 Subject: [PATCH 07/37] Another rephrase --- content/static-type-checking.md | 325 ++++++++++++++++++++++++++++++++ 1 file changed, 325 insertions(+) create mode 100644 content/static-type-checking.md diff --git a/content/static-type-checking.md b/content/static-type-checking.md new file mode 100644 index 000000000..41e4d67d8 --- /dev/null +++ b/content/static-type-checking.md @@ -0,0 +1,325 @@ +--- +id: static-type-checking +title: Статическая типизация +permalink: docs/static-type-checking.html +prev: typechecking-with-prototypes.html +next: refs-and-the-dom.html +--- + +Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать большую часть ошибок еще до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя авдодополнение и другие возможности. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. + +## Flow {#flow} + +[Flow](https://flow.org/) — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React компонентов. Ознакомиться с основами Flow можно на странице [официальной документации](https://flow.org/en/docs/getting-started/). + +Чтобы начать пользоваться возможностями Flow необходимо: + +* Установить Flow как локальную зависимость проекта. +* Убедиться, что аннотации Flow удаляются из кода при его компиляции. +* Добавить несколько аннотаций типов и запустить Flow для их проверки. + +Рассмотрим подробнее каждый из этих шагов. + +### Добавление Flow в проект {#adding-flow-to-a-project} + +Убедитесь, что вы находитесь в директории вашего проекта, после чего запустите одну из следующих команд: + +Если вы используете [Yarn](https://yarnpkg.com/): + +```bash +yarn add --dev flow-bin +``` + +Если вы используете [npm](https://www.npmjs.com/): + +```bash +npm install --save-dev flow-bin +``` + +Эти команды установят последнюю версию Flow в качестве локальной зависимости вашего проекта. + +Далее нужно добавить `flow` в раздел `"scripts"` файла `package.json`: + +```js{4} +{ + // ... + "scripts": { + "flow": "flow", + // ... + }, + // ... +} +``` + +Теперь можно запустить скрипт, прописав в терминале: + +Если вы используете [Yarn](https://yarnpkg.com/): + +```bash +yarn run flow init +``` + +Если вы используете [npm](https://www.npmjs.com/): + +```bash +npm run flow init +``` + +Эти команды создадут файл с исходной конфигурацией Flow, который обязательно нужно закоммитить. + +### Удаление аннотаций Flow из скомпилированного кода {#stripping-flow-syntax-from-the-compiled-code} + +Flow дополняет JavaScript собственным синтаксисом для указания типов, который не поддерживается браузерами. Для того, чтобы код работал, нужно убедиться в том, что аннотации Flow корректно удаляются из скомипилированного JavaScript бандла. + +В зависимости от того, какими инструментами для сборки JavaScript вы пользуетесь, для этого есть несколько способов. + +#### Create React App {#create-react-app} + +Если для изначальной конфигурации проекта вы выбрали [Create React App](https://github.com/facebookincubator/create-react-app), вам ничего не нужно делать! Проект уже настроен должным образом и аннотации Flow должны удаляться при сборке проекта. + +#### Babel {#babel} + +>Примечание: +> +>Дальнейшие инструкции рассчитаны на тех, кто *не использует* Create React App, т.к. в нем уже есть все необходимые настройки для работы с Flow. + +Если для своего проекте вы самостоятельно настраивали Babel, нужно установить специальный пресет для работы с Flow: + +```bash +yarn add --dev babel-preset-flow +``` + +Или через `npm`: + +```bash +npm install --save-dev babel-preset-flow +``` + +Затем добавьте установленный пресет `flow` в свою [конфигурацю Babel](https://babeljs.io/docs/usage/babelrc/). Например так, если вы используете конфигурационный файл `.babelrc`: + +```js{3} +{ + "presets": [ + "flow", + "react" + ] +} +``` + +Этот пресет позволит использовать Flow в вашем коде. + +>Примечание: +> +>Для работы с Flow не нужно отдельно устанавливать пресет `react` — Flow уже понимает JSX синтаксис. Тем не менее, часто используют оба пресета одновременно. + +#### Другие инструменты сборки {#other-build-setups} + +Для удаления аннотаций Flow существует отдельная библиотека: [flow-remove-types](https://github.com/flowtype/flow-remove-types). Она может пригодиться, если вы пользуетесь другими инструментами для сборки проекта. + +### Запуск Flow {#running-flow} + +Если все было сделано правильно, можно попробовать запустить процесс Flow. + +```bash +yarn flow +``` + +Или при помощи npm: + +```bash +npm run flow +``` + +Вы должны увидеть примерно такое сообщение в терминале: + +``` +No errors! +✨ Done in 0.17s. +``` + +### Добавление аннотаций типов {#adding-flow-type-annotations} + +По умолчанию Flow проверяет только файлы, содержащие специальную аннотацию (обычно ее указывают в самом начале файла): + +```js +// @flow +``` + +Попробуйте добавить эту аннотацию в некоторые файлы вашего проекта, а затем запустить скрипт `yarn flow` или `npm run flow` и посмотреть, найдет ли Flow какие-нибудь ошибки. + +Кроме того, есть [возможность](https://flow.org/en/docs/config/options/#toc-all-boolean) заставить Flow проверять вообще *все* файлы. Если вы переводите на Flow проект, в котором уже есть наработки кода — может возникнуть множество конфликтов, а вот для старта с нуля такая опция может стать неплохим выбором. + +Все должно работать! Советуем ознакомиться с этими ресурсами и познакомиться с Flow подробнее: + +* [Flow Documentation: Type Annotations](https://flow.org/en/docs/types/) +* [Flow Documentation: Editors](https://flow.org/en/docs/editors/) +* [Flow Documentation: React](https://flow.org/en/docs/react/) +* [Linting in Flow](https://medium.com/flow-type/linting-in-flow-7709d7a7e969) + +## TypeScript {#typescript} + +[TypeScript](https://www.typescriptlang.org/) is a programming language developed by Microsoft. It is a typed superset of JavaScript, and includes its own compiler. Being a typed language, TypeScript can catch errors and bugs at build time, long before your app goes live. You can learn more about using TypeScript with React [here](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). + +To use TypeScript, you need to: +* Add TypeScript as a dependency to your project +* Configure the TypeScript compiler options +* Use the right file extensions +* Add definitions for libraries you use + +Let's go over these in detail. + +### Using TypeScript with Create React App {#using-typescript-with-create-react-app} + +Create React App supports TypeScript out of the box. + +To create a **new project** with TypeScript support, run: + +```bash +npx create-react-app my-app --typescript +``` + +You can also add it to an **existing Create React App project**, [as documented here](https://facebook.github.io/create-react-app/docs/adding-typescript). + +>Note: +> +>If you use Create React App, you can **skip the rest of this page**. It describes the manual setup which doesn't apply to Create React App users. + + +### Adding TypeScript to a Project {#adding-typescript-to-a-project} +It all begins with running one command in your terminal. + +If you use [Yarn](https://yarnpkg.com/), run: + +```bash +yarn add --dev typescript +``` + +If you use [npm](https://www.npmjs.com/), run: + +```bash +npm install --save-dev typescript +``` + +Congrats! You've installed the latest version of TypeScript into your project. Installing TypeScript gives us access to the `tsc` command. Before configuration, let's add `tsc` to the "scripts" section in our `package.json`: + +```js{4} +{ + // ... + "scripts": { + "build": "tsc", + // ... + }, + // ... +} +``` + +### Configuring the TypeScript Compiler {#configuring-the-typescript-compiler} +The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file run: + +```bash +tsc --init +``` + +Looking at the now generated `tsconfig.json`, you can see that there are many options you can use to configure the compiler. For a detailed description of all the options, check [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). + +Of the many options, we'll look at `rootDir` and `outDir`. In its true fashion, the compiler will take in typescript files and generate javascript files. However we don't want to get confused with our source files and the generated output. + +We'll address this in two steps: +* Firstly, let's arrange our project structure like this. We'll place all our source code in the `src` directory. + +``` +├── package.json +├── src +│ └── index.ts +└── tsconfig.json +``` + +* Next, we'll tell the compiler where our source code is and where the output should go. + +```js{6,7} +// tsconfig.json + +{ + "compilerOptions": { + // ... + "rootDir": "src", + "outDir": "build" + // ... + }, +} +``` + +Great! Now when we run our build script the compiler will output the generated javascript to the `build` folder. The [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) provides a `tsconfig.json` with a good set of rules to get you started. + +Generally, you don't want to keep the generated javascript in your source control, so be sure to add the build folder to your `.gitignore`. + +### File extensions {#file-extensions} +In React, you most likely write your components in a `.js` file. In TypeScript we have 2 file extensions: + +`.ts` is the default file extension while `.tsx` is a special extension used for files which contain `JSX`. + +### Running TypeScript {#running-typescript} + +If you followed the instructions above, you should be able to run TypeScript for the first time. + +```bash +yarn build +``` + +If you use npm, run: + +```bash +npm run build +``` + +If you see no output, it means that it completed successfully. + + +### Type Definitions {#type-definitions} +To be able to show errors and hints from other packages, the compiler relies on declaration files. A declaration file provides all the type information about a library. This enables us to use javascript libraries like those on npm in our project. + +There are two main ways to get declarations for a library: + +__Bundled__ - The library bundles its own declaration file. This is great for us, since all we need to do is install the library, and we can use it right away. To check if a library has bundled types, look for an `index.d.ts` file in the project. Some libraries will have it specified in their `package.json` under the `typings` or `types` field. + +__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ - DefinitelyTyped is a huge repository of declarations for libraries that don't bundle a declaration file. The declarations are crowd-sourced and managed by Microsoft and open source contributors. React for example doesn't bundle its own declaration file. Instead we can get it from DefinitelyTyped. To do so enter this command in your terminal. + +```bash +# yarn +yarn add --dev @types/react + +# npm +npm i --save-dev @types/react +``` + +__Local Declarations__ +Sometimes the package that you want to use doesn't bundle declarations nor is it available on DefinitelyTyped. In that case, we can have a local declaration file. To do this, create a `declarations.d.ts` file in the root of your source directory. A simple declaration could look like this: + +```typescript +declare module 'querystring' { + export function stringify(val: object): string + export function parse(val: string): object +} +``` + +You are now ready to code! We recommend to check out the following resources to learn more about TypeScript: + +* [TypeScript Documentation: Basic Types](https://www.typescriptlang.org/docs/handbook/basic-types.html) +* [TypeScript Documentation: Migrating from Javascript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) +* [TypeScript Documentation: React and Webpack](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html) + +## Reason {#reason} + +[Reason](https://reasonml.github.io/) — это не новый язык, а новый синтаксис и набор инструментов для проверенного временем языка [OCaml](https://ocaml.org/). Reason предоставляет синтаксис, ориентированный на JavaScript программистов, и использует уже известный всем способ распространения через NPM/Yarn. + +Reason был разработан в Facebook и используется в некоторых продуктах этой компании — например, в Messenger. Reason все еще считается довольно экспериментальным инструментом, но уже имеет [библиотеку привязок для React](https://reasonml.github.io/reason-react/), поддерживаемую Facebook, а также [отзывчивое коммьюнити](https://reasonml.github.io/docs/en/community.html) + +## Kotlin {#kotlin} + +[Kotlin](https://kotlinlang.org/) это язык со статической типизацией, разработанный в JetBrains. Он нацелен на платформы работающие на основе JVM, Android, LLVM, и [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html). + +JetBrains разрабатывает и поддерживает несколько библиотек специально для React community: [React bindings](https://github.com/JetBrains/kotlin-wrappers) совместно с [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). Последняя позволит вам начать использовать Kotlin вместе с React в одном проекте без необходимости ручной конфигурации. + +## Другие языки {#other-languages} + +Помните: есть и другие языки со статической типизацией, которые могут компилироваться в JavaScript, а значит — совместимы с React. Например, [F#/Fable](http://fable.io) вместе с [elmish-react](https://elmish.github.io/react). Для подробной информации - переходите на соответствующие сайты и не стесняйтесь предлагать больше React-совместимых статически типизированных языков в этот раздел! From 5e88a073d0394e73cf3399bc954460b93d53e643 Mon Sep 17 00:00:00 2001 From: acilsd Date: Mon, 18 Feb 2019 04:01:43 +0300 Subject: [PATCH 08/37] Translate ts installation plus some formattin --- content/docs/static-type-checking.md | 63 ++++++++++++++-------------- 1 file changed, 31 insertions(+), 32 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 41e4d67d8..454fa0c5b 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -53,13 +53,11 @@ npm install --save-dev flow-bin Теперь можно запустить скрипт, прописав в терминале: -Если вы используете [Yarn](https://yarnpkg.com/): - ```bash yarn run flow init ``` -Если вы используете [npm](https://www.npmjs.com/): +Или `npm`: ```bash npm run flow init @@ -89,7 +87,7 @@ Flow дополняет JavaScript собственным синтаксисом yarn add --dev babel-preset-flow ``` -Или через `npm`: +Или `npm`: ```bash npm install --save-dev babel-preset-flow @@ -118,13 +116,13 @@ npm install --save-dev babel-preset-flow ### Запуск Flow {#running-flow} -Если все было сделано правильно, можно попробовать запустить процесс Flow. +Если все было сделано правильно, можно попробовать запустить процесс Flow: ```bash yarn flow ``` -Или при помощи npm: +Или `npm`: ```bash npm run flow @@ -158,49 +156,47 @@ No errors! ## TypeScript {#typescript} -[TypeScript](https://www.typescriptlang.org/) is a programming language developed by Microsoft. It is a typed superset of JavaScript, and includes its own compiler. Being a typed language, TypeScript can catch errors and bugs at build time, long before your app goes live. You can learn more about using TypeScript with React [here](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). +[TypeScript](https://www.typescriptlang.org/) — это язык программирования, разработанный в Microsoft. TypeScript является надмножеством JavaScript, имеет статическую систему типов и собственный компилятор. Статическая типизация позволяет отлавливать ошибки и баги во время компиляции, еще до запуска приложения. Подробнее узнать о совместном использовании TypeScript и React можно [здесь](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). -To use TypeScript, you need to: -* Add TypeScript as a dependency to your project -* Configure the TypeScript compiler options -* Use the right file extensions -* Add definitions for libraries you use +Чтобы использовать TypeScript, нужно: +* Установить TypeScript как локальную зависимость проекта. +* Настроить компилятор. +* Использовать правильные расширения файлов. +* Установить файлы определений для используемых библиотек. -Let's go over these in detail. +Остановимся подробнее на каждом из этих моментов. -### Using TypeScript with Create React App {#using-typescript-with-create-react-app} +### Использование TypeScript вместе с Create React App {#using-typescript-with-create-react-app} -Create React App supports TypeScript out of the box. +Create React App поддерживает TypeScript по умолчанию. -To create a **new project** with TypeScript support, run: +Чтобы создать **новый проект** с поддержкой TypeScript, используйте следующую команду: ```bash npx create-react-app my-app --typescript ``` -You can also add it to an **existing Create React App project**, [as documented here](https://facebook.github.io/create-react-app/docs/adding-typescript). +Можно добавить поддержку TypeScript в **уже существующий проект**, [как показано здесь](https://facebook.github.io/create-react-app/docs/adding-typescript). ->Note: +>Примечание: > ->If you use Create React App, you can **skip the rest of this page**. It describes the manual setup which doesn't apply to Create React App users. +>Дальше описывается ручная настройка TypeScript. Если вы используете Create React App — можете **пропустить этот раздел**. +### Добавление TypeScript в проект {#adding-typescript-to-a-project} -### Adding TypeScript to a Project {#adding-typescript-to-a-project} -It all begins with running one command in your terminal. - -If you use [Yarn](https://yarnpkg.com/), run: +Все начинается с одной единственной команды в терминале: ```bash yarn add --dev typescript ``` -If you use [npm](https://www.npmjs.com/), run: +Или `npm`: ```bash npm install --save-dev typescript ``` -Congrats! You've installed the latest version of TypeScript into your project. Installing TypeScript gives us access to the `tsc` command. Before configuration, let's add `tsc` to the "scripts" section in our `package.json`: +Ура! Вы установили последнюю версию TypeScript. Теперь в вашем распоряжении новая команда — `tsc`. Но прежде, чем праздновать, давайте добавим соответствующий скрипт в наш `package.json`: ```js{4} { @@ -213,14 +209,17 @@ Congrats! You've installed the latest version of TypeScript into your project. I } ``` -### Configuring the TypeScript Compiler {#configuring-the-typescript-compiler} -The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file run: +### Настройка компилятора TypeScript {#configuring-the-typescript-compiler} + +Сам по себе компилятор бесполезен, пока мы не скажем, что именно ему нужно делать. Для этого есть специальный файл `tsconfig.json`, в котором нужно указать необходимые опции. Создадим этот файл: ```bash tsc --init ``` -Looking at the now generated `tsconfig.json`, you can see that there are many options you can use to configure the compiler. For a detailed description of all the options, check [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). +[здесь](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) + +Looking at the now generated `tsconfig.json`, you can see that there are many options you can use to configure the compiler. For a detailed description of all the options, check . Of the many options, we'll look at `rootDir` and `outDir`. In its true fashion, the compiler will take in typescript files and generate javascript files. However we don't want to get confused with our source files and the generated output. @@ -282,7 +281,7 @@ There are two main ways to get declarations for a library: __Bundled__ - The library bundles its own declaration file. This is great for us, since all we need to do is install the library, and we can use it right away. To check if a library has bundled types, look for an `index.d.ts` file in the project. Some libraries will have it specified in their `package.json` under the `typings` or `types` field. -__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ - DefinitelyTyped is a huge repository of declarations for libraries that don't bundle a declaration file. The declarations are crowd-sourced and managed by Microsoft and open source contributors. React for example doesn't bundle its own declaration file. Instead we can get it from DefinitelyTyped. To do so enter this command in your terminal. +__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ — это внушительный репозиторий файлов объявлений для библиотек без собственного файла объявлений. Например, React устанавливается без собственного файла объявления — вместо этого мы устанавливаем его отдельно: ```bash # yarn @@ -292,8 +291,8 @@ yarn add --dev @types/react npm i --save-dev @types/react ``` -__Local Declarations__ -Sometimes the package that you want to use doesn't bundle declarations nor is it available on DefinitelyTyped. In that case, we can have a local declaration file. To do this, create a `declarations.d.ts` file in the root of your source directory. A simple declaration could look like this: +__Локальные объявления__ +Иногда пакет, который вы хотите использовать, не имеет ни собственного файла объявлений, ни соответствующего файла в репозитории DefinitelyTyped. В этом случае, мы можем объявить собственный локальный файл объявлений. Для этого создайте файл `declarations.d.ts` в корне директории, где лежат исходники вашего проекта. Файл деклараций может выглядеть примерно вот так: ```typescript declare module 'querystring' { @@ -302,7 +301,7 @@ declare module 'querystring' { } ``` -You are now ready to code! We recommend to check out the following resources to learn more about TypeScript: +Вот и все, вы готовы писать код на TypeScript! Чтобы познакомиться с ним поближе, рекомендуем посетить эти ресурсы: * [TypeScript Documentation: Basic Types](https://www.typescriptlang.org/docs/handbook/basic-types.html) * [TypeScript Documentation: Migrating from Javascript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) From 7482c02414a3e87eb45aca6d90fc29f25c91535e Mon Sep 17 00:00:00 2001 From: acilsd Date: Mon, 18 Feb 2019 21:36:09 +0300 Subject: [PATCH 09/37] Finish translation --- content/docs/static-type-checking.md | 53 ++++++++++++++-------------- 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 454fa0c5b..e0628216b 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -67,9 +67,9 @@ npm run flow init ### Удаление аннотаций Flow из скомпилированного кода {#stripping-flow-syntax-from-the-compiled-code} -Flow дополняет JavaScript собственным синтаксисом для указания типов, который не поддерживается браузерами. Для того, чтобы код работал, нужно убедиться в том, что аннотации Flow корректно удаляются из скомипилированного JavaScript бандла. +Flow дополняет JavaScript собственным синтаксисом для указания типов, который не поддерживается браузерами. Для того, чтобы код работал, нужно убедиться в том, что аннотации Flow корректно удаляются из скомипилированного JavaScript. -В зависимости от того, какими инструментами для сборки JavaScript вы пользуетесь, для этого есть несколько способов. +Для этого есть несколько способов — выбирайте в зависимости от того, какими инструментами для сборки проекта вы пользуетесь. #### Create React App {#create-react-app} @@ -79,9 +79,9 @@ Flow дополняет JavaScript собственным синтаксисом >Примечание: > ->Дальнейшие инструкции рассчитаны на тех, кто *не использует* Create React App, т.к. в нем уже есть все необходимые настройки для работы с Flow. +>Дальнейшие инструкции рассчитаны на тех, кто *не использует* Create React App, т.к. там уже есть все необходимые настройки для работы с Flow. -Если для своего проекте вы самостоятельно настраивали Babel, нужно установить специальный пресет для работы с Flow: +Если для своего проекта вы самостоятельно настраивали Babel, нужно установить специальный пресет для работы с Flow: ```bash yarn add --dev babel-preset-flow @@ -196,7 +196,7 @@ yarn add --dev typescript npm install --save-dev typescript ``` -Ура! Вы установили последнюю версию TypeScript. Теперь в вашем распоряжении новая команда — `tsc`. Но прежде, чем праздновать, давайте добавим соответствующий скрипт в наш `package.json`: +Ура! Вы установили последнюю версию TypeScript. Теперь в вашем распоряжении новая команда — `tsc`. Но прежде, чем праздновать, давайте добавим соответствующий скрипт в файл `package.json`: ```js{4} { @@ -211,20 +211,18 @@ npm install --save-dev typescript ### Настройка компилятора TypeScript {#configuring-the-typescript-compiler} -Сам по себе компилятор бесполезен, пока мы не скажем, что именно ему нужно делать. Для этого есть специальный файл `tsconfig.json`, в котором нужно указать необходимые опции. Создадим этот файл: +Сам по себе компилятор бесполезен, пока мы не скажем, что именно ему нужно делать. Для этого есть специальный конфигурационный файл `tsconfig.json`. Создадим этот файл: ```bash tsc --init ``` -[здесь](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) +Сгенерированный файл `tsconfig.json` уже содержит несколько параметров, которые используются компилятором по умолчанию. Кроме того, можно указать множество опциональных параметров. Более детальная информация по каждому параметру находится [здесь](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) -Looking at the now generated `tsconfig.json`, you can see that there are many options you can use to configure the compiler. For a detailed description of all the options, check . +Из всех параметров больше всего сейчас нас интересуют `rootDir` и `outDir`. Очевидно, что компилятор берет исходный TypeScript код, и компилирует его в JavaScript. И нам не нужно, чтобы возникла путаница между исходными файлами и сгенерированным кодом. -Of the many options, we'll look at `rootDir` and `outDir`. In its true fashion, the compiler will take in typescript files and generate javascript files. However we don't want to get confused with our source files and the generated output. - -We'll address this in two steps: -* Firstly, let's arrange our project structure like this. We'll place all our source code in the `src` directory. +Эту проблему можно решить в два шага: +* Во-первых, изменим структуру проекта. Все файлы с исходниками переместим в директорию `src`. ``` ├── package.json @@ -233,7 +231,7 @@ We'll address this in two steps: └── tsconfig.json ``` -* Next, we'll tell the compiler where our source code is and where the output should go. +* Затем, укажем компилятору откуда ему брать исходные файлы и куда сохранять скомпилированный код. ```js{6,7} // tsconfig.json @@ -248,38 +246,39 @@ We'll address this in two steps: } ``` -Great! Now when we run our build script the compiler will output the generated javascript to the `build` folder. The [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) provides a `tsconfig.json` with a good set of rules to get you started. +Отлично! Теперь, если мы запустим скрипт сборки проекта, компилятор сохранит готовый JavaScript в директорию `build`. В [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) уже есть готовый `tsconfig.json` с неплохим набором параметров для дальнейшей тонкой настройки под себя. + +Как правило, скомпилированный JavaScript бандл не следует хранить в системе контроля версий, так что не забудьте добавить папку `build` в файл `.gitignore`. -Generally, you don't want to keep the generated javascript in your source control, so be sure to add the build folder to your `.gitignore`. +### Расширения файлов {#file-extensions} -### File extensions {#file-extensions} -In React, you most likely write your components in a `.js` file. In TypeScript we have 2 file extensions: +В React мы почти всегда используем `.js` в качестве расширений файлов компонентов. В TypeScript лучше разделать файлы на два типа: -`.ts` is the default file extension while `.tsx` is a special extension used for files which contain `JSX`. +`.tsx` для файлов, содержащих `JSX` разметку, и `.ts` для всего остального. -### Running TypeScript {#running-typescript} +### Запуск TypeScript {#running-typescript} -If you followed the instructions above, you should be able to run TypeScript for the first time. +Если все было сделано правильно, можно попробовать скомпилировать TypeScript: ```bash yarn build ``` -If you use npm, run: +Или `npm`: ```bash npm run build ``` -If you see no output, it means that it completed successfully. +Если после этой команды в терминале ничего нет — процесс компиляции прошел успешно. +### Определения типов {#type-definitions} -### Type Definitions {#type-definitions} -To be able to show errors and hints from other packages, the compiler relies on declaration files. A declaration file provides all the type information about a library. This enables us to use javascript libraries like those on npm in our project. +Для анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы определений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. Это, в свою очередь, позволяет нам использовать JavaScript библиотеки в проекте совместно с TypeScript. -There are two main ways to get declarations for a library: +Существует два основных способа получения файлов определений: -__Bundled__ - The library bundles its own declaration file. This is great for us, since all we need to do is install the library, and we can use it right away. To check if a library has bundled types, look for an `index.d.ts` file in the project. Some libraries will have it specified in their `package.json` under the `typings` or `types` field. +__Bundled__ — Библиотека устанавливается вместе с собственным файлом определений. Это прекрасный вариант для нас, так как все, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл определений, поищите `index.d.ts` в ее исходных файлах. В некоторых библиотеках этот файл указывается в `package.json` в секциях `typings` или `types`. __[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ — это внушительный репозиторий файлов объявлений для библиотек без собственного файла объявлений. Например, React устанавливается без собственного файла объявления — вместо этого мы устанавливаем его отдельно: @@ -292,7 +291,7 @@ npm i --save-dev @types/react ``` __Локальные объявления__ -Иногда пакет, который вы хотите использовать, не имеет ни собственного файла объявлений, ни соответствующего файла в репозитории DefinitelyTyped. В этом случае, мы можем объявить собственный локальный файл объявлений. Для этого создайте файл `declarations.d.ts` в корне директории, где лежат исходники вашего проекта. Файл деклараций может выглядеть примерно вот так: +Иногда пакет, который вы хотите использовать, не имеет ни собственного файла объявлений, ни соответствующего файла в репозитории DefinitelyTyped. В этом случае, мы можем объявить собственный локальный файл объявлений. Для этого надо создать файл `declarations.d.ts` в корне директории, где лежат исходники вашего проекта. Файл деклараций может выглядеть примерно так: ```typescript declare module 'querystring' { From 895f7e09d29c4e0c6e4414e24ad7dfdbc0bd3009 Mon Sep 17 00:00:00 2001 From: acilsd Date: Mon, 18 Feb 2019 21:41:14 +0300 Subject: [PATCH 10/37] Some grammar fixes --- content/docs/static-type-checking.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index e0628216b..0e621dad7 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -6,7 +6,7 @@ prev: typechecking-with-prototypes.html next: refs-and-the-dom.html --- -Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать большую часть ошибок еще до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя авдодополнение и другие возможности. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. +Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать большую часть ошибок еще до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя автодополнение и другие возможности. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. ## Flow {#flow} @@ -22,7 +22,7 @@ next: refs-and-the-dom.html ### Добавление Flow в проект {#adding-flow-to-a-project} -Убедитесь, что вы находитесь в директории вашего проекта, после чего запустите одну из следующих команд: +Убедитесь, что вы находитесь в директории проекта, после чего запустите одну из следующих команд: Если вы используете [Yarn](https://yarnpkg.com/): @@ -67,7 +67,7 @@ npm run flow init ### Удаление аннотаций Flow из скомпилированного кода {#stripping-flow-syntax-from-the-compiled-code} -Flow дополняет JavaScript собственным синтаксисом для указания типов, который не поддерживается браузерами. Для того, чтобы код работал, нужно убедиться в том, что аннотации Flow корректно удаляются из скомипилированного JavaScript. +Flow дополняет JavaScript собственным синтаксисом для указания типов, который не поддерживается браузерами. Для того, чтобы код работал, нужно убедиться в том, что аннотации Flow корректно удаляются из скомпилированного JavaScript. Для этого есть несколько способов — выбирайте в зависимости от того, какими инструментами для сборки проекта вы пользуетесь. @@ -278,7 +278,7 @@ npm run build Существует два основных способа получения файлов определений: -__Bundled__ — Библиотека устанавливается вместе с собственным файлом определений. Это прекрасный вариант для нас, так как все, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл определений, поищите `index.d.ts` в ее исходных файлах. В некоторых библиотеках этот файл указывается в `package.json` в секциях `typings` или `types`. +__Bundled__ — Библиотека устанавливается вместе с собственным файлом определений. Это прекрасный вариант для нас, так как все, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл определений, поищите `index.d.ts` в ее исходных файлах. В некоторых библиотеках наличие и расположение этого файла указываются в `package.json` в секциях `typings` или `types`. __[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ — это внушительный репозиторий файлов объявлений для библиотек без собственного файла объявлений. Например, React устанавливается без собственного файла объявления — вместо этого мы устанавливаем его отдельно: From ed4ccd1e9961625dd15592554b2497c2b2d39945 Mon Sep 17 00:00:00 2001 From: acilsd Date: Tue, 19 Feb 2019 17:21:56 +0300 Subject: [PATCH 11/37] Delete unmet duplicate --- content/static-type-checking.md | 325 -------------------------------- 1 file changed, 325 deletions(-) delete mode 100644 content/static-type-checking.md diff --git a/content/static-type-checking.md b/content/static-type-checking.md deleted file mode 100644 index 41e4d67d8..000000000 --- a/content/static-type-checking.md +++ /dev/null @@ -1,325 +0,0 @@ ---- -id: static-type-checking -title: Статическая типизация -permalink: docs/static-type-checking.html -prev: typechecking-with-prototypes.html -next: refs-and-the-dom.html ---- - -Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать большую часть ошибок еще до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя авдодополнение и другие возможности. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. - -## Flow {#flow} - -[Flow](https://flow.org/) — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React компонентов. Ознакомиться с основами Flow можно на странице [официальной документации](https://flow.org/en/docs/getting-started/). - -Чтобы начать пользоваться возможностями Flow необходимо: - -* Установить Flow как локальную зависимость проекта. -* Убедиться, что аннотации Flow удаляются из кода при его компиляции. -* Добавить несколько аннотаций типов и запустить Flow для их проверки. - -Рассмотрим подробнее каждый из этих шагов. - -### Добавление Flow в проект {#adding-flow-to-a-project} - -Убедитесь, что вы находитесь в директории вашего проекта, после чего запустите одну из следующих команд: - -Если вы используете [Yarn](https://yarnpkg.com/): - -```bash -yarn add --dev flow-bin -``` - -Если вы используете [npm](https://www.npmjs.com/): - -```bash -npm install --save-dev flow-bin -``` - -Эти команды установят последнюю версию Flow в качестве локальной зависимости вашего проекта. - -Далее нужно добавить `flow` в раздел `"scripts"` файла `package.json`: - -```js{4} -{ - // ... - "scripts": { - "flow": "flow", - // ... - }, - // ... -} -``` - -Теперь можно запустить скрипт, прописав в терминале: - -Если вы используете [Yarn](https://yarnpkg.com/): - -```bash -yarn run flow init -``` - -Если вы используете [npm](https://www.npmjs.com/): - -```bash -npm run flow init -``` - -Эти команды создадут файл с исходной конфигурацией Flow, который обязательно нужно закоммитить. - -### Удаление аннотаций Flow из скомпилированного кода {#stripping-flow-syntax-from-the-compiled-code} - -Flow дополняет JavaScript собственным синтаксисом для указания типов, который не поддерживается браузерами. Для того, чтобы код работал, нужно убедиться в том, что аннотации Flow корректно удаляются из скомипилированного JavaScript бандла. - -В зависимости от того, какими инструментами для сборки JavaScript вы пользуетесь, для этого есть несколько способов. - -#### Create React App {#create-react-app} - -Если для изначальной конфигурации проекта вы выбрали [Create React App](https://github.com/facebookincubator/create-react-app), вам ничего не нужно делать! Проект уже настроен должным образом и аннотации Flow должны удаляться при сборке проекта. - -#### Babel {#babel} - ->Примечание: -> ->Дальнейшие инструкции рассчитаны на тех, кто *не использует* Create React App, т.к. в нем уже есть все необходимые настройки для работы с Flow. - -Если для своего проекте вы самостоятельно настраивали Babel, нужно установить специальный пресет для работы с Flow: - -```bash -yarn add --dev babel-preset-flow -``` - -Или через `npm`: - -```bash -npm install --save-dev babel-preset-flow -``` - -Затем добавьте установленный пресет `flow` в свою [конфигурацю Babel](https://babeljs.io/docs/usage/babelrc/). Например так, если вы используете конфигурационный файл `.babelrc`: - -```js{3} -{ - "presets": [ - "flow", - "react" - ] -} -``` - -Этот пресет позволит использовать Flow в вашем коде. - ->Примечание: -> ->Для работы с Flow не нужно отдельно устанавливать пресет `react` — Flow уже понимает JSX синтаксис. Тем не менее, часто используют оба пресета одновременно. - -#### Другие инструменты сборки {#other-build-setups} - -Для удаления аннотаций Flow существует отдельная библиотека: [flow-remove-types](https://github.com/flowtype/flow-remove-types). Она может пригодиться, если вы пользуетесь другими инструментами для сборки проекта. - -### Запуск Flow {#running-flow} - -Если все было сделано правильно, можно попробовать запустить процесс Flow. - -```bash -yarn flow -``` - -Или при помощи npm: - -```bash -npm run flow -``` - -Вы должны увидеть примерно такое сообщение в терминале: - -``` -No errors! -✨ Done in 0.17s. -``` - -### Добавление аннотаций типов {#adding-flow-type-annotations} - -По умолчанию Flow проверяет только файлы, содержащие специальную аннотацию (обычно ее указывают в самом начале файла): - -```js -// @flow -``` - -Попробуйте добавить эту аннотацию в некоторые файлы вашего проекта, а затем запустить скрипт `yarn flow` или `npm run flow` и посмотреть, найдет ли Flow какие-нибудь ошибки. - -Кроме того, есть [возможность](https://flow.org/en/docs/config/options/#toc-all-boolean) заставить Flow проверять вообще *все* файлы. Если вы переводите на Flow проект, в котором уже есть наработки кода — может возникнуть множество конфликтов, а вот для старта с нуля такая опция может стать неплохим выбором. - -Все должно работать! Советуем ознакомиться с этими ресурсами и познакомиться с Flow подробнее: - -* [Flow Documentation: Type Annotations](https://flow.org/en/docs/types/) -* [Flow Documentation: Editors](https://flow.org/en/docs/editors/) -* [Flow Documentation: React](https://flow.org/en/docs/react/) -* [Linting in Flow](https://medium.com/flow-type/linting-in-flow-7709d7a7e969) - -## TypeScript {#typescript} - -[TypeScript](https://www.typescriptlang.org/) is a programming language developed by Microsoft. It is a typed superset of JavaScript, and includes its own compiler. Being a typed language, TypeScript can catch errors and bugs at build time, long before your app goes live. You can learn more about using TypeScript with React [here](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). - -To use TypeScript, you need to: -* Add TypeScript as a dependency to your project -* Configure the TypeScript compiler options -* Use the right file extensions -* Add definitions for libraries you use - -Let's go over these in detail. - -### Using TypeScript with Create React App {#using-typescript-with-create-react-app} - -Create React App supports TypeScript out of the box. - -To create a **new project** with TypeScript support, run: - -```bash -npx create-react-app my-app --typescript -``` - -You can also add it to an **existing Create React App project**, [as documented here](https://facebook.github.io/create-react-app/docs/adding-typescript). - ->Note: -> ->If you use Create React App, you can **skip the rest of this page**. It describes the manual setup which doesn't apply to Create React App users. - - -### Adding TypeScript to a Project {#adding-typescript-to-a-project} -It all begins with running one command in your terminal. - -If you use [Yarn](https://yarnpkg.com/), run: - -```bash -yarn add --dev typescript -``` - -If you use [npm](https://www.npmjs.com/), run: - -```bash -npm install --save-dev typescript -``` - -Congrats! You've installed the latest version of TypeScript into your project. Installing TypeScript gives us access to the `tsc` command. Before configuration, let's add `tsc` to the "scripts" section in our `package.json`: - -```js{4} -{ - // ... - "scripts": { - "build": "tsc", - // ... - }, - // ... -} -``` - -### Configuring the TypeScript Compiler {#configuring-the-typescript-compiler} -The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file run: - -```bash -tsc --init -``` - -Looking at the now generated `tsconfig.json`, you can see that there are many options you can use to configure the compiler. For a detailed description of all the options, check [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). - -Of the many options, we'll look at `rootDir` and `outDir`. In its true fashion, the compiler will take in typescript files and generate javascript files. However we don't want to get confused with our source files and the generated output. - -We'll address this in two steps: -* Firstly, let's arrange our project structure like this. We'll place all our source code in the `src` directory. - -``` -├── package.json -├── src -│ └── index.ts -└── tsconfig.json -``` - -* Next, we'll tell the compiler where our source code is and where the output should go. - -```js{6,7} -// tsconfig.json - -{ - "compilerOptions": { - // ... - "rootDir": "src", - "outDir": "build" - // ... - }, -} -``` - -Great! Now when we run our build script the compiler will output the generated javascript to the `build` folder. The [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) provides a `tsconfig.json` with a good set of rules to get you started. - -Generally, you don't want to keep the generated javascript in your source control, so be sure to add the build folder to your `.gitignore`. - -### File extensions {#file-extensions} -In React, you most likely write your components in a `.js` file. In TypeScript we have 2 file extensions: - -`.ts` is the default file extension while `.tsx` is a special extension used for files which contain `JSX`. - -### Running TypeScript {#running-typescript} - -If you followed the instructions above, you should be able to run TypeScript for the first time. - -```bash -yarn build -``` - -If you use npm, run: - -```bash -npm run build -``` - -If you see no output, it means that it completed successfully. - - -### Type Definitions {#type-definitions} -To be able to show errors and hints from other packages, the compiler relies on declaration files. A declaration file provides all the type information about a library. This enables us to use javascript libraries like those on npm in our project. - -There are two main ways to get declarations for a library: - -__Bundled__ - The library bundles its own declaration file. This is great for us, since all we need to do is install the library, and we can use it right away. To check if a library has bundled types, look for an `index.d.ts` file in the project. Some libraries will have it specified in their `package.json` under the `typings` or `types` field. - -__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ - DefinitelyTyped is a huge repository of declarations for libraries that don't bundle a declaration file. The declarations are crowd-sourced and managed by Microsoft and open source contributors. React for example doesn't bundle its own declaration file. Instead we can get it from DefinitelyTyped. To do so enter this command in your terminal. - -```bash -# yarn -yarn add --dev @types/react - -# npm -npm i --save-dev @types/react -``` - -__Local Declarations__ -Sometimes the package that you want to use doesn't bundle declarations nor is it available on DefinitelyTyped. In that case, we can have a local declaration file. To do this, create a `declarations.d.ts` file in the root of your source directory. A simple declaration could look like this: - -```typescript -declare module 'querystring' { - export function stringify(val: object): string - export function parse(val: string): object -} -``` - -You are now ready to code! We recommend to check out the following resources to learn more about TypeScript: - -* [TypeScript Documentation: Basic Types](https://www.typescriptlang.org/docs/handbook/basic-types.html) -* [TypeScript Documentation: Migrating from Javascript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) -* [TypeScript Documentation: React and Webpack](https://www.typescriptlang.org/docs/handbook/react-&-webpack.html) - -## Reason {#reason} - -[Reason](https://reasonml.github.io/) — это не новый язык, а новый синтаксис и набор инструментов для проверенного временем языка [OCaml](https://ocaml.org/). Reason предоставляет синтаксис, ориентированный на JavaScript программистов, и использует уже известный всем способ распространения через NPM/Yarn. - -Reason был разработан в Facebook и используется в некоторых продуктах этой компании — например, в Messenger. Reason все еще считается довольно экспериментальным инструментом, но уже имеет [библиотеку привязок для React](https://reasonml.github.io/reason-react/), поддерживаемую Facebook, а также [отзывчивое коммьюнити](https://reasonml.github.io/docs/en/community.html) - -## Kotlin {#kotlin} - -[Kotlin](https://kotlinlang.org/) это язык со статической типизацией, разработанный в JetBrains. Он нацелен на платформы работающие на основе JVM, Android, LLVM, и [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html). - -JetBrains разрабатывает и поддерживает несколько библиотек специально для React community: [React bindings](https://github.com/JetBrains/kotlin-wrappers) совместно с [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). Последняя позволит вам начать использовать Kotlin вместе с React в одном проекте без необходимости ручной конфигурации. - -## Другие языки {#other-languages} - -Помните: есть и другие языки со статической типизацией, которые могут компилироваться в JavaScript, а значит — совместимы с React. Например, [F#/Fable](http://fable.io) вместе с [elmish-react](https://elmish.github.io/react). Для подробной информации - переходите на соответствующие сайты и не стесняйтесь предлагать больше React-совместимых статически типизированных языков в этот раздел! From fd39124009e8bbae2ac663c499a47e5fac7a5a4f Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:42:30 +0300 Subject: [PATCH 12/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 0e621dad7..9c0b1323b 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -6,7 +6,7 @@ prev: typechecking-with-prototypes.html next: refs-and-the-dom.html --- -Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать большую часть ошибок еще до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя автодополнение и другие возможности. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. +Инструменты для статической типизации, такие как [Flow](https://flow.org/) или [TypeScript](https://www.typescriptlang.org/), позволяют отлавливать большую часть ошибок ещё до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя автодополнение и другие возможности. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо `PropTypes`. ## Flow {#flow} From 99debe60440dd107665a56361a228a02213a16b0 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:43:07 +0300 Subject: [PATCH 13/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 9c0b1323b..fc6d8b293 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -116,7 +116,7 @@ npm install --save-dev babel-preset-flow ### Запуск Flow {#running-flow} -Если все было сделано правильно, можно попробовать запустить процесс Flow: +Если всё было сделано правильно, можно попробовать запустить процесс Flow: ```bash yarn flow From b21f9e302a57c84494dd0da0f759844f2bfc3517 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:43:17 +0300 Subject: [PATCH 14/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index fc6d8b293..302be8332 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -137,7 +137,7 @@ No errors! ### Добавление аннотаций типов {#adding-flow-type-annotations} -По умолчанию Flow проверяет только файлы, содержащие специальную аннотацию (обычно ее указывают в самом начале файла): +По умолчанию Flow проверяет только файлы, содержащие специальную аннотацию (обычно её указывают в самом начале файла): ```js // @flow From b5f3343149278a923cb63a745ff03b61cae2a141 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:43:26 +0300 Subject: [PATCH 15/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 302be8332..4be097df3 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -143,7 +143,7 @@ No errors! // @flow ``` -Попробуйте добавить эту аннотацию в некоторые файлы вашего проекта, а затем запустить скрипт `yarn flow` или `npm run flow` и посмотреть, найдет ли Flow какие-нибудь ошибки. +Попробуйте добавить эту аннотацию в некоторые файлы вашего проекта, а затем запустить скрипт `yarn flow` или `npm run flow` и посмотреть, найдёт ли Flow какие-нибудь ошибки. Кроме того, есть [возможность](https://flow.org/en/docs/config/options/#toc-all-boolean) заставить Flow проверять вообще *все* файлы. Если вы переводите на Flow проект, в котором уже есть наработки кода — может возникнуть множество конфликтов, а вот для старта с нуля такая опция может стать неплохим выбором. From 164a19867d52b44bb4cd7dcd2e5189cd4d5abba8 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:43:39 +0300 Subject: [PATCH 16/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 4be097df3..553f98a7d 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -156,7 +156,7 @@ No errors! ## TypeScript {#typescript} -[TypeScript](https://www.typescriptlang.org/) — это язык программирования, разработанный в Microsoft. TypeScript является надмножеством JavaScript, имеет статическую систему типов и собственный компилятор. Статическая типизация позволяет отлавливать ошибки и баги во время компиляции, еще до запуска приложения. Подробнее узнать о совместном использовании TypeScript и React можно [здесь](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). +[TypeScript](https://www.typescriptlang.org/) — это язык программирования, разработанный в Microsoft. TypeScript является надмножеством JavaScript, имеет статическую систему типов и собственный компилятор. Статическая типизация позволяет отлавливать ошибки и баги во время компиляции, ещё до запуска приложения. Подробнее узнать о совместном использовании TypeScript и React можно [здесь](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). Чтобы использовать TypeScript, нужно: * Установить TypeScript как локальную зависимость проекта. From d9596f15cc24386a59a4affa8c7b09bc90d9a51f Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:43:51 +0300 Subject: [PATCH 17/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 553f98a7d..109c95024 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -184,7 +184,7 @@ npx create-react-app my-app --typescript ### Добавление TypeScript в проект {#adding-typescript-to-a-project} -Все начинается с одной единственной команды в терминале: +Всё начинается с одной единственной команды в терминале: ```bash yarn add --dev typescript From e4020400fee6fb809b781ee4cafba538eeda79ac Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:44:09 +0300 Subject: [PATCH 18/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 109c95024..4d831c529 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -219,7 +219,7 @@ tsc --init Сгенерированный файл `tsconfig.json` уже содержит несколько параметров, которые используются компилятором по умолчанию. Кроме того, можно указать множество опциональных параметров. Более детальная информация по каждому параметру находится [здесь](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) -Из всех параметров больше всего сейчас нас интересуют `rootDir` и `outDir`. Очевидно, что компилятор берет исходный TypeScript код, и компилирует его в JavaScript. И нам не нужно, чтобы возникла путаница между исходными файлами и сгенерированным кодом. +Из всех параметров больше всего сейчас нас интересуют `rootDir` и `outDir`. Очевидно, что компилятор берёт исходный TypeScript код, и компилирует его в JavaScript. И нам не нужно, чтобы возникла путаница между исходными файлами и сгенерированным кодом. Эту проблему можно решить в два шага: * Во-первых, изменим структуру проекта. Все файлы с исходниками переместим в директорию `src`. From 8027eeb80519a59ed8dfafd32dfb75303d5ba125 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:44:25 +0300 Subject: [PATCH 19/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 4d831c529..1093e2c62 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -278,7 +278,7 @@ npm run build Существует два основных способа получения файлов определений: -__Bundled__ — Библиотека устанавливается вместе с собственным файлом определений. Это прекрасный вариант для нас, так как все, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл определений, поищите `index.d.ts` в ее исходных файлах. В некоторых библиотеках наличие и расположение этого файла указываются в `package.json` в секциях `typings` или `types`. +__Bundled__ — Библиотека устанавливается вместе с собственным файлом определений. Это прекрасный вариант для нас, так как всё, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл определений, поищите `index.d.ts` в её исходных файлах. В некоторых библиотеках наличие и расположение этого файла указываются в `package.json` в секциях `typings` или `types`. __[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ — это внушительный репозиторий файлов объявлений для библиотек без собственного файла объявлений. Например, React устанавливается без собственного файла объявления — вместо этого мы устанавливаем его отдельно: From 55a89a68eac504cd53d7d631b5b6442bd5c553ab Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:44:33 +0300 Subject: [PATCH 20/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 1093e2c62..7ad9624a6 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -300,7 +300,7 @@ declare module 'querystring' { } ``` -Вот и все, вы готовы писать код на TypeScript! Чтобы познакомиться с ним поближе, рекомендуем посетить эти ресурсы: +Вот и всё, вы готовы писать код на TypeScript! Чтобы познакомиться с ним поближе, рекомендуем посетить эти ресурсы: * [TypeScript Documentation: Basic Types](https://www.typescriptlang.org/docs/handbook/basic-types.html) * [TypeScript Documentation: Migrating from Javascript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) From 65910f04fb10da45317d3bde0a69983d357bde75 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:44:48 +0300 Subject: [PATCH 21/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 7ad9624a6..1169df8a7 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -310,7 +310,7 @@ declare module 'querystring' { [Reason](https://reasonml.github.io/) — это не новый язык, а новый синтаксис и набор инструментов для проверенного временем языка [OCaml](https://ocaml.org/). Reason предоставляет синтаксис, ориентированный на JavaScript программистов, и использует уже известный всем способ распространения через NPM/Yarn. -Reason был разработан в Facebook и используется в некоторых продуктах этой компании — например, в Messenger. Reason все еще считается довольно экспериментальным инструментом, но уже имеет [библиотеку привязок для React](https://reasonml.github.io/reason-react/), поддерживаемую Facebook, а также [отзывчивое коммьюнити](https://reasonml.github.io/docs/en/community.html) +Reason был разработан в Facebook и используется в некоторых продуктах этой компании — например, в Messenger. Reason всё ещё считается довольно экспериментальным инструментом, но уже имеет [библиотеку привязок для React](https://reasonml.github.io/reason-react/), поддерживаемую Facebook, а также [отзывчивое сообщество](https://reasonml.github.io/docs/en/community.html) ## Kotlin {#kotlin} From 18df6ec175091dfc052b19203b57942588a56775 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:44:59 +0300 Subject: [PATCH 22/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 1169df8a7..ad0868a37 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -314,7 +314,7 @@ Reason был разработан в Facebook и используется в н ## Kotlin {#kotlin} -[Kotlin](https://kotlinlang.org/) это язык со статической типизацией, разработанный в JetBrains. Он нацелен на платформы работающие на основе JVM, Android, LLVM, и [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html). +[Kotlin](https://kotlinlang.org/) – это язык со статической типизацией, разработанный в JetBrains. Он нацелен на платформы работающие на основе JVM, Android, LLVM и [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html). JetBrains разрабатывает и поддерживает несколько библиотек специально для React community: [React bindings](https://github.com/JetBrains/kotlin-wrappers) совместно с [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). Последняя позволит вам начать использовать Kotlin вместе с React в одном проекте без необходимости ручной конфигурации. From 0a74651d2277d9af2ba3c3f0a06582b7103da7d2 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:45:14 +0300 Subject: [PATCH 23/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index ad0868a37..51620b8f8 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -258,7 +258,7 @@ tsc --init ### Запуск TypeScript {#running-typescript} -Если все было сделано правильно, можно попробовать скомпилировать TypeScript: +Если всё было сделано правильно, можно попробовать скомпилировать TypeScript: ```bash yarn build From 93feb0700f32b8f778a6e697c34ea0c38ba8873a Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:45:48 +0300 Subject: [PATCH 24/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 51620b8f8..4c5ed0684 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -270,7 +270,7 @@ yarn build npm run build ``` -Если после этой команды в терминале ничего нет — процесс компиляции прошел успешно. +Если после этой команды в терминале ничего нет — процесс компиляции прошёл успешно. ### Определения типов {#type-definitions} From 3a0b2bf52082b38b776dd1287ba752b794c8e740 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 19 Feb 2019 22:45:58 +0300 Subject: [PATCH 25/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 4c5ed0684..7795eac42 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -10,7 +10,7 @@ next: refs-and-the-dom.html ## Flow {#flow} -[Flow](https://flow.org/) — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React компонентов. Ознакомиться с основами Flow можно на странице [официальной документации](https://flow.org/en/docs/getting-started/). +[Flow](https://flow.org/) — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React-компонентов. Ознакомиться с основами Flow можно на странице [официальной документации](https://flow.org/en/docs/getting-started/). Чтобы начать пользоваться возможностями Flow необходимо: From baeb7549864790456ae70e233c86fec850ba64c8 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 19 Feb 2019 22:46:06 +0300 Subject: [PATCH 26/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 7795eac42..d3fac5177 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -248,7 +248,7 @@ tsc --init Отлично! Теперь, если мы запустим скрипт сборки проекта, компилятор сохранит готовый JavaScript в директорию `build`. В [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter/blob/master/tsconfig.json) уже есть готовый `tsconfig.json` с неплохим набором параметров для дальнейшей тонкой настройки под себя. -Как правило, скомпилированный JavaScript бандл не следует хранить в системе контроля версий, так что не забудьте добавить папку `build` в файл `.gitignore`. +Как правило, скомпилированный JavaScript-бандл не следует хранить в системе контроля версий, так что не забудьте добавить папку `build` в файл `.gitignore`. ### Расширения файлов {#file-extensions} From 9fe74115acff47bb96d6ca335887a661a7f6d647 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 19 Feb 2019 22:46:19 +0300 Subject: [PATCH 27/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index d3fac5177..1e889cbe2 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -320,4 +320,4 @@ JetBrains разрабатывает и поддерживает несколь ## Другие языки {#other-languages} -Помните: есть и другие языки со статической типизацией, которые могут компилироваться в JavaScript, а значит — совместимы с React. Например, [F#/Fable](http://fable.io) вместе с [elmish-react](https://elmish.github.io/react). Для подробной информации - переходите на соответствующие сайты и не стесняйтесь предлагать больше React-совместимых статически типизированных языков в этот раздел! +Помните: есть и другие языки со статической типизацией, которые могут компилироваться в JavaScript, а значит — совместимы с React. Например, [F#/Fable](http://fable.io) вместе с [elmish-react](https://elmish.github.io/react). Для подробной информации переходите на соответствующие сайты и не стесняйтесь предлагать больше React-совместимых статически типизированных языков в этот раздел! From 85e975940f886a3c7dc6ceadb3dbf6960211e4d5 Mon Sep 17 00:00:00 2001 From: Vasiliy Vanchuk Date: Tue, 19 Feb 2019 22:46:33 +0300 Subject: [PATCH 28/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 1e889cbe2..70c90792b 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -108,7 +108,7 @@ npm install --save-dev babel-preset-flow >Примечание: > ->Для работы с Flow не нужно отдельно устанавливать пресет `react` — Flow уже понимает JSX синтаксис. Тем не менее, часто используют оба пресета одновременно. +>Для работы с Flow не требуется отдельно устанавливать пресет `react` — Flow уже понимает JSX синтаксис. Тем не менее, часто используют оба пресета одновременно. #### Другие инструменты сборки {#other-build-setups} From 5eefba140056fe1fa0b13babb3ed45208ddae4c9 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 19 Feb 2019 22:47:03 +0300 Subject: [PATCH 29/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 70c90792b..471ad9165 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -316,7 +316,7 @@ Reason был разработан в Facebook и используется в н [Kotlin](https://kotlinlang.org/) – это язык со статической типизацией, разработанный в JetBrains. Он нацелен на платформы работающие на основе JVM, Android, LLVM и [JavaScript](https://kotlinlang.org/docs/reference/js-overview.html). -JetBrains разрабатывает и поддерживает несколько библиотек специально для React community: [React bindings](https://github.com/JetBrains/kotlin-wrappers) совместно с [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). Последняя позволит вам начать использовать Kotlin вместе с React в одном проекте без необходимости ручной конфигурации. +JetBrains разрабатывает и поддерживает несколько библиотек специально для сообщества React: [React bindings](https://github.com/JetBrains/kotlin-wrappers) совместно с [Create React Kotlin App](https://github.com/JetBrains/create-react-kotlin-app). Последняя позволит вам начать использовать Kotlin вместе с React в одном проекте без необходимости ручной конфигурации. ## Другие языки {#other-languages} From 863f2ad15209a6252c2035e8ac754a1a9dd5e0a1 Mon Sep 17 00:00:00 2001 From: Nick Tishkevich Date: Tue, 19 Feb 2019 22:47:35 +0300 Subject: [PATCH 30/37] Update content/docs/static-type-checking.md Co-Authored-By: acilsd --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 471ad9165..1a48d9a25 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -274,7 +274,7 @@ npm run build ### Определения типов {#type-definitions} -Для анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы определений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. Это, в свою очередь, позволяет нам использовать JavaScript библиотеки в проекте совместно с TypeScript. +Для анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы определений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. В свою очередь это позволяет нам использовать JavaScript библиотеки в проекте совместно с TypeScript. Существует два основных способа получения файлов определений: From 79920cf2e5e2021bb0bbb5f916b433203a3def9b Mon Sep 17 00:00:00 2001 From: acilsd Date: Tue, 19 Feb 2019 22:52:39 +0300 Subject: [PATCH 31/37] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=D0=BB?= =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=BA=D0=B0=20=D1=83=D1=81=D1=82=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=BA=D0=B8=20flow=20/=20typescript?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/static-type-checking.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 1a48d9a25..f28cd11eb 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -14,7 +14,7 @@ next: refs-and-the-dom.html Чтобы начать пользоваться возможностями Flow необходимо: -* Установить Flow как локальную зависимость проекта. +* Установить Flow в проект. * Убедиться, что аннотации Flow удаляются из кода при его компиляции. * Добавить несколько аннотаций типов и запустить Flow для их проверки. @@ -36,7 +36,7 @@ yarn add --dev flow-bin npm install --save-dev flow-bin ``` -Эти команды установят последнюю версию Flow в качестве локальной зависимости вашего проекта. +Эти команды установят последнюю версию Flow в ваш проекта. Далее нужно добавить `flow` в раздел `"scripts"` файла `package.json`: @@ -159,7 +159,7 @@ No errors! [TypeScript](https://www.typescriptlang.org/) — это язык программирования, разработанный в Microsoft. TypeScript является надмножеством JavaScript, имеет статическую систему типов и собственный компилятор. Статическая типизация позволяет отлавливать ошибки и баги во время компиляции, ещё до запуска приложения. Подробнее узнать о совместном использовании TypeScript и React можно [здесь](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). Чтобы использовать TypeScript, нужно: -* Установить TypeScript как локальную зависимость проекта. +* Установить TypeScript в проект. * Настроить компилятор. * Использовать правильные расширения файлов. * Установить файлы определений для используемых библиотек. From 4cc33466361f9c63d0a03330f46914b84097abf1 Mon Sep 17 00:00:00 2001 From: acilsd Date: Tue, 19 Feb 2019 22:54:20 +0300 Subject: [PATCH 32/37] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=B0=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D0=BD=D0=B0=D1=8F=20=D1=84=D0=BE=D1=80=D0=BC?= =?UTF-8?q?=D1=83=D0=BB=D0=B8=D1=80=D0=BE=D0=B2=D0=BA=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/static-type-checking.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index f28cd11eb..4f9e29e3e 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -14,7 +14,7 @@ next: refs-and-the-dom.html Чтобы начать пользоваться возможностями Flow необходимо: -* Установить Flow в проект. +* Добавить Flow в проект. * Убедиться, что аннотации Flow удаляются из кода при его компиляции. * Добавить несколько аннотаций типов и запустить Flow для их проверки. @@ -36,7 +36,7 @@ yarn add --dev flow-bin npm install --save-dev flow-bin ``` -Эти команды установят последнюю версию Flow в ваш проекта. +Эти команды добавят последнюю версию Flow в ваш проект. Далее нужно добавить `flow` в раздел `"scripts"` файла `package.json`: @@ -159,7 +159,7 @@ No errors! [TypeScript](https://www.typescriptlang.org/) — это язык программирования, разработанный в Microsoft. TypeScript является надмножеством JavaScript, имеет статическую систему типов и собственный компилятор. Статическая типизация позволяет отлавливать ошибки и баги во время компиляции, ещё до запуска приложения. Подробнее узнать о совместном использовании TypeScript и React можно [здесь](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). Чтобы использовать TypeScript, нужно: -* Установить TypeScript в проект. +* Добавить TypeScript в проект. * Настроить компилятор. * Использовать правильные расширения файлов. * Установить файлы определений для используемых библиотек. From 67afc993d5412ad184c87d13d841513b42cbfe78 Mon Sep 17 00:00:00 2001 From: acilsd Date: Tue, 19 Feb 2019 23:08:51 +0300 Subject: [PATCH 33/37] Improve 'declaration file' translation and some minor stylistic fixes --- content/docs/static-type-checking.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 4f9e29e3e..8a879befd 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -38,7 +38,7 @@ npm install --save-dev flow-bin Эти команды добавят последнюю версию Flow в ваш проект. -Далее нужно добавить `flow` в раздел `"scripts"` файла `package.json`: +Далее нужно добавить `flow` в секцию `"scripts"` файла `package.json`: ```js{4} { @@ -162,7 +162,7 @@ No errors! * Добавить TypeScript в проект. * Настроить компилятор. * Использовать правильные расширения файлов. -* Установить файлы определений для используемых библиотек. +* Установить файлы объявлений для используемых библиотек. Остановимся подробнее на каждом из этих моментов. @@ -272,15 +272,15 @@ npm run build Если после этой команды в терминале ничего нет — процесс компиляции прошёл успешно. -### Определения типов {#type-definitions} +### Определение типов {#type-definitions} -Для анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы определений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. В свою очередь это позволяет нам использовать JavaScript библиотеки в проекте совместно с TypeScript. +Для анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы объявлений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. В свою очередь это позволяет нам использовать JavaScript библиотеки в проекте совместно с TypeScript. -Существует два основных способа получения файлов определений: +Существует два основных способа получения файлов объявлений: -__Bundled__ — Библиотека устанавливается вместе с собственным файлом определений. Это прекрасный вариант для нас, так как всё, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл определений, поищите `index.d.ts` в её исходных файлах. В некоторых библиотеках наличие и расположение этого файла указываются в `package.json` в секциях `typings` или `types`. +__Bundled__ — Библиотека устанавливается вместе с собственным файлом объявлений. Это прекрасный вариант для нас, так как всё, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл объявлений, поищите `index.d.ts` в её исходных файлах. В некоторых библиотеках наличие и расположение этого файла указываются в `package.json` в секциях `typings` или `types`. -__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ — это внушительный репозиторий файлов объявлений для библиотек без собственного файла объявлений. Например, React устанавливается без собственного файла объявления — вместо этого мы устанавливаем его отдельно: +__[DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)__ — это внушительный репозиторий файлов объявлений. Например, React устанавливается без собственного файла объявления — вместо этого мы устанавливаем его отдельно: ```bash # yarn @@ -291,7 +291,7 @@ npm i --save-dev @types/react ``` __Локальные объявления__ -Иногда пакет, который вы хотите использовать, не имеет ни собственного файла объявлений, ни соответствующего файла в репозитории DefinitelyTyped. В этом случае, мы можем объявить собственный локальный файл объявлений. Для этого надо создать файл `declarations.d.ts` в корне директории, где лежат исходники вашего проекта. Файл деклараций может выглядеть примерно так: +Иногда пакет, который вы хотите использовать, не имеет ни собственного файла объявлений, ни соответствующего файла в репозитории DefinitelyTyped. В этом случае, мы можем объявить собственный локальный файл объявлений. Для этого надо создать файл `declarations.d.ts` в корне директории, где лежат исходники вашего проекта. Файл объявлений может выглядеть примерно так: ```typescript declare module 'querystring' { From ec22d0802196ed8749756dee3a26606a33efca6a Mon Sep 17 00:00:00 2001 From: acilsd Date: Thu, 21 Feb 2019 15:47:48 +0300 Subject: [PATCH 34/37] Edit #type-definition title translation --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index f5e2bb831..60a37bd7d 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -278,7 +278,7 @@ npm run build Если после этой команды в терминале ничего нет — процесс компиляции прошёл успешно. -### Определение типов {#type-definitions} +### Объявления типов {#type-definitions} Для анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы объявлений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. В свою очередь это позволяет нам использовать JavaScript библиотеки в проекте совместно с TypeScript. From eb9bd152566b299aedd757e85d4e5e0d0a323209 Mon Sep 17 00:00:00 2001 From: acilsd Date: Thu, 21 Feb 2019 20:37:27 +0300 Subject: [PATCH 35/37] Revert #type-definitions section translations --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 60a37bd7d..f5e2bb831 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -278,7 +278,7 @@ npm run build Если после этой команды в терминале ничего нет — процесс компиляции прошёл успешно. -### Объявления типов {#type-definitions} +### Определение типов {#type-definitions} Для анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы объявлений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. В свою очередь это позволяет нам использовать JavaScript библиотеки в проекте совместно с TypeScript. From 467f0ed4f816a128f5b813c6a4536c418dd986de Mon Sep 17 00:00:00 2001 From: acilsd Date: Thu, 21 Feb 2019 20:39:29 +0300 Subject: [PATCH 36/37] Pluralize --- content/docs/static-type-checking.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index f5e2bb831..9b3089f2d 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -278,7 +278,7 @@ npm run build Если после этой команды в терминале ничего нет — процесс компиляции прошёл успешно. -### Определение типов {#type-definitions} +### Определения типов {#type-definitions} Для анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы объявлений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. В свою очередь это позволяет нам использовать JavaScript библиотеки в проекте совместно с TypeScript. From d9fa138d61514cdedc8ae48cd9808a5e3e3fa93f Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Fri, 1 Mar 2019 13:53:13 -0800 Subject: [PATCH 37/37] Update static-type-checking.md --- content/docs/static-type-checking.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md index 26156217a..d4f9a682f 100644 --- a/content/docs/static-type-checking.md +++ b/content/docs/static-type-checking.md @@ -14,7 +14,7 @@ next: refs-and-the-dom.html Чтобы начать пользоваться возможностями Flow необходимо: -* Добавить Flow в проект. +* Добавить Flow в ваш проект как зависимость. * Убедиться, что аннотации Flow удаляются из кода при его компиляции. * Добавить несколько аннотаций типов и запустить Flow для их проверки. @@ -145,9 +145,9 @@ No errors! Попробуйте добавить эту аннотацию в некоторые файлы вашего проекта, а затем запустить скрипт `yarn flow` или `npm run flow` и посмотреть, найдёт ли Flow какие-нибудь ошибки. -Кроме того, есть [возможность](https://flow.org/en/docs/config/options/#toc-all-boolean) заставить Flow проверять вообще *все* файлы. Если вы переводите на Flow проект, в котором уже есть наработки кода — может возникнуть множество конфликтов, а вот для старта с нуля такая опция может стать неплохим выбором. +Кроме того, есть [возможность](https://flow.org/en/docs/config/options/#toc-all-boolean) заставить Flow проверять вообще *все* файлы. Если вы переводите на Flow проект, в котором уже есть наработки кода, может возникнуть множество конфликтов, а вот для старта с нуля такая опция может стать неплохим выбором. -Все должно работать! Советуем ознакомиться с этими ресурсами и познакомиться с Flow подробнее: +Все должно работать! Советуем изучить Flow подробнее, ознакомившись со следующими ресурсами: * [Flow Documentation: Type Annotations](https://flow.org/en/docs/types/) * [Flow Documentation: Editors](https://flow.org/en/docs/editors/) @@ -159,7 +159,7 @@ No errors! [TypeScript](https://www.typescriptlang.org/) — это язык программирования, разработанный в Microsoft. TypeScript является надмножеством JavaScript, имеет статическую систему типов и собственный компилятор. Статическая типизация позволяет отлавливать ошибки и баги во время компиляции, ещё до запуска приложения. Подробнее узнать о совместном использовании TypeScript и React можно [здесь](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter). Чтобы использовать TypeScript, нужно: -* Добавить TypeScript в проект. +* Добавить TypeScript в проект как зависимость. * Настроить компилятор. * Использовать правильные расширения файлов. * Установить файлы объявлений для используемых библиотек. @@ -180,7 +180,7 @@ npx create-react-app my-app --typescript >Примечание: > ->Дальше описывается ручная настройка TypeScript. Если вы используете Create React App — можете **пропустить этот раздел**. +>Дальше описывается ручная настройка TypeScript. Если вы используете Create React App, можете **пропустить этот раздел**. ### Добавление TypeScript в проект {#adding-typescript-to-a-project} @@ -225,7 +225,7 @@ npx tsc --init Сгенерированный файл `tsconfig.json` уже содержит несколько параметров, которые используются компилятором по умолчанию. Кроме того, можно указать множество опциональных параметров. Более детальная информация по каждому параметру находится [здесь](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) -Из всех параметров больше всего сейчас нас интересуют `rootDir` и `outDir`. Очевидно, что компилятор берёт исходный TypeScript код, и компилирует его в JavaScript. И нам не нужно, чтобы возникла путаница между исходными файлами и сгенерированным кодом. +Из всех параметров больше всего сейчас нас интересуют `rootDir` и `outDir`. Очевидно, что компилятор берёт исходный TypeScript код, и компилирует его в JavaScript. И нам нужно, чтобы не возникло путаницы между исходными файлами и сгенерированным кодом. Эту проблему можно решить в два шага: * Во-первых, изменим структуру проекта. Все файлы с исходниками переместим в директорию `src`. @@ -276,7 +276,7 @@ yarn build npm run build ``` -Если после этой команды в терминале ничего нет — процесс компиляции прошёл успешно. +Если эта команда не вывела ничего в терминале, то процесс компиляции прошёл успешно. ### Определения типов {#type-definitions}