Пошук уроків, статей та іншого контенту
Встановите Node.js, TypeScript і редактор коду, а також створите та запустите перший TypeScript-файл.
Для першого проєкту потрібні:
Node.js — середовище, яке дає змогу запускати JavaScript і містить менеджер пакетів npm;
TypeScript — компілятор, який перетворює TypeScript-код на JavaScript;
редактор коду — наприклад, Visual Studio Code.
Завантажте актуальну LTS-версію Node.js з офіційного сайту та встановіть її зі стандартними параметрами. Разом із Node.js встановиться npm.
Після встановлення відкрийте термінал і перевірте версії:
node --version
npm --versionКоманди мають вивести номери встановлених версій. Якщо система не знаходить команду node або npm, перезапустіть термінал або перевірте, чи завершилося встановлення Node.js без помилок.
Створімо окрему папку для проєкту та перейдемо до неї:
mkdir first-typescript-project
cd first-typescript-projectКоманда mkdir створює папку, а cd переходить до неї.
Тепер ініціалізуємо npm-проєкт:
npm init -yУ папці з’явиться файл package.json. У ньому зберігається основна інформація про проєкт і його залежності.
Встановимо TypeScript як залежність, потрібну під час розробки:
npm install --save-dev typescriptПрапорець --save-dev означає, що TypeScript потрібен для розробки та компіляції, але не є частиною коду, який запускається в робочому середовищі.
Після встановлення:
у папці node_modules з’явиться TypeScript;
у package.json з’явиться секція devDependencies;
у файлі package-lock.json буде зафіксована точна версія залежності.
Перевірити встановлений TypeScript можна командою:
npx tsc --versionnpx запускає програму з локальних залежностей проєкту. Команда tsc — це компілятор TypeScript.
Створимо базовий файл налаштувань TypeScript:
npx tsc --initУ проєкті з’явиться файл tsconfig.json. Він описує, як TypeScript має обробляти файли.
Для першого проєкту замініть його вміст на такий:
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"rootDir": "./src",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src"]
}Основні параметри:
target — версія JavaScript, яку генеруватиме TypeScript;
module — формат модулів у згенерованому JavaScript;
rootDir — папка з TypeScript-файлами;
outDir — папка для згенерованих JavaScript-файлів;
strict — увімкнення суворої перевірки типів;
include — список папок, які потрібно компілювати.
Створіть папку src, а в ній файл index.ts:
mkdir srcСтруктура проєкту на цьому етапі:
first-typescript-project/
├── node_modules/
├── package-lock.json
├── package.json
├── tsconfig.json
└── src/
└── index.tsВідкрийте src/index.ts у редакторі коду та додайте:
const userName: string = "Олена";
const visitCount: number = 1;
const message: string = `Привіт, ${userName}! Це твій ${visitCount}-й TypeScript-проєкт.`;
console.log(message);У цьому коді:
userName має тип string, тобто рядок;
visitCount має тип number, тобто число;
message також має тип string;
console.log виводить повідомлення в термінал.
Файл із розширенням .ts містить TypeScript-код. Node.js не запускає TypeScript безпосередньо, тому спочатку його потрібно скомпілювати в JavaScript.
Запустіть компілятор:
npx tscЯкщо помилок немає, TypeScript створить папку dist і файл dist/index.js.
Структура проєкту стане такою:
first-typescript-project/
├── dist/
│ └── index.js
├── node_modules/
├── package-lock.json
├── package.json
├── tsconfig.json
└── src/
└── index.tsФайл dist/index.js — це результат компіляції. Його можна виконати за допомогою Node.js:
node dist/index.jsУ терміналі з’явиться:
Привіт, Олена! Це твій 1-й TypeScript-проєкт.package.jsonЩоб не вводити довгі команди вручну, додайте до package.json скрипти:
{
"name": "first-typescript-project",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"build": "tsc",
"start": "node dist/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^5.0.0"
}
}Версія TypeScript у вашому файлі може відрізнятися від наведеної.
Тепер проєкт можна скомпілювати командою:
npm run buildА згенерований JavaScript — запустити командою:
npm startТиповий процес роботи виглядає так:
Змінити код у src/index.ts.
Виконати npm run build.
Запустити результат командою npm start.
Для роботи можна використовувати Visual Studio Code або інший редактор із підтримкою TypeScript.
У редакторі варто відкрити саме папку проєкту first-typescript-project, а не окремий файл. Тоді редактор зможе використовувати tsconfig.json і показувати помилки типів безпосередньо під час написання коду.
TypeScript підтримується у Visual Studio Code вбудовано. Окреме розширення для базової перевірки TypeScript-коду не потрібне.
TypeScript перевіряє, чи відповідають значення оголошеним типам. Наприклад, такий код містить помилку:
const visitCount: number = "один";Змінна оголошена як number, але їй передали рядок. Під час компіляції команда npx tsc повідомить про несумісність типів.
Правильний варіант:
const visitCount: number = 1;Ця перевірка допомагає знаходити помилки ще до запуску програми.
tsc не знайденаЯкщо TypeScript встановлено локально в проєкті, використовуйте:
npx tscНе обов’язково встановлювати TypeScript глобально.
npm не знайденаЦе зазвичай означає, що Node.js не встановлено або термінал не оновив інформацію про системні команди. Перевірте встановлення Node.js і перезапустіть термінал.
src/index.ts через Node.jsКоманда:
node src/index.tsне є правильним способом запуску цього проєкту. Спочатку скомпілюйте TypeScript:
npm run buildПотім запустіть JavaScript-файл:
npm startПісля редагування src/index.ts потрібно знову виконати:
npm run buildNode.js запускає файл із папки dist, тому він не оновиться автоматично без повторної компіляції.
У цій практиці ви:
встановили Node.js і перевірили node та npm;
створили npm-проєкт;
встановили TypeScript як залежність для розробки;
створили файл tsconfig.json;
написали перший файл src/index.ts;
скомпілювали TypeScript у JavaScript;
запустили згенерований файл через Node.js;
додали команди build і start у package.json.
Основний цикл роботи:
npm run build
npm start