Инструменты для статической типизации, такие как Flow или TypeScript, позволяют отлавливать большую часть ошибок ещё до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя автодополнение и другие возможности. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо PropTypes.
Flow — это библиотека для статической типизации JavaScript, разработанная в Facebook и часто применяемая в связке с React. Flow расширяет возможности JavaScript, добавляя аннотации типов для переменных, функций и React-компонентов. Ознакомиться с основами Flow можно на странице официальной документации.
\nЧтобы начать пользоваться возможностями Flow необходимо:
\nРассмотрим подробнее каждый из этих шагов.
\nУбедитесь, что вы находитесь в директории проекта, после чего запустите одну из следующих команд:
\nЕсли вы используете Yarn:
\nyarn add --dev flow-binЕсли вы используете npm:
\nnpm install --save-dev flow-binЭти команды добавят последнюю версию Flow в ваш проект.
\nДалее нужно добавить flow в секцию "scripts" файла package.json:
{\n // ...\n \"scripts\": {\n \"flow\": \"flow\", // ...\n },\n // ...\n}Теперь можно запустить скрипт, прописав в терминале:
\nyarn run flow initИли npm:
npm run flow initЭти команды создадут файл с исходной конфигурацией Flow, который обязательно нужно закоммитить.
\nFlow дополняет JavaScript собственным синтаксисом для указания типов, который не поддерживается браузерами. Для того, чтобы код работал, нужно убедиться в том, что аннотации Flow корректно удаляются из скомпилированного JavaScript.
\nДля этого есть несколько способов — выбирайте в зависимости от того, какими инструментами для сборки проекта вы пользуетесь.
\nЕсли для изначальной конфигурации проекта вы выбрали Create React App, вам ничего не нужно делать! Проект уже настроен должным образом и аннотации Flow должны удаляться при сборке проекта.
\n\n\nПримечание:
\nДальнейшие инструкции рассчитаны на тех, кто не использует Create React App, т. к. там уже есть все необходимые настройки для работы с Flow.
\n
Если для своего проекта вы самостоятельно настраивали Babel, нужно установить специальный пресет для работы с Flow:
\nyarn add --dev @babel/preset-flowИли npm:
npm install --save-dev @babel/preset-flowЗатем добавьте установленный пресет flow в свою конфигурацию Babel. Например так, если вы используете конфигурационный файл .babelrc:
{\n \"presets\": [\n \"@babel/preset-flow\", \"react\"\n ]\n}Этот пресет позволит использовать Flow в вашем коде.
\n\n\nПримечание:
\nДля работы с Flow не требуется отдельно устанавливать пресет
\nreact— Flow уже понимает JSX-синтаксис. Тем не менее, часто используют оба пресета одновременно.
Для удаления аннотаций Flow существует отдельная библиотека: flow-remove-types. Она может пригодиться, если вы пользуетесь другими инструментами для сборки проекта.
\nЕсли всё было сделано правильно, можно попробовать запустить процесс Flow:
\nyarn flowИли npm:
npm run flowВы должны увидеть примерно такое сообщение в терминале:
\nNo errors!\n✨ Done in 0.17s.По умолчанию Flow проверяет только файлы, содержащие специальную аннотацию (обычно её указывают в самом начале файла):
\n// @flowПопробуйте добавить эту аннотацию в некоторые файлы вашего проекта, а затем запустить скрипт yarn flow или npm run flow и посмотреть, найдёт ли Flow какие-нибудь ошибки.
Кроме того, есть возможность заставить Flow проверять вообще все файлы. Если вы переводите на Flow проект, в котором уже есть наработки кода, может возникнуть множество конфликтов, а вот для старта с нуля такая опция может стать неплохим выбором.
\nВсё должно работать! Советуем изучить Flow подробнее, ознакомившись со следующими ресурсами:
\nTypeScript — это язык программирования, разработанный в Microsoft. TypeScript является надмножеством JavaScript, имеет статическую систему типов и собственный компилятор. Статическая типизация позволяет отлавливать ошибки и баги во время компиляции, ещё до запуска приложения. Подробнее узнать о совместном использовании TypeScript и React можно здесь.
\nЧтобы использовать TypeScript, нужно:
\nОстановимся подробнее на каждом из этих моментов.
\nCreate React App поддерживает TypeScript по умолчанию.
\nЧтобы создать новый проект с поддержкой TypeScript, используйте следующую команду:
\nnpx create-react-app my-app --template typescriptМожно добавить поддержку TypeScript в уже существующий проект, как показано здесь.
\n\n\nПримечание:
\nДальше описывается ручная настройка TypeScript. Если вы используете Create React App, можете пропустить этот раздел.
\n
Всё начинается с одной единственной команды в терминале:
\nyarn add --dev typescriptИли npm:
npm install --save-dev typescriptУра! Вы установили последнюю версию TypeScript. Теперь в вашем распоряжении новая команда — tsc. Но прежде, чем праздновать, давайте добавим соответствующий скрипт в файл package.json:
{\n // ...\n \"scripts\": {\n \"build\": \"tsc\", // ...\n },\n // ...\n}Сам по себе компилятор бесполезен, пока мы не скажем, что именно ему нужно делать. Для этого есть специальный конфигурационный файл tsconfig.json. Создадим этот файл:
yarn run tsc --initИли npm:
npx tsc --initСгенерированный файл tsconfig.json уже содержит несколько параметров, которые используются компилятором по умолчанию. Кроме того, можно указать множество опциональных параметров. Более детальная информация по каждому параметру находится здесь
Из всех параметров больше всего сейчас нас интересуют rootDir и outDir. Очевидно, что компилятор берёт исходный TypeScript код, и компилирует его в JavaScript. И нам нужно, чтобы не возникло путаницы между исходными файлами и сгенерированным кодом.
Эту проблему можно решить в два шага:
\nsrc.├── package.json\n├── src\n│ └── index.ts\n└── tsconfig.json// tsconfig.json\n\n{\n \"compilerOptions\": {\n // ...\n \"rootDir\": \"src\", \"outDir\": \"build\" // ...\n },\n}Отлично! Теперь, если мы запустим скрипт сборки проекта, компилятор сохранит готовый JavaScript в директорию build. В TypeScript React Starter уже есть готовый tsconfig.json с неплохим набором параметров для дальнейшей тонкой настройки под себя.
Как правило, скомпилированный JavaScript-бандл не следует хранить в системе контроля версий, так что не забудьте добавить папку build в файл .gitignore.
В React мы почти всегда используем .js в качестве расширений файлов компонентов. В TypeScript лучше разделять файлы на два типа:
.tsx для файлов, содержащих разметку JSX, и .ts для всего остального.
Если всё было сделано правильно, можно попробовать скомпилировать TypeScript:
\nyarn buildИли npm:
npm run buildЕсли эта команда не вывела ничего в терминале, то процесс компиляции прошёл успешно.
\nДля анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы объявлений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. В свою очередь это позволяет нам использовать JavaScript библиотеки в проекте совместно с TypeScript.
\nСуществует два основных способа получения файлов объявлений:
\nBundled — Библиотека устанавливается вместе с собственным файлом объявлений. Это прекрасный вариант для нас, так как всё, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл объявлений, поищите index.d.ts в её исходных файлах. В некоторых библиотеках наличие и расположение этого файла указываются в package.json в секциях typings или types.
DefinitelyTyped — это внушительный репозиторий файлов объявлений. Например, React устанавливается без собственного файла объявления — вместо этого мы устанавливаем его отдельно:
\n# yarn\nyarn add --dev @types/react\n\n# npm\nnpm i --save-dev @types/reactЛокальные объявления\nИногда пакет, который вы хотите использовать, не имеет ни собственного файла объявлений, ни соответствующего файла в репозитории DefinitelyTyped. В этом случае, мы можем объявить собственный локальный файл объявлений. Для этого надо создать файл declarations.d.ts в корне директории, где лежат исходники вашего проекта. Файл объявлений может выглядеть примерно так:
declare module 'querystring' {\n export function stringify(val: object): string\n export function parse(val: string): object\n}Вот и всё, вы готовы писать код на TypeScript! Чтобы познакомиться с ним поближе, рекомендуем посетить эти ресурсы:
\nReason — это не новый язык, а новый синтаксис и набор инструментов для проверенного временем языка OCaml. Reason предоставляет синтаксис, ориентированный на JavaScript программистов, и использует уже известный всем способ распространения через NPM/Yarn.
\nReason был разработан в Facebook и используется в некоторых продуктах этой компании — например, в Messenger. Reason всё ещё считается довольно экспериментальным инструментом, но уже имеет библиотеку привязок для React, поддерживаемую Facebook, а также отзывчивое сообщество
\nKotlin — это язык со статической типизацией, разработанный в JetBrains. Он нацелен на платформы работающие на основе JVM, Android, LLVM и JavaScript.
\nJetBrains разрабатывает и поддерживает несколько библиотек специально для сообщества React: React bindings совместно с Create React Kotlin App. Последняя позволит вам начать использовать Kotlin вместе с React в одном проекте без необходимости ручной конфигурации.
\nПомните: есть и другие языки со статической типизацией, которые могут компилироваться в JavaScript, а значит — совместимы с React. Например, F#/Fable вместе с elmish-react. Для подробной информации переходите на соответствующие сайты и не стесняйтесь предлагать больше React-совместимых статически типизированных языков в этот раздел!
","frontmatter":{"title":"Статическая типизация","next":null,"prev":null},"fields":{"path":"content/docs/static-type-checking.md","slug":"docs/static-type-checking.html"}}},"pageContext":{"slug":"docs/static-type-checking.html"}},"staticQueryHashes":[]}