Хочете скористатися перевагами строго типізованої мови, але боїтеся складної конфігурації? Ми покажемо, як легко і швидко ввести 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-програміста, не вимагаючи при цьому ніяких особливих налаштувань і складної конфігурації.

Джерело перекладу