JavaScript инструментите Flow и TypeScript са сходни в много аспекти. Въпреки това, те се различават по отношение на тяхната функционалност и способности като статични пулове.
Разберете как се сравняват Flow и TypeScript и коя е най-добрата статична проверка за следващия ви проект.
Какво е поток?
Flow е инструмент за проверка на статичен тип за JavaScript, създаден от Facebook, за да идентифицира предварително грешките при компилиране и изпълнение на кода. Той прави това, като наблюдава стойностите, които вашият код предава и как техните типове данни се променят с времето. Тази система за статична проверка подобрява надеждността и четливостта. Също така помага за намаляване на появата на грешки във вашия JavaScript код.
Какво е TypeScript?
TypeScript не е просто средство за проверка на типове, като Flow, а строго типизиран език за програмиране. Microsoft създаде езика, изграждайки го върху JavaScript.
По конвенция трябва да създавате TypeScript файлове с файлово разширение .ts. Можете да компилирате TypeScript файл в JavaScript код, така че където и да работи JavaScript, TypeScript също може да работи.
Конфигуриране на Flow за вашето JavaScript приложение
Можете да интегрирате Flow във всяка JavaScript рамка, която решите да използвате за вашия проект. Ще трябва да сте конфигурирали JavaScript компилатор като Babel, за да обработва всички типове потоци във вашия код и да го компилира във ванилен JavaScript.
За да инсталирате Flow във вашия проект, изпълнете следната команда:
добавете прежда --dev flow-bin
След това трябва да инсталирате интерфейса на командния ред Flow глобално. Този CLI предоставя няколко команди за изграждане на поточни приложения.
В macOS използвайте Homebrew за да инсталирате Flow CLI:
варя Инсталирай поток-cli
Ще трябва да знаете как да използвате Windows PowerShell за да инсталирате Flow на Windows машина.
За да инсталирате Flow CLI на Windows, стартирайте този скрипт във вашия терминал PowerShell:
т.е "& { $(им '<https://storage.googleapis.com/flow-cli/install.ps1>') }"
Поточните проекти изискват a .flowconfig файл за всички необходими конфигурации на инструмента.
Изпълнете тази команда, за да създадете конфигурационен файл на Flow в нов или съществуващ проект:
npm изпълнение поток инициал
Имайте предвид, че конкретни рамки може да изпращат проекти с конфигурационен файл на Flow по подразбиране.
Последното нещо, което трябва да направите, е да добавите скрипта Flow към вашия package.json файл:
"скриптове": {
"поток": "поток"
},
Вече успешно конфигурирахте Flow да работи във вашето JavaScript приложение.
Настройване на TypeScript във вашия проект
Изпълнете следната команда, за да инсталирате TypeScript във вашия проект:
npm Инсталирай машинопис --save-dev
Трябва също така да инсталирате компилатора, за да компилирате TypeScript кода във ванилен JavaScript. Може също да се наложи настройте конфигурацията на TypeScript за по-добър работен процес опит.
Инсталирайте компилатора на TypeScript глобално с тази команда:
npm Инсталирай -g машинопис
За да инициализирате a tsconfig.json конфигурационен файл, въведете следната команда във вашия терминал:
tsc --в него
Горните инструкции ще ви помогнат да започнете да използвате TypeScript във вашия проект.
Изграждане с поток
За да напишете код на Flow в JavaScript файл, декларирайте синтаксиса на Flow в горната част на кода преди изрази или оператори:
// @поток
Можете да задавате променливи и функционални типове данни с помощта на анотация. След това Flow ще предизвика грешка, ако очакваният тип не е изпълнен.
Например:
// @поток
let 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 също поддържа капсулиране на обекти, което помага да поддържате сложния код управляем. Flow няма тази функция.
Услуги
TypeScript предоставя всички езикови услуги на JavaScript, като рефакторинг на код и автоматично довършване. Flow е инструмент за проверка на статичен тип, който осигурява задълбочено разбиране и анализ на вашия писмен код.
Flow може да работи до импортираните модули и библиотеки на вашия проект и да разпознава как те влияят на вашия код. Например, той може да открие и хвърли предупреждение, когато необходима библиотека във вашия проект липсва или когато се опитате да получите достъп до дефиниция, която не съществува.
Коя статична проверка трябва да използвате?
Има много валидни аргументи за използването на всеки инструмент, защото всеки има различни функции. Някои може да са с най-висок приоритет за един разработчик и с нисък приоритет за другия. И двата инструмента работят добре сами по себе си и предлагат предимства при използването им.
Трябва да проучите изискванията на вашия проект и да вземете обосновано решение въз основа на тях.
