Що таке tsc у TypeScript

TypeScript сам по собі не може виконуватися у браузері або Node.js – він потребує перетворення у звичайний JavaScript. Саме для цього існує спеціальний інструмент, що постачається разом із TypeScript і запускає процес компіляції.

Що таке tsc

tsc (TypeScript Compiler) – це офіційний компілятор TypeScript. Його завдання полягає у тому, щоб приймати код TypeScript (файли з розширенням .ts або .tsx) і перетворювати його у звичайний JavaScript (файли .js), який уже можна виконувати у браузері або середовищі Node.js.

Іншими словами, саме tsc робить TypeScript практичним інструментом: без нього код залишався б лише декларативним набором типів і синтаксичних конструкцій, які неможливо запустити напряму.

Встановлення tsc

Компілятор tsc входить до складу пакета TypeScript. Найпростіший спосіб його встановити – скористатися менеджером пакетів npm:

npm install -g typescript

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

tsc -v

У результаті ви побачите номер версії TypeScript, що підтверджує готовність інструмента до роботи.

Попередньо може бути корисним ознайомитись:

Базове використання tsc

Після встановлення компілятор можна запускати прямо з терміналу. Найпростіший варіант – скомпілювати один файл:

tsc script.ts

У результаті з’явиться файл script.js, який можна виконати у Node.js або підключити до веб-сторінки.

Приклад

Файл script.ts:

function greet(name: string): string {
  return 'Hello, ' + name;
}

console.log(greet('TypeScript'));

Результат компіляції script.js:

function greet(name) {
  return 'Hello, ' + name;
}

console.log(greet('TypeScript'));

Як бачимо, компілятор прибрав типи (string), але залишив логіку програми – тепер код можна запускати як звичайний JavaScript.

Також можна одразу компілювати кілька файлів, наприклад:

tsc file1.ts file2.ts file3.ts

Корисні параметри tsc

Окрім базової компіляції, tsc підтримує безліч параметрів, які роблять роботу зручнішою. Ось кілька поширених у використанні:

--init – створює базовий файл tsconfig.json у проекті:

tsc --init

--watch або коротко -w – автоматична перекомпіляція файлів при кожному збереженні:

tsc -w

--outDir – вказує директорію, куди зберігатиметься згенерований JavaScript:

tsc script.ts --outDir dist

--target – задає версію JavaScript, у яку буде трансформовано TypeScript-код (наприклад, ES5, ES6, ES2020):

tsc script.ts --target ES6

--project або коротко -p – дозволяє використати конкретний файл конфігурації tsconfig.json, якщо їх кілька:

tsc -p ./configs/tsconfig.build.json

tsconfig.json

Налаштування компілятора зручно зберігати у спеціальному файлі tsconfig.json. Це дозволяє не прописувати параметри щоразу в командному рядку, а один раз описати їх у конфігурації.

Файл можна створити автоматично командою:

tsc --init

Приклад tsconfig.json:

{
  "compilerOptions": {
    "target": "ES6", // версія JavaScript, у яку компілюється код
    "module": "ESNext", // формат модулів (import/export)
    "outDir": "./dist", // папка для згенерованих .js файлів
    "rootDir": "./", // корінь проєкту, звідки брати .ts файли
    "allowJs": false, // ігнорувати .js файли при компіляції
    "strict": true // вмикає всі строгі перевірки типів
  },
  "include": ["./**/*.ts"], // усі .ts файли в поточному проєкті
  "exclude": ["dist", "node_modules", "**/*.js"] // виключає згенеровані .js і службові папки
}

Після цього достатньо просто запустити команду:

tsc

Компілятор автоматично прочитає tsconfig.json і застосує всі вказані налаштування.

Докладніше про файл tsconfig.json

Підсумок

tsc – це компілятор TypeScript, що перетворює .ts файли у звичайний JavaScript. Він робить код придатним для виконання у браузері або Node.js.

Детальніше про можливості tsc можна дізнатися в офіційній документації TypeScript.

Мітки: