Пояснення компіляції TypeScript, як скомпілювати та запустити код

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

Розуміння компіляції TypeScript

Код TypeScript не виконується безпосередньо браузерами або Node.js. Натомість його потрібно скомпільувати в JavaScript. Компілятор TypeScript, `tsc`, виконує це завдання. Процес передбачає перетворення файлів TypeScript (`.ts`) у файли JavaScript (`.js`), які можна запускати в будь-якому середовищі JavaScript.

Налаштування вашого середовища TypeScript

Перш ніж скомпілювати код TypeScript, переконайтеся, що у вас встановлено Node.js і npm. Ви можете встановити TypeScript глобально за допомогою npm:

npm install -g typescript

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

Компіляція коду TypeScript

Щоб скомпілювати файл TypeScript, перейдіть до каталогу проекту в терміналі та скористайтеся командою `tsc`, а потім ім’ям файлу:

tsc filename.ts

Замініть `filename.ts` на назву вашого файлу TypeScript. Ця команда компілює код TypeScript у файл JavaScript із такою ж назвою, але з розширенням `.js`.

Використання файлу конфігурації TypeScript

Файл `tsconfig.json` використовується для налаштування параметрів компілятора TypeScript і параметрів проекту. Ви можете створити цей файл за допомогою:

npx tsc --init

Ось приклад базового файлу `tsconfig.json`:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Ця конфігурація вказує, що TypeScript має компілювати код до ECMAScript 6 (`es6`), використовувати модулі CommonJS, увімкнути сувору перевірку типу, виводити скомпільовані файли в каталог `dist` і генерувати вихідні карти для налагодження.

Компіляція всіх файлів у проекті

За допомогою файлу `tsconfig.json` ви можете скомпілювати всі файли TypeScript у своєму проекті, виконавши:

tsc

Ця команда читає файл `tsconfig.json` і компілює всі файли TypeScript, указані в конфігурації.

Запуск скомпільованого коду JavaScript

Коли код TypeScript скомпільовано в JavaScript, ви можете запустити його за допомогою Node.js або включити у веб-проект. Щоб запустити файл JavaScript за допомогою Node.js, використовуйте:

node dist/filename.js

Замініть `filename.js` на назву вашого скомпільованого файлу JavaScript, який знаходиться в каталозі `dist`.

Поширені помилки компіляції

Під час компіляції ви можете зіткнутися з помилками. Ось деякі поширені проблеми та способи їх вирішення.

• Синтаксичні помилки: Перевірте свій код TypeScript на наявність проблем із синтаксисом. Компілятор надасть повідомлення про помилки, вказуючи, де проблеми.
• Помилки типу: Переконайтеся, що ваш код відповідає системі типів TypeScript. Перегляньте анотації типів і переконайтеся, що вони правильно визначені.
• Проблеми конфігурації: Переконайтеся, що ваш файл `tsconfig.json` правильно налаштований і розташований у кореневому каталозі вашого проекту.

Висновок

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