TypeScript прокладає собі шлях як одна з найпопулярніших мов програмування для сучасних організацій.
TypeScript — це скомпільований суворо типізований верхній індекс JavaScript (побудований на основі мови JavaScript). Ця статично типізована мова, розроблена та підтримувана Microsoft, підтримує об’єктно-орієнтовані концепції, такі як її підмножина, JavaScript.
Ця мова програмування з відкритим кодом має багато варіантів використання, наприклад створення веб-, великомасштабних і мобільних додатків. TypeScript можна використовувати для розробки інтерфейсу та серверу. Він також має різні фреймворки та бібліотеки, які спрощують розробку та розширюють варіанти використання.
Навіщо використовувати TypeScript із Node.js? У цій статті буде обговорено, чому TypeScript вважається «кращим» за JavaScript, як його встановити за допомогою Node.js, налаштувати та створити невелику програму за допомогою TypeScript і Node.js.
TypeScript з Node.js: переваги
- Додаткова статична типізація: JavaScript типізується динамічно, тобто тип даних змінної визначається під час виконання, а не під час компіляції. З іншого боку, TypeScript пропонує необов’язкову статичну типізацію, тобто коли ви оголосите змінну, вона не змінить свій тип і прийматиме лише певні значення.
- Передбачуваність: при роботі з TypeScript є впевненість, що все, що ви визначаєте, залишиться незмінним. Наприклад, якщо ви оголосите певну змінну як логічну, вона ніколи не може змінитися на рядок. Як розробник, ви впевнені, що ваші функції залишаться незмінними.
- Легко виявляти помилки на ранній стадії: TypeScript виявляє більшість помилок типу на ранній стадії, тому ймовірність їх переміщення до робочої версії є низькою. Це скорочує час, який інженери витрачають на тестування коду на наступних етапах.
- Підтримується в більшості IDE: TypeScript працює з більшістю інтегрованих середовищ розробки (IDE). Більшість із цих IDE забезпечують доповнення коду та підсвічування синтаксису. У цій статті буде використано Visual Studio Code, інший продукт Microsoft.
- Простий рефакторинг коду: ви можете оновити або рефакторинг вашої програми TypeScript, не змінюючи її поведінку. Наявність інструментів навігації та IDE, які розуміють ваш код, спрощують рефакторинг кодової бази без зусиль.
- Використовує існуючі пакети: вам не потрібно створювати все з нуля; ви можете використовувати існуючі пакети NPM з TypeScript. Ця мова також має сильну спільноту, яка підтримує та створює визначення типів для популярних пакунків.
Як використовувати TypeScript з Node.js
Незважаючи на те, що TypeScript має ці переваги, сучасні браузери не можуть читати його код у простому вигляді. Тому код TypeScript має бути спочатку транспільований у код JavaScript, щоб працювати у браузерах. Отриманий код матиме ті самі функції, що й вихідний код TypeScript, і додаткові функції, недоступні в JavaScript.
передумови
- Node.js: Node — це кросплатформне середовище виконання, яке дозволяє запускати код JavaScript поза середовищем браузера. Ви можете перевірити, чи вузол встановлено на вашій машині за допомогою цієї команди;
вузол -в
В іншому випадку ви можете завантажити Node.js з офіційного веб-сайту. Виконайте наведену вище команду ще раз після інсталяції, щоб перевірити, чи правильно її налаштовано.
- Менеджер пакетів Node: ви можете використовувати NPM або Yarn. Перший встановлюється за замовчуванням під час інсталяції 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 глобально у своїй системі, тож вам не доведеться інсталювати його кожного разу, коли ви працюєте над проектом. Використовуйте цю команду, щоб інсталювати TypeScript глобально;
npm install -g typescript
Ви можете перевірити, чи було встановлено TypeScript за допомогою цієї команди;
tsc -v
Крок 2. Додайте типи Ambient Node.js для TypeScript
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, який містить деякі параметри за замовчуванням і коментарі.
файл tsconfig.json
Ось що ми налаштували:
- У rootDir TypeScript шукатиме наш код. Ми направили його в папку /src, де ми будемо писати наш код.
- Папка outDir визначає місце розміщення скомпільованого коду. Такий код налаштовано для зберігання в папці build/.
Використання TypeScript з Node.js
Крок 1: Створіть папку src і файл index.ts
Тепер у нас є базова конфігурація. Тепер ми можемо створити просту програму TypeScript і скомпілювати її. Файл TypeScript має розширення .ts. Виконайте ці команди, перебуваючи в папці, яку ми створили на попередніх кроках;
mkdir src
торкніться src/index.ts
Крок 2. Додайте код до файлу TypeScript (index.ts)
Ви можете почати з чогось простого, наприклад;
console.log('Hello world!')
Крок 3: скомпілюйте код TypeScript у код JavaScript
Виконайте цю команду;
npx tsc
Ви можете перевірити папку збірки (build/index.js), і ви побачите, що index.js було згенеровано з цим виходом;
TypeScript скомпільовано в код JavaScript.
Крок 4. Запустіть скомпільований код JavaScript
Пам’ятайте, що код TypeScript не може працювати в браузерах. Таким чином, ми запустимо код у index.js у папці збірки. Виконайте цю команду;
node build/index.js
Це буде вихід;
Крок 5: Налаштуйте TypeScript для автоматичної компіляції в код JavaScript
Компіляція коду TypeScript вручну щоразу, коли ви змінюєте файли TypeScript, може втрачати час. Ви можете встановити 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.
Ваш результат буде подібний до цього;
сума 3 чисел
Налаштуйте TypeScript Linting за допомогою 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
Додайте сценарій lint до цього файлу для автоматичного лінтування.
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript з Node.js: найкращі практики
- Підтримуйте TypeScript в актуальному стані: розробники TypeScript завжди випускають нові версії. Переконайтеся, що на вашій машині/папці проекту встановлено найновішу версію, і скористайтеся новими функціями та виправленнями помилок.
- Увімкнути строгий режим: ви можете виявити типові помилки програмування під час компіляції, увімкнувши строгий режим у файлі tsconfig.json. Це скоротить час налагодження та підвищить продуктивність.
- Увімкнути суворі нульові перевірки: ви можете перехопити всі нульові та невизначені помилки під час компіляції, увімкнувши суворі нульові перевірки у файлі tsconfig.json.
- Використовуйте редактор коду, який підтримує TypeScript: існує безліч редакторів коду. Хорошою практикою є вибір редакторів коду, таких як VS Code, Sublime Text або Atom, які підтримують TypeScript через плагіни.
- Використовуйте типи та інтерфейси: за допомогою типів та інтерфейсів ви можете визначати власні типи, які можна повторно використовувати в усьому проекті. Такий підхід зробить ваш код більш модульним і простим у супроводі.
Підведенню
Тепер у вас є базова структура програми, створеної за допомогою TypeScript на Node.js. Тепер ви можете використовувати звичайні пакети Node.js, але, тим не менш, пишіть свій код на TypeScript і насолоджуйтесь усіма додатковими функціями, які постачаються з останнім.
Якщо ви тільки починаєте працювати з TypeScript, переконайтеся, що ви розумієте відмінності між TypeScript і JavaScript.