Параметри компіляції noEmitOnError і target

У минулій темі було розглянуто, що не можна в одній області видимості кілька разів визначити змінну з одним і тим самим ім'ям або що значення константи не можна змінити.

Але давайте розглянемо наступну невелику програму на TypeScript:

let x = 10;
console.log(x); // 10
 
var x = 20; // ! Помилка
console.log(x); // Але консоль виведе 20
 
const t = 50;
t = 256; // ! Помилка
console.log(t); // Але консоль виведе 256

Під час компіляції очікувано ми побачимо низку помилок:

Помилки компіляції в TypeScript

Проте, якщо застосовуються налаштування компіляції за замовчуванням, javascript-файл цілком нормально скомпілюється, зокрема, він матиме такий зміст:

var x = 10;
console.log(x); // 10
var x = 20; // ! Помилка
console.log(x); // Але консоль виведе 20
var t = 50;
t = 256; // ! Помилка
console.log(t); // Але консоль виведе 256

І в підсумку в консолі браузера ми побачимо результат роботи цього скрипта:

Але для компілятора TS можна за допомогою параметра --noEmitOnError можна вказати, що не треба генерувати файл javascript, якщо під час компіляції виникли помилки. Цей параметр можна вказати безпосередньо під час виклику компілятора в консолі:

tsc --noEmitOnError app.ts
Або у файлі конфігурації tsconfig.json для налаштування "noEmitOnError" вказати значення true:

{
    "compilerOptions": {
        "target": "es5",
        "noEmitOnError": true,
        "outFile": "app.js"
    }
}

target

Виправимо попередній приклад, щоб він проходив компіляцію

let x = 10;
console.log(x); // 10
 
var y = 20;
console.log(y); // 20
 
const t = 50;
console.log(t); // 50

Під час компіляції з налаштуваннями за замовчуванням ми отримаємо такий файл javascript:

var x = 10;
console.log(x); // 10
var y = 20;
console.log(y); // 20
var t = 50;
console.log(t); // 50

Ми бачимо, що для визначення всіх значень застосовується ключове слово var, незважаючи на те, що навіть не найсучасніші браузери вже давно підтримують оператори let і const. Але компілятор typescript за замовчуванням компілює в стандарт ES3, для якого існує тільки оператор var. Але var/let/const - це окремі випадки. Як мінімум, переважна частина стандарту ES2015 вже давно підтримується в багатьох поширених браузерах, свій шлях прорубують нові стандарти. І якщо ми хочемо, щоб компілятор використовував сучасніший стандарт, то нам треба задати під час компіляції параметр -target/-t.

Наприклад, знову візьмемо файл, який містить помилки:

let x = 10;
console.log(x); // 10
 
var x = 120; // ! Помилка
console.log(x); // Але консоль виведе 20
 
const t = 50;
t = 256; // ! Помилка
console.log(t); // Але консоль виведе 256

Скомпілюємо в стандарт "ES2015":

Тут не вказано параметр "noEmitOnError", тож компілятор повідомить про помилки, однак файл все одно скомпілює. Скомпільований файл практично не відрізнятиметься від коду на typescript:

let x = 10;
console.log(x); // 10
var x = 120; // ! Помилка
console.log(x); // Але консоль виведе 20
const t = 50;
t = 256; // ! Помилка
console.log(t); // Але консоль виведе 256

Однак у браузері, який підтримує let і const, все одно ми зіткнемося з помилкою:

Також можна задати це налаштування у файлі tsconfig.json:

{
    "compilerOptions": {
        "target": "es2015",
        "noEmitOnError": true,
        "outFile": "app.js"
    }
}