Хочете скористатися перевагами строго типізованої мови, але боїтеся складної конфігурації? Ми покажемо, як легко і швидко ввести TypeScript в ваш проект.
Сьогодні ми поглянемо на TypeScript - більш сувору версію класичного JS.
Міграція без зміни збірки
Найпростіше відмовитися від JavaScript, коли ви починаєте проект з чистого аркуша: можна не замислюватися про сумісність змін. Але що, якщо потрібно підтримувати і розвивати старі програми? Зміна мови розробки здається поганою ідеєю, адже доведеться переписати десятки файлів. Довго, нудно, а головне - легко зламати налагоджений процес складання проекту.
Але TypeScript повністю сумісний з JavaScript. Якщо згодувати TS-компілятору JS-код, він не буде видавати помилок. Міграцію на TypeScript можна проводити поступово, файл за файлом. Писати нові скрипти на TypeScript, а існуючі - переписувати в зручному темпі.
Спробуємо додати TypeScript в наявний проект, не змінюючи конфігурації webpack, gulp або іншого збирача, яким ви користуєтеся.
Крок 1. Встановлюємо та налаштовуємо TypeScript
Перш за все потрібно встановити TypeScript в додаток (або глобально):
npm install --save-dev typescript
Примітка: в залежності від проекту вам можуть знадобитися також пакети типів (@types) для різних бібліотек. Наприклад, для react-redux потрібно встановити наступні модулі:
npm install --save-dev @types/node
npm install --save-dev @types/react
npm install --save-dev @types/react-dom
npm install --save-dev @types/react-redux
npm install --save-dev @types/react-router-dom
Тепер додамо в корінь проекту файл tsconfig.json. У ньому будуть міститися налаштування компілятора, необхідні для конвертації. Візьміть для початку пропоновану нижче конфігурацію. Вона забезпечує повну сумісність JS і TS синтаксисів.
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true,
"jsx": "react"
},
"exclude": [
"node_modules"
]
}
Щоб налаштувати конфігураційний файл під потреби вашого проекту, зверніться до документації TypeScript.
Тепер в секцію scripts-файлу package.json додамо команду для компіляції:
package.json
"tsc:w": "tsc -w"
При запуску в терміналі всі файли з розширенням .ts або .tsx будуть трансльовані в js-файли. Утиліта розмістить їх тим самим шляхом, а значить, збирач зможе працювати як раніше, ігноруючи ts-вихідні файли.
Примітка: якщо в проекті немає жодного .ts-файла, в консолі з'явиться помилка. Не лякайтеся, як тільки ви створите перший typescript-файл, компіляція запрацює правильно.
Результат компіляції TypeScript-файлу
file.ts
├── file.js
└── file.js.map
А тепер нехай почнеться магія. Беремо будь-який JS-файл, і міняємо розширення на .ts. Компілятор обробляє його без заперечень. Це перший крок для міграції проекту на TypeScript, ще не внісши жодних змін в існуючу збірку.
Додамо строгості
Великий стрибок вперед з технічної точки зору, але в самій розробці нічого не змінилося: ні нового коду, ні переваг TypeScript. Створимо простий додаток, що визначає, чи може користувач взяти іпотечний кредит.
Напишемо функцію getSavings, яка буде збирати інформацію про доходи і заощадження клієнта:
function getSavings() {
//returns savings
}
На підставі цих даних функція concedeMortgage буде приймати рішення про видачу кредиту:
function concedeMortgage(homeValue) {
const savings = getSavings();
return savings / homeValue > 0.2;
}
Щоб додаток працювало нормально, необхідно додати перевірку вхідних даних. Чи існує значення homeValue, чи є воно числом? Крім того, потрібно переконатися, що функція getSavings() повертає коректне значення заощаджень. Отже, код трохи розростається:
function concedeMortgage(homeValue) {
if(!homeValue || !parseFloat(homeValue)) return false;
const savings = getSavings();
if(!savings || !parseFloat(savings)) return false;
return savings / homeValue > 0.2;
}
Це виглядає негарно, пора скористатися перевагами TypeScript.
noImplicitAny
Додайте в файл tsconfig.json в секцію compilerOptions нову опцію:
tsconfig.json
"noImplicitAny": true
Можна не перевіряти, чи є вхідне значення і результат роботи getSavings числами. Ми просто вкажемо потрібний тип. Перевірки стануть коротшими:
function concedeMortgage(homeValue: number): boolean {
if(!homeValue) return false;
const savings = getSavings();
if(!savings) return false;
return savings / homeValue > 0.2;
}
Тепер можна відловити помилку типу на стадії компіляції! TypeScript не дозволить викликати функцію concedeMortgage, наприклад, зі строковим значенням:
concedeMortgage("foo");
// ERROR! Argument of type 'foo' is not assignable to parameter type 'number'
На жаль, значення null і undefined все ще припустимі в кожному типі, так що можна безкарно робити ось так:
concedeMortgage(null)
Не переживайте, зараз ми це виправимо.
strictNullChecks
Активуйте опцію компілятора:
tsconfig.json
"strictNullChecks": true
Тепер виклик функції з null також призводить до помилки. Можна прибрати всі перевірки і повернути concedeMortgage до первинного чистого вигляду:
function concedeMortgage(homeValue: number): boolean {
***
const savings = getSavings();
return savings / homeValue > 0.2;
}
Це була лише мала частина магії TypeScript. Він здатний істотно полегшити роботу JavaScript-програміста, не вимагаючи при цьому ніяких особливих налаштувань і складної конфігурації.
0 комментариев
Добавить комментарий