Unetway

ReactJS - Проверка статического типа

Статические проверки типов, такие как Flow и TypeScript, идентифицируют определенные типы проблем до того, как вы даже запустите свой код. Они также могут улучшить рабочий процесс разработчика, добавив такие функции, как автозаполнение. По этой причине рекомендуется использовать Flow или TypeScript вместо PropTypes больших кодовых баз.

Flow

Flow - это статический тип проверки вашего кода JavaScript. Он разработан на Facebook и часто используется с React. Он позволяет вам комментировать переменные, функции и компоненты React со специальным синтаксисом типа и рано ловить ошибки. Вы можете прочитать введение в Flow, чтобы узнать его основы.

Чтобы использовать Flow, вам необходимо:

  • Добавьте поток в проект как зависимость.
  • Убедитесь, что синтаксис потока удаляется из скомпилированного кода.
  • Добавьте аннотации типа и запустите Flow, чтобы проверить их.

Мы подробно объясним эти шаги ниже.

Добавление потока в проект

Сначала перейдите в каталог проекта в терминале. Вам нужно будет выполнить следующую команду:

Если вы используете yarnpkg, запустите:

yarn add --dev flow-bin

Если вы используете npm , запустите:

npm install --save-dev flow-bin

Эта команда устанавливает последнюю версию потока в ваш проект.

Теперь добавьте flowв "scripts" раздел своего, package.json чтобы иметь возможность использовать это из терминала:

{
  // ...
  "scripts": {
    "flow": "flow",
    // ...
  },
  // ...
}

Наконец, запустите одну из следующих команд:

Если вы используете yarnpkg , запустите:

yarn run flow init

Если вы используете npm , запустите:

npm run flow init

Эта команда создаст файл конфигурации потока, который необходимо будет зафиксировать.

Синтаксис Flow из скомпилированного кода

Flow расширяет язык JavaScript специальным синтаксисом для аннотаций типа. Однако браузеру не известно об этом синтаксисе, поэтому нам нужно убедиться, что он не попадает в скомпилированный набор JavaScript, который отправляется в браузер.

Точный способ сделать это зависит от инструментов, которые вы используете для компиляции JavaScript.

Создать приложение React

Если ваш проект был настроен с использованием приложения Create React , поздравляем! Аннотации потока уже делятся по умолчанию, поэтому вам не нужно ничего делать на этом этапе.

Babel

Заметка:

Эти инструкции не предназначены для пользователей приложений Create React. Несмотря на то, что приложение Create React использует Babel под капотом, оно уже настроено для понимания Flow. Только следуйте этому шагу, если вы не используете приложение Create React.

Если вы вручную настроили Babel для своего проекта, вам нужно будет установить специальный пресет для потока.

Если вы используете yarn, запустите: 

yarn add --dev babel-preset-flow

Если вы используете npm, запустите:

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

Затем добавьте flow предустановку в конфигурацию Babel. Например, если вы настроите .babelrc файл Babel через файл, он может выглядеть так:

{
  "presets": [
    "flow",
    "react"
  ]
}

Это позволит вам использовать синтаксис Flow в вашем коде.

Заметка:

Поток не требует reactпредустановки, но они часто используются вместе. Сам поток понимает синтаксис JSX из коробки.

Другие настройки сборки

Если вы не используете приложение Create React или Babel, вы можете использовать типы удаления потока, чтобы удалить аннотации типов.

Запуск потока

Если вы следуете приведенным выше инструкциям, вы должны иметь возможность запускать Flow в первый раз.

yarn flow

Если вы используете npm, запустите:

npm run flow

Вы должны увидеть сообщение типа:

No errors!
Done in 0.17s.

Добавление аннотаций типа потока

По умолчанию Flow проверяет только те файлы, которые включают эту аннотацию:

// @flow

Обычно он помещается в верхнюю часть файла. Попробуйте добавить его к некоторым файлам в вашем проекте и запустить, yarn flow или npm run flow чтобы увидеть, есть ли в потоке какие-либо проблемы.

Существует также возможность принудительно запускать Flow для проверки всех файлов независимо от аннотации. Это может быть слишком шумно для существующих проектов, но разумно для нового проекта, если вы хотите полностью ввести его в Flow.

Теперь вы все настроены! Рекомендуется просмотреть следующие ресурсы, чтобы узнать больше о потоке:

TypeScript

TypeScript - это язык программирования, разработанный Microsoft. Это типизированный надмножество JavaScript и включает в себя собственный компилятор. Будучи типизированным языком, TypScript может ловить ошибки и ошибки во время сборки, задолго до того, как ваше приложение переходит в прямом эфире. Вы можете узнать больше об использовании TypeScript с React здесь.

Чтобы использовать TypeScript, вам необходимо:

  • Добавить TypScript как зависимость от вашего проекта
  • Настроить параметры компилятора TypeScript
  • Используйте правильные расширения файлов
  • Добавьте определения для используемых библиотек

Давайте рассмотрим их подробно.

Добавление TypeScript в проект

Все начинается с запуска одной команды в вашем терминале.

Если вы используете yarn, запустите:

yarn add --dev typescript

Если вы используете npm , запустите:

npm install --save-dev typescript

Вы установили последнюю версию TypeScript в свой проект. Установка TypeScript дает нам доступ к tsc команде. Перед настройкой добавим tsc раздел «scripts» в наш package.json:

{
  // ...
  "scripts": {
    "build": "tsc",
    // ...
  },
  // ...
}

Настройка компилятора TypeScript

Компилятор нам не поможет, пока мы не скажем, что делать. В TypeScript эти правила определяются в специальном файле tsconfig.json. Чтобы сгенерировать этот файл, выполните следующие действия:

tsc --init

Посмотрев на сгенерированное в настоящее время tsconfig.json, вы увидите, что для настройки компилятора можно использовать множество параметров. Подробное описание всех опций можно найти здесь.

Из многих вариантов мы рассмотрим rootDir и outDir. По-настоящему, компилятор возьмет файлы машинописных файлов и сгенерирует файлы javascript. Однако мы не хотим путаться с нашими исходными файлами и сгенерированным выходом.

Мы рассмотрим это в два этапа:

  • Во-первых, давайте организуем нашу структуру проекта следующим образом. Мы поместим весь исходный код в src каталог.
├── package.json
├── src
│   └── index.ts
└── tsconfig.json
  • Затем мы расскажем компилятору, где находится наш исходный код и куда должен идти выход.
// tsconfig.json

{
  "compilerOptions": {
    // ...
    "rootDir": "src",
    "outDir": "build"
    // ...
  },
}

Теперь, когда мы запустим наш скрипт сборки, компилятор выведет сгенерированный javascript в build папку. TypeScript React Starter обеспечивает tsconfig.jsonс хорошим набором правил, чтобы вы начали.

Как правило, вы не хотите, чтобы сгенерированный javascript находился в вашем исходном элементе управления, поэтому обязательно добавьте в него папку для сборки .gitignore.

Расширения файлов

В React вы, скорее всего, пишете свои компоненты в .jsфайле. В TypeScript у нас есть 2 расширения файлов:

.ts является расширением файла по умолчанию, а .tsx является специальным расширением, используемым для файлов, которые содержат JSX.

Запуск TypeScript

Если вы следуете приведенным выше инструкциям, вы должны иметь возможность запускать TypeScript в первый раз.

yarn build

Если вы используете npm, запустите:

npm run build

Если вы не видите выход, это означает, что он успешно завершен.

Определения типов

Чтобы иметь возможность показывать ошибки и подсказки из других пакетов, компилятор полагается на файлы декларации. Файл декларации предоставляет всю информацию о типе библиотеки. Это позволяет нам использовать javascript-библиотеки, подобные тем, что мы делали в npm в нашем проекте.

Существует два основных способа получения деклараций для библиотеки:

Bundled - библиотека связывает его собственный файл декларации. Это здорово для нас, так как все, что нам нужно сделать, это установить библиотеку, и мы сможем ее использовать сразу. Чтобы проверить, есть ли библиотека в комплекте, найдите index.d.ts файл в проекте. Некоторые библиотеки будут указывать его в поле package.jsonпод полем typingsили types.

DefinitelyTyped - DefinitelyTyped - это огромный репозиторий деклараций для библиотек, которые не связывают файл декларации. Декларации публикуются в толпе и управляются Microsoft и разработчиками с открытым исходным кодом. Реакция, например, не связывает его собственный файл декларации. Вместо этого мы можем получить его от DefinitelyTyped. Для этого введите эту команду в свой терминал.

# yarn
yarn add --dev @types/react

# npm
npm i --save-dev @types/react

Local Declarations - иногда пакет, который вы хотите использовать, не связывает декларации и не доступен на определенном уровне. В этом случае мы можем иметь файл локальной декларации. Для этого создайте declarations.d.tsфайл в корневой директории источника. Простое объявление может выглядеть так:

declare module 'querystring' {
  export function stringify(val: object): string
  export function parse(val: string): object
}

Использование TypeScript с помощью приложения Create React

response-scripts-ts автоматически настраивает create-react-appпроект для поддержки TypeScript. Вы можете использовать его следующим образом:

create-react-app my-app --scripts-version=react-scripts-ts

Обратите внимание, что это сторонний проект и не является частью приложения Create React.

Вы также можете попробовать typescript-react-starter.

Теперь вы готовы ввести код! Рекомендуется просмотреть следующие ресурсы, чтобы узнать больше о Typcript:

Документация по TypeScript: основные типы
Документация по TypeScript: переход с Javascript
Документация TypeScript: React и Webpack

Reason

Reason - не новый язык; это новый синтаксис и инструментальная привязка, работающая на проверенном на битву языке, OCaml . Причина дает OCaml знакомый синтаксис, ориентированный на программистов JavaScript, и обслуживает существующие рабочие процессы NPM / Yarn, которые уже знают.

Reason разработан в Facebook и используется в некоторых ее продуктах, таких как Messenger. Он все еще несколько экспериментальный, но он посвятил React привязки, поддерживаемые Facebook и ярким сообществом .

Kotlin

Kotlin - статически типизированный язык, разработанный компанией JetBrains. Его целевые платформы включают JVM, Android, LLVM и JavaScript .

JetBrains разрабатывает и поддерживает несколько инструментов, специально предназначенных для сообщества React : React bindings, а также Create React Kotlin App . Последнее помогает вам начать создавать приложения React с Kotlin без конфигурации сборки.