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

Узнайте, как сравниваются Flow и TypeScript и какое средство статической проверки лучше всего подходит для вашего следующего проекта.

Что такое поток?

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

Что такое TypeScript?

TypeScript — это не просто средство проверки типов, как Flow, а строго типизированный язык программирования. Microsoft создала язык, построив его поверх JavaScript.

По соглашению вы должны создавать файлы TypeScript с расширением .ts. Вы можете скомпилировать файл TypeScript в код JavaScript, поэтому везде, где работает JavaScript, TypeScript тоже может работать.

instagram viewer

Настройка потока для вашего приложения JavaScript

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

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

пряжа добавить --dev поток-бен

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

В macOS используйте доморощенный для установки Flow CLI:

заваривать установить поток-cli

Вам нужно будет знать как использовать Windows PowerShell для установки Flow на компьютер с Windows.

Чтобы установить Flow CLI в Windows, запустите этот скрипт в терминале PowerShell:

икс "& { $(имм '<https://storage.googleapis.com/flow-cli/install.ps1>') }"

Потоковые проекты требуют .flowconfig файл для всех необходимых конфигураций инструмента.

Запустите эту команду, чтобы создать файл конфигурации Flow в новом или существующем проекте:

запуск потока npm

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

Последнее, что нужно сделать, это добавить скрипт Flow в свой пакет.json файл:

"сценарии": {
"поток": "поток"
},

Теперь вы успешно настроили Flow для запуска в вашем приложении JavaScript.

Настройка TypeScript в вашем проекте

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

нпм установить машинопись --save-dev

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

Установите компилятор TypeScript глобально с помощью этой команды:

нпм установить -g машинопись

Чтобы инициализировать tsconfig.json config, введите в терминал следующую команду:

тск --в этом

Приведенные выше инструкции помогут вам начать использовать TypeScript в вашем проекте.

Здание с потоком

Чтобы написать код Flow в файле JavaScript, объявите синтаксис Flow в верхней части кода перед любыми выражениями или операторами:

// @поток

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

Например:

// @поток
пусть foo: число = "Привет";

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

Бегать поток выполнения npm чтобы увидеть вывод ошибки в терминале:

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

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

Например:

// @поток
функциясделай что-нибудь(ценить) {
 возвращаемое значение * "привет";
};
позволять результат = сделать что-то (6);

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

Результат поток выполнения npm будет ошибка:

Разработка с помощью TypeScript

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

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

Возьмем пример кода TypeScript:

// Typescript.ts
введите Результат = "проходить" | "неудача"
функцияпроверять(результат: Результат) {
 если (результат "проходить") {
 console.log("Прошедший")
 } еще {
 console.log("Неуспешный")
 }
}

Вы можете запустить tsc Typescript.ts чтобы скомпилировать этот код в простой ванильный JavaScript.

Это будет тот же код TypeScript, скомпилированный в ванильный JavaScript:

функцияпроверять(результат) {
 если (результат "проходить") {
 console.log("Прошедший")
 } еще {
 console.log("Неуспешный")
 }
}

Плюсы и минусы TypeScript и Flow

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

Интеграция

Процесс настройки для использования Flow несколько сложнее, чем для TypeScript. Вам нужно будет настроить компилятор JavaScript, такой как Babel или flow-remove-types, чтобы удалить потоковые типы из вашего кода. TypeScript включает компилятор для преобразования кода TypeScript в JavaScript, что упрощает интеграцию.

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

Сообщество

В отличие от Flow, фреймворки JavaScript, такие как React, React Native, Vue и Angular, изначально поддерживают TypeScript.

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

Гибкость

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

Услуги

TypeScript предоставляет все языковые сервисы JavaScript, такие как рефакторинг кода и автодополнение. Flow — это средство проверки статических типов, которое обеспечивает глубокое понимание и анализ вашего написанного кода.

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

Какую статическую проверку следует использовать?

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

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