Содержание

Статическая типизация – React

Инструменты для статической типизации, такие как Flow или TypeScript, позволяют отлавливать большую часть ошибок ещё до исполнения кода. Кроме того, они существенно улучшают процессы разработки, добавляя автодополнение и другие возможности. Для приложений с большой кодовой базой мы рекомендуем использовать Flow или TypeScript вместо PropTypes.

Flow

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

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

  • добавить Flow в ваш проект как зависимость.
  • убедиться, что аннотации Flow удаляются из кода при его компиляции.
  • добавить несколько аннотаций типов и запустить Flow для их проверки;

Рассмотрим подробнее каждый из этих шагов.

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

Убедитесь, что вы находитесь в директории проекта, после чего запустите одну из следующих команд:

Если вы используете Yarn:

yarn add --dev flow-bin

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

npm install --save-dev flow-bin

Эти команды добавят последнюю версию Flow в ваш проект.

Далее нужно добавить

flow в секцию "scripts" файла package.json:

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

Теперь можно запустить скрипт, прописав в терминале:

yarn run flow init

Или npm:

npm run flow init

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

Удаление аннотаций Flow из скомпилированного кода

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

Для этого есть несколько способов — выбирайте в зависимости от того, какими инструментами для сборки проекта вы пользуетесь.

Create React App

Если для изначальной конфигурации проекта вы выбрали Create React App, вам ничего не нужно делать! Проект уже настроен должным образом и аннотации Flow должны удаляться при сборке проекта.

Babel

Примечание:

Дальнейшие инструкции рассчитаны на тех, кто не использует Create React App, т. к. там уже есть все необходимые настройки для работы с Flow.

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

yarn add --dev @babel/preset-flow

Или npm:

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

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

{
  "presets": [
    "@babel/preset-flow",    "react"
  ]
}

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

Примечание:

Для работы с Flow не требуется отдельно устанавливать пресет react — Flow уже понимает JSX-синтаксис. Тем не менее, часто используют оба пресета одновременно.

Другие инструменты сборки

Для удаления аннотаций Flow существует отдельная библиотека: flow-remove-types. Она может пригодиться, если вы пользуетесь другими инструментами для сборки проекта.

Запуск Flow

Если всё было сделано правильно, можно попробовать запустить процесс Flow:

yarn flow

Или npm:

npm run flow

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

No errors!
✨  Done in 0.17s.

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

По умолчанию Flow проверяет только файлы, содержащие специальную аннотацию (обычно её указывают в самом начале файла):

// @flow

Попробуйте добавить эту аннотацию в некоторые файлы вашего проекта, а затем запустить скрипт yarn flow или npm run flow и посмотреть, найдёт ли Flow какие-нибудь ошибки.

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

Всё должно работать! Советуем изучить Flow подробнее, ознакомившись со следующими ресурсами:

  • Flow Documentation: Type Annotations
  • Flow Documentation: Editors
  • Flow Documentation: React
  • Linting in Flow

TypeScript

TypeScript — это язык программирования, разработанный в Microsoft. TypeScript является надмножеством JavaScript, имеет статическую систему типов и собственный компилятор. Статическая типизация позволяет отлавливать ошибки и баги во время компиляции, ещё до запуска приложения. Подробнее узнать о совместном использовании TypeScript и React можно здесь.

Чтобы использовать TypeScript, нужно:

  • добавить TypeScript в проект как зависимость.
  • настроить компилятор.
  • использовать правильные расширения файлов.
  • установить файлы объявлений для используемых библиотек;

Остановимся подробнее на каждом из этих моментов.

Использование TypeScript вместе с Create React App

Create React App поддерживает TypeScript по умолчанию.

Чтобы создать новый проект с поддержкой TypeScript, используйте следующую команду:

npx create-react-app my-app --template typescript

Можно добавить поддержку TypeScript в уже существующий проект, как показано здесь.

Примечание:

Дальше описывается ручная настройка TypeScript. Если вы используете Create React App, можете пропустить этот раздел.

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

Всё начинается с одной единственной команды в терминале:

yarn add --dev typescript

Или npm:

npm install --save-dev typescript

Ура! Вы установили последнюю версию TypeScript.

Теперь в вашем распоряжении новая команда — tsc. Но прежде, чем праздновать, давайте добавим соответствующий скрипт в файл package.json:

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

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

Сам по себе компилятор бесполезен, пока мы не скажем, что именно ему нужно делать. Для этого есть специальный конфигурационный файл tsconfig.json. Создадим этот файл:

yarn run tsc --init

Или npm:

npx tsc --init

Сгенерированный файл tsconfig.json уже содержит несколько параметров, которые используются компилятором по умолчанию. Кроме того, можно указать множество опциональных параметров. Более детальная информация по каждому параметру находится здесь.

Из всех параметров больше всего сейчас нас интересуют rootDir и outDir. Очевидно, что компилятор берёт исходный TypeScript код, и компилирует его в JavaScript. И нам нужно, чтобы не возникло путаницы между исходными файлами и сгенерированным кодом.

Эту проблему можно решить в два шага:

  • Во-первых, изменим структуру проекта. Все файлы с исходниками переместим в директорию
    src    .
├── package.json
├── src
│   └── index.ts
└── tsconfig.json
  • Затем, укажем компилятору откуда ему брать исходные файлы и куда сохранять скомпилированный код.
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "rootDir": "src",    "outDir": "build"    // ...
  },
}

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

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

build в файл . gitignore.

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

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

.tsx для файлов, содержащих разметку JSX, и .ts для всего остального.

Запуск TypeScript

Если всё было сделано правильно, можно попробовать скомпилировать TypeScript:

yarn build

Или npm:

npm run build

Если эта команда не вывела ничего в терминале, то процесс компиляции прошёл успешно.

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

Для анализа ошибок и выдачи всплывающих подсказок компилятор TypeScript использует файлы объявлений. Они содержат в себе всю информацию о типах, которые используются в конкретной библиотеке. В свою очередь это позволяет нам использовать JavaScript-библиотеки в проекте совместно с TypeScript.

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

Bundled — библиотека устанавливается вместе с собственным файлом объявлений.

Это прекрасный вариант для нас, так как всё, что нам нужно — установить нужный пакет. Чтобы проверить, есть ли у библиотеки файл объявлений, поищите index.d.ts в её исходных файлах. В некоторых библиотеках наличие и расположение этого файла указываются в package.json в секциях typings или types.

DefinitelyTyped — это внушительный репозиторий файлов объявлений. Например, React устанавливается без собственного файла объявления — вместо этого мы устанавливаем его отдельно:

# yarn
yarn add --dev @types/react
# npm
npm i --save-dev @types/react
Локальные объявления

Иногда пакет, который вы хотите использовать, не имеет ни собственного файла объявлений, ни соответствующего файла в репозитории DefinitelyTyped. В этом случае, мы можем объявить собственный локальный файл объявлений. Для этого надо создать файл declarations.d.ts в корне директории, где лежат исходники вашего проекта. Файл объявлений может выглядеть примерно так:

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

Вот и всё, вы готовы писать код на TypeScript! Чтобы познакомиться с ним поближе, рекомендуем посетить эти ресурсы:

  • TypeScript Documentation: Everyday Types
  • TypeScript Documentation: Migrating from JavaScript
  • TypeScript Documentation: React and Webpack

ReScript

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

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

Kotlin

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

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

Другие языки

Помните: есть и другие языки со статической типизацией, которые могут компилироваться в JavaScript, а значит — совместимы с React. Например, F#/Fable вместе с elmish-react. Для подробной информации переходите на соответствующие сайты и не стесняйтесь предлагать больше React-совместимых статически типизированных языков в этот раздел!

Строгая типизация JS, Typescript, Javascript : быть или не быть

  1. 1.История JavaScript 
  2. 2.Flow vs Typescript — сходства и отличия

Статьи Front-end TypeScript

Согласно опросу Global Developer Hiring Landscape Survey report 2017, проведенному Stack Overflow, JavaScript является самым востребованным языком программирования среди веб-разработчиков по всему миру. С момента своего создания в 1995 году JavaScript зарекомендовал себя как оптимальный язык работы с интерфейсами для браузеров и веб-страниц. Благодаря богатому набору библиотек он также обеспечил новые возможности для визуализации. Angular[.js], Ember.js и другие подобные фреймворки предоставили JS необходимую гибкость и возможности.

Результаты опроса

Следует помнить, что JavaScript разрабатывался как клиентский язык для масс, поэтому его функциональность не такая разнообразная, как у других языков. В нем не хватает множества важных функций, необходимых для адекватного написания и поддержки массивных приложений. Чтобы справиться с этой проблемой, веб-разработчики создавали такие инструменты, как eslint для сканирования кода.

Статистика GitHub за последние три года также показала убедительный рост числа проектов, в которых используется статическая типизация JavaScript. Даже в других языках разработчики предпочитают использовать статическую типизацию вместо динамической.

Рекомендуем курс по теме
  • Java Enterprise advanced

Статистика GitHub

История JavaScript 

Mosaic от NCSA был первым общепризнанным веб-браузером еще в 1993 году. А в 1994 Netscape представила свой популярный запатентованный браузер, получивший название Netscape Navigator, который считался единственным надежным вариантом в 90-х годах. Netscape наняла Брендана Эйха в 1995 году, и в том же году им был основан JavaScript. По словам Эйха:

«Мы стремились предоставить «язык-клей» для веб-дизайнеров и программистов на неполный рабочий день, которые строят веб-контент из таких компонентов, как изображения, плагины и мини-приложения на Java. Мы рассматривали Java как «компонентный язык», используемый более дорогостоящими программистами, где «программисты-склейщики» — разработчики веб-страниц — собирали бы компоненты и автоматизировали их с помощью JS».

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

JavaScript динамически типизированный язык и позволяет объявлять функции, объекты и переменные без объявления типа. Хотя эта возможность и упрощает использование языка, это не всегда удобно. Чтобы помочь справиться с такими проблемами типизации языков программирования, и появлялись TypeScript и Flow.

Цель статьи – выделить плюсы и минусы статической типизации в контексте разработки на Javascript. В дополнение к этому мы рассмотрим TypeScript и Flow, а также сравним их, чтобы в конце этой статьи вы могли бы решить: стоит ли переносить свои проекты на строгую типизацию вместо того, чтобы полагаться на «ванильный JavaScript».

Зачем это нужно

Вспомните Coffeescript, который был чрезвычайно популярен. Но, хотя я очень уважаю его изобретателя, факт заключается в том, что у этого языка были некоторые серьезные проблемы (почитайте соответствующую ветку переписки на ycombinator). Затем появился ES6.

Из-за необходимости поддерживать старые браузеры и для интерактивного выхода функционала ES6 у нас стали появляться транспайлеры, такие как Babel. Coffeescript имеет много общего с ним и тоже является транспайлером.

Инструментов CoffeeScript и Babel было недостаточно, что подтолкнуло сообщество в строну TypeScript и Flow. Взгляните на тренды (за Flow не ручаюсь, думаю, что возникла контекстуальная ошибка, он должен быть в несколько раз меньше).

Статистика Google Trends

TypeScript – это язык программирования с открытым исходным кодом, разработанный Microsoft, является суперсетом JS. По другую сторону – Flow, который разработан Facebook.

На практике Flow сравнительно проще, чем TypeScript, и его можно постепенно включить в файл проекта, настроить проверку типа в нем, просто добавив // @flow в начале файла. Все расширения основываются на комментариях.

Flow vs Typescript — сходства и отличия

Конечно, и TypeScript, и Flow полезны. Мы, в свою очередь, развернем сравнение с точки зрения разработчика.

TypeScript

TypeScript, как видно по названию, умеет проверять типизацию. Он принимает на вход (.ts) и генерирует (.js) на выходе. Существует флаг компилятора nolmplicitAny, который, если включен, потребует от вас указать типы и возвращаемые значения для всех используемых аргументов и функций.

Активация noImplicitAny может иметь серьезные последствия для вашей работы, особенно при работе с малоизвестными сторонними модулями. Помимо того, я обратил внимание, что при использовании noImplicitAny я стал писать часть кода специально, чтобы сделать довольным компилятор TypeScript.

Доступно множество описаний интерфейсов для библиотек JS. Если говорить о чем-то популярном, то проблем у вас не будет. Однако, нет уверенности, что разработчик, который написал файл .d.ts, сделал это аккуратно. Плюс ко всему, вам потребуется предоставить определение типов, если вы хотите внедрить стороннюю библиотеку для вашей кодировки. Готовьтесь заплатить за строгую типизацию своим временем.

В дополнение ко встроенной демонстрации ошибок до компиляции, при использовании TypeScript с IDE на подобии WebStorm перед вами откроется перекрестная навигация и более точное автозаполнение.

Flow

В отличие от TypeScript, Flow лишь сканирует ваши .js-файлы для обнаружения возможных ошибок. Другими словами, он действует как умный линтер.

Если пользуетесь Flow, то обратите внимание на пакет для Atom Nuclide.

Все же, кто на вершине?

Независимо от того, кто является вашим фаворитом: TypeScript или Flow, проверка типов – это будущее JS. Примечательным различием между Flow и TypeScript является то, насколько плавно они могут быть интегрированы в текущие проекты. В то время как TypeScript значительно сложнее, Flow относительно легко внедряем, предупреждая по ходу базовой интеграции, что проверяет меньше вашего кода, как и ожидается. Если вы пишете на Angular, то выбор у вас небольшой.

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

Преимущества использования статической типизации

Обнаружение ошибок на лету

С помощью тестирования типов легко проверить работоспособность кода еще до его выполнения.

Следующие операции действительны в JavaScript, но вы получите бонус в typescript, например:

static.ts hosted with ❤ by GitHub

Более точная передача смысла функции

Типы действуют как активная, живая документация для автора и его тим-мейтов. Благодаря статической типизации вам легче понять цель функции, тип данных, которые он принимает в качестве входных, или что ожидать взамен.

Если вы считаете, что включение комментариев может сделать то же самое, вы не ошибаетесь. Но поскольку комментарии являются довольно подробными, они нарушают общую структуру кода, уменьшают полезную плотность. Комментарии — это следствие того, что вы не справились с передачей смысла кода в синтаксисе его языка (интересная книга на эту тему: Чистый код Роберта Мартина).

Упрощение отладки ошибок

Нам лучше проверить, что s – строка, а y – регулярное выражение. Без статических типов вам понадобится дополнительный код. А без него нас могут ждать сюрпризы во время выполнения.

Различие между данными и поведением

Поскольку статические типы четко различают данные и поведение, это позволяет разработчикам более уверенно прогнозировать свои ожидания и более точно объяснять цель. Это не только смягчит давление и двусмысленность, но также добавит ясности и прозрачности во время кодинга.

pressure.ts hosted with ❤ by GitHub

Сокращение вероятности возникновения ошибок во время выполнения

Ошибки типа во время выполнения становятся катастрофическими, на чем и живут такие сервисы как Sentry.

Например, приведенный ниже код будет работать в JavaScript, но будет отмечать ошибку компиляции: строка не существует.

helloworld.js hosted with ❤ by GitHub

Инструмент доменного моделирования (если использовать IDE)

Одна из лучших особенностей статических типов. Если вы работали в Visual Studio на языке подобном C#, вы поймете, о чем я. Это реально уменьшает административную сложность. Пример (у вас реально получится работать с субдоменами):

App.subapp.somefunction

Недостатки использования статических типов

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

Одна из проблем – дополнительная стоимость обучения инженеров и затраты на сопровождение типизированного кода.

Одна из причин, по которой JavaScript настолько популярен среди веб-разработчиков, заключается в его простоте и в том, что им не нужно добираться до полной системы типов перед началом работы. Это особенно важно для начинающих программистов. Включение типов в процесс скорее запутает их и сделает процесс обучения более сложным, чем ожидалось.

С использованием TypeScript или Flow общий размер кода увеличится на 30% как минимум. Плотность кода снижается. Это как Ruby или Java 🙂

Использование статических типов в JavaScript —  Да или Нет?

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

  • Достаточно большой и комплексный проект

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

  • Над задачей работает большая команда

Чем больше людей, тем сложнее контролировать, что они пишут. Вам легче переложить часть боли машине.

  • Рефакторинг программы в перспективе

Используйте TypeScript, если вы считаете, что в будущем потребуется большой рефакторинг. Не взваливайте на себя ненужное бремя, если имеете дело с краткосрочным заданием.

  • Ваша команда знакома со статически типизированным языком

Строго типизированные языки, такие как TypeScript, – это прекрасный выбор, если вы или ваши товарищи по команде уже знакомы с типизированными языками, такими как Java или

C# обучением. Так как TypeScript был разработан тем же разработчиком, который изобрел C#, оба эти языка имеют похожие элементы.

  • Вы ищите замену babel

TS+ES6 возможно перевести на ES5 с помощью TS-транспайлера. Вы сможете отказаться от babel.

  • Библиотека/фреймворк предлагает TypeScript

Для тех, кто использует Angular 2+ или любой другой фреймворк, предлагающий TypeScript, следует попробовать статическую типизацию.

В заключение

Как только вы полноценно перейдете к статической типизации, то вряд ли вернетесь назад. Однако все это зависит от требований и объема проекта, над которым ведется работа. Не стесняйтесь поделиться своими мыслями, оставляйте комментарии. Мы будем рады услышать ваше мнение :).

Олександр Книга, Software Engineer в Weblab Technology

Дмитрий Дмитриенко, Brand Specialist в Weblab Technology

Шармин Хаят, Data Specialist в Weblab Technology

Рекомендуем курс по теме
  • Front-end Pro advanced

Документация | Flow

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

📄️ Введение

Никогда раньше не использовали систему типов или просто новичок в Flow? Давайте начнем работу за несколько минут.

📄️ Часто задаваемые вопросы

У вас есть вопрос об использовании Flow? Сначала проверьте здесь!

📄️ Аннотации типов

«> Узнайте, как добавлять в код аннотации типа Flow: примитивы, объекты, функции, классы и многое другое.

📄️ Система типов

Узнайте, как работает система типов в Flow: подтипы, дисперсия, уточнения и многое другое.

📄️ React

Узнайте, как использовать Flow для эффективного ввода общих и расширенных шаблонов React.

📄️ Flow Enums

Определите фиксированный набор констант, которые создают свой собственный тип. Исчерпывающая проверка в операторах switch.

📄️ Объявления

Узнайте, как писать типы в файлах .flow.

📄️ Определения библиотек

«> Узнайте, как создавать и использовать определения библиотек для стороннего кода, от которого зависит ваш код.

📄️ Подавление ошибок

Узнайте, как подавить ошибки типа Flow.

📄️ Анализ

Узнайте, как настроить анализатор Flow для поиска потенциально вредоносного кода.

📄️ Flow Strict

Узнайте, как включить более строгую проверку типов для каждого файла.

📄️ Flow CLI

Как использовать Flow из командной строки. В том числе, как управлять фоновым процессом Flow.

📄️ Конфигурация

«> Flow максимально старается работать из коробки, но может быть настроен для работы с любой кодовой базой.

📄️ Инструменты

Flow и Babel прекрасно работают вместе. It

📄️ Editors

Подробные руководства, советы и ресурсы по интеграции Flow с различными редакторами кода.

Выпуски · flowjs/flow.js · GitHub

v2.14.1

05 июн 07:53

АйдасК

v2.14.1

922c4b3 Сравнить

v2.14.1Последняя

Последняя

 Версия 2.14.1

v2.14.0

21 янв 08:21

АйдасК

v2. 14.0

45dcba1 Сравнить

v2.14.0

 Версия 2.14.0

v2.13.2

13 июн 13:48

АйдасК

v2.13.2

538524c Сравнить

v2.13.2

 Версия 2.13.2

v2.13.1

05 окт 10:09

АйдасК

v2.13.1

aadc5a7 Сравнить

v2.13.1

 Версия 2.13.1

v2.13.0

20 июн 09:58

АйдасК

v2.13.0

172e3d1 Сравнить

v2. 13.0

 Версия 2.13.0

v2.11.2

16 июн 08:47

АйдасК

v2.11.2

feff1e1 Сравнить

v2.11.2

 Версия 2.11.2

v2.10.1

20 янв 08:19

АйдасК

v2.10.1

c375a34 Сравнить

v2.10.1

 Версия 2.10.1

v2.10.0

19Янв 11:53

АйдасК

v2.10.0

f6109a6 Сравнить

v2.10.0

 Версия 2.10.0

v2.9.0

01 фев 15:40

АйдасК

v2.

No related posts.