Пошук уроків, статей та іншого контенту
Налаштуєте package.json і скрипти для компіляції та запуску TypeScript-проєкту з командного рядка.
У TypeScript-файли неможливо запускати безпосередньо в Node.js у звичайній конфігурації. Спочатку їх потрібно скомпілювати у JavaScript, а потім запустити згенеровані файли.
Для цього проєкт зазвичай містить:
src/ — TypeScript-код;
dist/ — результат компіляції у JavaScript;
tsconfig.json — налаштування TypeScript-компілятора;
package.json — залежності та команди проєкту.
npm-скрипти дають змогу запускати часто використовувані команди короткими назвами:
npm run build
npm startЗамість того щоб щоразу вводити довгі команди з параметрами.
Створіть нову директорію та ініціалізуйте npm-проєкт:
mkdir typescript-npm-project
cd typescript-npm-project
npm init -yВстановіть TypeScript як залежність для розробки:
npm install --save-dev typescriptПрапорець --save-dev означає, що TypeScript потрібен під час розробки та компіляції, але не є залежністю готового застосунку під час виконання.
Створіть структуру каталогів:
typescript-npm-project/
├── package.json
├── package-lock.json
├── node_modules/
└── src/
└── index.tstsconfig.jsonСтворіть у корені проєкту файл tsconfig.json:
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"rootDir": "src",
"outDir": "dist",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "dist"]
}Основні параметри:
target — версія JavaScript, яку генеруватиме компілятор;
module — формат модулів у згенерованому JavaScript;
rootDir — каталог із початковими TypeScript-файлами;
outDir — каталог для згенерованих JavaScript-файлів;
strict — увімкнення суворої перевірки типів;
include — файли, які потрібно компілювати;
exclude — файли та каталоги, які потрібно пропустити.
Після компіляції файл src/index.ts перетвориться на dist/index.js.
Створіть файл src/index.ts:
interface User {
name: string;
age: number;
}
function createGreeting(user: User): string {
return `Привіт, ${user.name}! Тобі ${user.age} років.`;
}
const user: User = {
name: "Олена",
age: 28
};
console.log(createGreeting(user));У цьому прикладі TypeScript перевіряє:
чи має об’єкт user властивості name та age;
чи є name рядком;
чи є age числом;
чи повертає createGreeting рядок.
Відкрийте package.json і додайте секцію scripts:
{
"name": "typescript-npm-project",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"build": "tsc",
"start": "npm run build && node dist/index.js",
"check": "tsc --noEmit"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^5.0.0"
}
}Версія TypeScript у вашому package.json може відрізнятися.
build"build": "tsc"Команда tsc запускає локальний TypeScript-компілятор і використовує tsconfig.json з поточного каталогу.
Запустити компіляцію можна так:
npm run buildЯкщо компіляція успішна, TypeScript створить каталог dist і файл:
dist/
└── index.jsstart"start": "npm run build && node dist/index.js"Цей скрипт виконує дві команди послідовно:
компілює TypeScript у JavaScript;
запускає згенерований файл через Node.js.
Оператор && запускає другу команду лише тоді, коли перша завершилася успішно.
Запуск проєкту:
npm startОчікуваний результат:
Привіт, Олена! Тобі 28 років.Для скрипта start npm має скорочену форму npm start. Для інших скриптів використовується форма npm run назва.
check"check": "tsc --noEmit"Прапорець --noEmit запускає перевірку TypeScript, але не створює JavaScript-файли.
Це корисно, коли потрібно лише перевірити типи:
npm run checkЯкщо у коді є помилка типів, команда завершиться з помилкою. Наприклад, такий код не пройде перевірку:
const user: User = {
name: "Олена",
age: "28"
};Властивість age має тип number, але їй передано рядок.
Після налаштування проєкт може мати такий вигляд:
typescript-npm-project/
├── package.json
├── package-lock.json
├── tsconfig.json
├── node_modules/
└── src/
└── index.tspackage.json:
{
"name": "typescript-npm-project",
"version": "1.0.0",
"description": "Приклад компіляції TypeScript через npm-скрипти",
"main": "dist/index.js",
"scripts": {
"build": "tsc",
"start": "npm run build && node dist/index.js",
"check": "tsc --noEmit"
},
"devDependencies": {
"typescript": "^5.0.0"
}
}tsconfig.json:
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"rootDir": "src",
"outDir": "dist",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"skipLibCheck": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules", "dist"]
}src/index.ts:
interface Product {
title: string;
price: number;
}
function formatProduct(product: Product): string {
return `${product.title}: ${product.price.toFixed(2)} грн`;
}
const product: Product = {
title: "Механічна клавіатура",
price: 2499
};
console.log(formatProduct(product));Команди для роботи:
npm run check
npm run build
npm startПісля npm run build буде створено приблизно такий JavaScript-файл:
"use strict";
function formatProduct(product) {
return `${product.title}: ${product.price.toFixed(2)} грн`;
}
const product = {
title: "Механічна клавіатура",
price: 2499
};
console.log(formatProduct(product));Згенерований JavaScript зазвичай не редагують вручну. Зміни вносять у src, а потім повторно запускають компіляцію.
tscПісля встановлення TypeScript виконуваний файл компілятора зберігається в node_modules/.bin.
Коли команда запускається через npm-скрипт:
"build": "tsc"npm автоматично додає node_modules/.bin до шляху пошуку команд. Тому використовується саме локальна версія TypeScript, встановлена в цьому проєкті.
Це краще, ніж покладатися на глобально встановлений TypeScript, оскільки всі учасники проєкту використовують версію, зафіксовану в package.json і package-lock.json.
Після клонування або отримання проєкту залежності встановлюють командою:
npm installПотім можна:
перевірити типи:
npm run checkскомпілювати проєкт:
npm run buildзапустити програму:
npm startКоманда npm install створить node_modules на основі package.json і package-lock.json. Каталог node_modules зазвичай не зберігають у системі контролю версій.
tsc до встановлення TypeScriptЯкщо TypeScript не встановлено, команда може бути недоступною:
tscВстановіть залежність у проєкті:
npm install --save-dev typescriptАбо запускайте компіляцію через npm-скрипт:
npm run buildЯкщо в tsconfig.json вказано:
"outDir": "dist"то запускати потрібно:
node dist/index.jsа не:
node src/index.tssrcЯкщо rootDir має значення src, TypeScript очікує початкові файли саме там:
src/index.tsФайл у корені проєкту, наприклад index.ts, не відповідатиме такій структурі.
За ввімкненого "strict": true помилки типів не дозволяють створити результат компіляції. Спочатку виправте помилки, а потім повторіть:
npm run builddistКаталог dist містить результат роботи компілятора. Зміни в ньому буде перезаписано під час наступної компіляції.
Редагуйте файли в src, а результат отримуйте через:
npm run buildtsconfig.json описує, як TypeScript має компілювати проєкт.
rootDir визначає каталог із TypeScript-кодом.
outDir визначає каталог для JavaScript-результату.
npm run build запускає компіляцію через локальний TypeScript.
npm start спочатку компілює, а потім запускає програму.
tsc --noEmit перевіряє типи без створення JavaScript-файлів.
Початковий код потрібно зберігати в src, а згенерований — у dist.