Статичні типізатори, такі як Flow і TypeScript, розпізнають певні типи проблем навіть до запуску вашого коду. Вони також можуть покращити робочий процес розробника додаючи функції, такі як автозавершення. З цієї причини для великих кодових баз ми рекомендуємо використовувати Flow або TypeScript замість PropTypes.
Flow — це статичний типізатор для вашого JavaScript-коду. Він розроблюється у Facebook і часто використовується разом з React. Він дозволяє вам анотувати змінні, функції та 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}Нарешті виконайте одну з наступних команд:
\nЯкщо ви користуєтесь Yarn, то запустіть:
\nyarn run flow initЯкщо ви користуєтесь npm, то запустіть:
\nnpm run flow initЦя команда створить конфігурацію Flow, яку вам потрібно буде закомітити.
\nFlow розширяє мову JavaScript спеціальним синтаксисом для анотацій типів. Проте браузери не знають про цей синтаксис, тому нам потрібно переконатися, що він не з’явиться у скомпільованому JavaScript-пакеті, який надсилається браузеру.
\nЯк саме це зробити залежить від інструментів, якими ви компілюєте JavaScript.
\nЯкщо ваш проект був налаштований з використанням Create React App, то ми вас вітаємо! Flow-анотації вже вилучаються за замовчуванням, тому вам не потрібно більше нічого робити на цьому кроці.
\n\n\nПримітка:
\nЦі інструкції не для користувачів Create React App. Незважаючи на те, що Create React App використовує Babel в реалізації, він вже налаштований на розуміння Flow. Виконайте це крок лише коли ви не використовуєте Create React App.
\n
Якщо ви налаштували Babel для вашого проекту вручну, то вам потрібно буде встановити спеціальний пресет для Flow.
\nЯкщо ви користуєтесь Yarn, то запустіть:
\nyarn add --dev @babel/preset-flowЯкщо ви користуєтесь npm, то запустіть:
\nnpm install --save-dev @babel/preset-flowІ потім додайте пресет flow до вашої конфігурації Babel. Наприклад, якщо ви налаштовуєте Babel через файл .babelrc, то він може виглядати так:
{\n \"presets\": [\n \"@babel/preset-flow\", \"react\"\n ]\n}Це дозволить вам використовувати синтаксис Flow у вашому коді.
\n\n\nПримітка:
\nFlow не потребує пресет
\nreact, але вони часто використовуються разом. Flow сам по собі розуміє синтаксис JSX.
Якщо ви не використовуєте Create React App і Babel, то ви можете використати flow-remove-types для видалення анотацій типів.
\nЯкщо ви слідували наведеним вище інструкціям, то ви повинні мати можливість вперше запустити Flow.
\nyarn flowЯкщо ви користуєтесь npm, то запустіть:
\nnpm run flowВи маєте побачити подібне повідомлення:
\nNo errors!\n✨ Done in 0.17s.За замовчуванням Flow перевіряє лише файли, що включають таку анотацію:
\n// @flowЗазвичай вона розміщується на початку файлу. Спробуйте додати її до деяких файлів у вашому проекті і запустити yarn flow чи npm run flow, щоб побачити чи Flow вже знайшов якісь проблеми.
Також існує опція, що дозволяє примусити Flow перевіряти всі файли незалежно від наявності вищевказаної анотації. Якщо ви додаєте Flow в існуючий проект, то може виникнути багато конфліктів, але якщо ви починаєте з нуля, то це непогана можливість зробити це.
\nТепер у вас все налаштовано! Ми рекомендуємо ознайомитись з наступними ресурсами, щоб дізнатися більше про Flow:
\nTypeScript — це мова програмування розроблена Microsoft. Вона є типізованою надмножиною мови JavaScript, і включає власний компілятор. Статична типізація дозволяє мові TypeScript ловити помилки та дефекти під час збірки, набагато раніше ніж ваш додаток буде випущено. Ви можете дізнатися більше про використання TypeScript з React тут.
\nДля використання TypeScript вам потрібно:
\nДавайте пройдемо по списку детальніше.
\nCreate React App сам по собі підтримує TypeScript.
\nЩоб створити новий проект з підтримкою TypeScript запустіть:
\nnpx create-react-app my-app --template typescriptВи також зможете додати його до існуючого проекту Create React App як описано тут.
\n\n\nПримітка:
\nЯкщо ви користуєтесь Create React App, то ви можете пропустити решту цієї сторінки. Вона описує налаштування вручну, що не відноситься до користувачів Create React App.
\n
Все починається з запуску однієї команди в вашому терміналі.
\nЯкщо ви користуєтесь Yarn, то запустіть:
\nyarn add --dev typescriptЯкщо ви користуєтесь npm, то запустіть:
\nnpm install --save-dev typescriptВітаємо! Ви встановили останню версію TypeScript у ваш проект. Встановлення TypeScript надає вам доступ до команди tsc. Давайте додамо tsc у відділення “scripts” вашого package.json перед його налаштуванням:
{\n // ...\n \"scripts\": {\n \"build\": \"tsc\", // ...\n },\n // ...\n}Компілятор нам не допоможе поки ми не вкажемо що йому робити. В TypeScript ці правила задаються в спеціальному файлі під назвою tsconfig.json. Щоб згенерувати цей файл запустіть наступне:
Якщо ви користуєтесь Yarn, то запустіть:
\nyarn run tsc --initЯкщо ви користуєтесь npm, то запустіть:
\nnpx tsc --initПоглянувши на щойно створений файл tsconfig.json ви побачите, що існує багато опцій для налаштyвання компілятора. Детальний опис всіх опцій доступний за цим посиланням.
Ми розглянемо 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 ми маємо два різних файлових розширення:
.ts— це розширення файлів за замовчуванням, а .tsx— це спеціальне розширення для файлів, що містять JSX.
Якщо ви слідували інструкціям вище, то ви повинні мати можливість вперше запустити TypeScript.
\nyarn buildЯкщо ви користуєтесь npm, то запустіть:
\nnpm run buildЯкщо ви не побачили ніяких повідомлень, то це означає, що компіляція завершилася успішно.
\nКомпілятор покладається на файли оголошень щоб показувати помилки та підказки з інших пакетів. Файл оголошень надає всю інформацію про типи в бібліотеці. Це дозволяє використовувати в нашому проекті бібліотеки JavaScript як ті, що доступні в npm.
\nІснує два основних шляхи отримати оголошення для бібліотеки:
\nУкомплектовані – це коли бібліотека включає свій власний файл оголошень. Це чудово для нас, оскільки все що нам потрібно зробити – це встановити бібліотеку і ми можемо одразу її використовувати. Щоб перевірити чи бібліотека укомплектована інформацією про типи погляньте чи в проекті є файл index.d.ts. Деякі бібліотеки вказують його в своїх package.json в полі typings або types.
DefinitelyTyped – це величезний репозиторій оголошень для бібліотек, що не включають власні файли оголошень. Ці оголошення створюються через краудсорсинг та контролюються Microsoft та учасниками відкритого програмного забезпечення. Наприклад, React не включає власний файл оголошень. Замість цього ми можем його отримати з DefinitelyTyped. Для цього введіть таку команду в вашому терміналі.
\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 надає OCaml знайомий синтаксис пристосований для програмістів JavaScript та використовує знайомий всім робочий процес NPM/Yarn.
\nReason розробляється компанією Facebook і використовується в деяких її продуктах, таких як Messenger. Він поки є дещо експериментальною технологією, але для нього існують спеціалізовані прив’язки з React, що підтримуються Facebook та активною спільнотою.
\nKotlin – це статично типізована мова розроблена JetBrains. Її цільові платформи включають JVM, Android, LLVM, та JavaScript.
\nJetBrains розробляє та підтримує декілька інструментів спеціально для спільноти користувачів React: React-прив’язки а також Create React Kotlin App. Останній допомагає почати будувати React-додатки з Kotlin без потреби у налаштуванні збірки.
\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":[]}