Dynamic Duo для веб-розробників

Автор

TypeScript набирає популярність як одна з провідних мов програмування у сучасних розробницьких середовищах.

TypeScript – це компільована, строго типізована надбудова над JavaScript, що базується на його фундаменті. Ця мова зі статичною типізацією, розроблена та підтримувана Microsoft, підтримує об’єктно-орієнтовані принципи, подібно до JavaScript.

Ця мова програмування з відкритим кодом має широкий спектр застосувань, включаючи створення веб-сайтів, масштабних систем та мобільних додатків. TypeScript використовується як для розробки інтерфейсів користувача, так і для серверної частини. Існує велика кількість фреймворків та бібліотек, які полегшують розробку і розширюють її можливості.

Чому варто використовувати TypeScript разом з Node.js? У цій статті ми розглянемо переваги TypeScript над JavaScript, процес її встановлення за допомогою Node.js, налаштування та створення невеликого застосунку з використанням цих технологій.

TypeScript з Node.js: Переваги

  • Посилена статична типізація: JavaScript має динамічну типізацію, де тип даних змінної визначається під час виконання програми. TypeScript, у свою чергу, пропонує статичну типізацію, де тип змінної встановлюється при її оголошенні і не може бути змінений.
  • Передбачуваність: З TypeScript ви можете бути впевнені, що оголошений тип даних залишиться незмінним. Наприклад, якщо змінна має логічний тип, вона не зможе стати рядком. Розробники можуть бути впевнені у стабільності своїх функцій.
  • Раннє виявлення помилок: TypeScript виявляє більшість помилок типізації на ранніх етапах розробки, що знижує ймовірність їх появи у робочій версії. Це скорочує час, витрачений на тестування.
  • Підтримка у більшості IDE: TypeScript сумісний з більшістю інтегрованих середовищ розробки (IDE). Вони пропонують доповнення коду та підсвічування синтаксису. У цій статті ми будемо використовувати Visual Studio Code, також від Microsoft.
  • Простий рефакторинг: TypeScript дозволяє оновлювати або рефакторизувати код без зміни його поведінки. Інструменти навігації та IDE, які розуміють код, спрощують рефакторинг.
  • Використання існуючих пакетів: Не потрібно починати з нуля – можна використовувати існуючі NPM пакети у TypeScript. Мова має велику спільноту, що створює визначення типів для популярних пакетів.

Як використовувати TypeScript з Node.js

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

Необхідні умови

  • Node.js: Node.js – це кросплатформне середовище виконання JavaScript-коду за межами браузера. Перевірити наявність Node.js можна командою:

node -v

Якщо Node.js не встановлено, завантажте його з офіційного вебсайту. Повторіть команду після встановлення, щоб переконатися у коректній інсталяції.

  • Менеджер пакетів Node: Можна використовувати NPM або Yarn. NPM встановлюється за замовчуванням разом з Node.js. Ми будемо використовувати NPM. Перевірте версію командою:

npm -v

Встановлення TypeScript з Node.js

Крок 1: Створення папки проекту

Почнемо зі створення папки для проєкту TypeScript. Ви можете назвати її як завгодно. Скористайтесь цими командами:

mkdir typescript-node

cd typescript-node

Крок 2: Ініціалізація проєкту

Ініціалізуйте проєкт за допомогою npm:

npm init -y

Ця команда створить файл package.json. Флаг -y означає, що npm використає значення за замовчуванням. Файл матиме приблизно такий вигляд:

{
  "name": "typescript-node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Налаштування TypeScript з Node.js

Крок 1: Встановлення компілятора TypeScript

Встановіть компілятор TypeScript у проєкт командою:

npm install –save-dev typescript

Ви побачите щось подібне у командному рядку:

added 1 package, and audited 2 packages in 26s
found 0 vulnerabilities

Примітка: цей спосіб встановлює TypeScript локально у папку проєкту. Можна встановити TypeScript глобально в системі, щоб не потрібно було його встановлювати для кожного проєкту. Для глобального встановлення використовуйте команду:

npm install -g typescript

Перевірте встановлення TypeScript командою:

tsc -v

Крок 2: Додавання типів для Node.js

TypeScript використовує різні типи: неявний, явний та навколишній. Навколишні типи завжди додаються до глобальної області. Додайте типи командою:

npm install @types/node –save-dev

Крок 3: Створення файлу tsconfig.json

Це файл конфігурації, де вказуються параметри компіляції TypeScript. Виконайте цю команду:

npx tsc --init --rootDir src --outDir build 
--esModuleInterop --resolveJsonModule --lib es6 
--module commonjs --allowJs true --noImplicitAny true

У терміналі ви побачите:

Створено файл tsconfig.json з параметрами за замовчуванням та коментарями.

Ось що налаштовано:

  • rootDir – TypeScript шукатиме код у папці /src, де ми будемо писати код.
  • outDir – Папка для скомпільованого коду. Код буде збережено у папці build/.

Використання TypeScript з Node.js

Крок 1: Створення папки src та файлу index.ts

Тепер, коли базова конфігурація завершена, створимо просту програму TypeScript та скомпілюємо її. Файли TypeScript мають розширення .ts. Виконайте ці команди, перебуваючи у папці проєкту:

mkdir src

touch src/index.ts

Крок 2: Додавання коду до файлу TypeScript (index.ts)

Спробуйте щось просте, наприклад:

console.log('Hello world!')

Крок 3: Компіляція TypeScript у JavaScript

Виконайте команду:

npx tsc

Перевірте папку build/index.js, вона буде містити:

TypeScript код було скомпільовано у JavaScript.

Крок 4: Запуск скомпільованого JavaScript-коду

Код TypeScript не може працювати безпосередньо у браузерах. Тому запустимо файл index.js з папки збірки. Виконайте команду:

node build/index.js

Результат:

Крок 5: Налаштування автоматичної компіляції

Компілювати код вручну кожного разу, коли змінюються файли, – це не ефективно. Для цього встановимо ts-node (для запуску TypeScript без компіляції) та nodemon (для відстежування змін та автоматичного перезапуску сервера).

Виконайте команду:

npm install --save-dev ts-node nodemon

Додайте скрипт до package.json:

"scripts": {
  "start": "ts-node ./src/index.ts"
}

Для демонстрації додамо цей код:

function sum (num1:number, num2:number, num3:number){
  return num1 + num2 +num3;
}
console.log(sum(10,15,30))

Видаліть файл index.js (/build/index.js) і запустіть npm start.

Результат:

Налаштування лінтування TypeScript з eslint

Крок 1: Встановлення eslint

Лінтування допомагає підтримувати сталість коду та виявляти помилки. Встановіть eslint:

npm install --save-dev eslint

Крок 2: Ініціалізація eslint

Ініціалізуйте eslint командою:

npx eslint --init

Процес ініціалізації складається з декількох етапів. Зверніться до знімку екрана для налаштування:

Після завершення процесу ви побачите файл .eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: 'standard-with-typescript',
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
  }
}

Крок 3: Запуск eslint

Перевірте усі файли з розширенням .ts:

npx eslint . --ext .ts

Крок 4: Оновлення package.json

Додайте скрипт для лінтування:

"scripts": {
  "lint": "eslint . --ext .ts",
},

TypeScript з Node.js: Кращі практики

  • Оновлення TypeScript: Розробники TypeScript постійно випускають нові версії. Переконайтесь, що ви використовуєте найновішу версію, щоб скористатися новими функціями та виправленнями.
  • Строгий режим: Увімкніть строгий режим у файлі tsconfig.json для виявлення типових помилок під час компіляції. Це скоротить час налагодження та підвищить продуктивність.
  • Сувора перевірка null: Увімкніть цю опцію для перехоплення помилок, пов’язаних з null та undefined, під час компіляції.
  • Редактор коду з підтримкою TypeScript: Використовуйте редактори, такі як VS Code, Sublime Text або Atom, що мають підтримку TypeScript через плагіни.
  • Використання типів та інтерфейсів: За допомогою типів та інтерфейсів можна створювати власні типи, які можуть використовуватись у проекті. Це робить код модульним та легким у підтримці.

Підсумки

Тепер у вас є базова структура програми з використанням TypeScript та Node.js. Ви можете використовувати звичайні пакети Node.js, але писати код на TypeScript, насолоджуючись усіма додатковими можливостями.

Якщо ви новачок у TypeScript, переконайтесь, що ви розумієте відмінності між TypeScript та JavaScript.