TypeScript – вступ та початок роботи

TypeScript – є розширеною версією JavaScript, тобто містить в собі все те саме, що і JavaScript, але з деякими доповненнями.

Однією з головних причин використання TypeScript – є можливість додати статичну типізацію до JavaScript. Тип змінної зі статичною типізацією, не може бути змінено після її оголошення, що може запобігти значній кількості помилок. В той час як JavaScript – динамічно типізована мова, тобто тип змінної може змінюватися, після її оголошення. Наприклад:

// JavaScript
let value = "ok";
value = 100; 
// тип змінної value змінюється з рядка на число, без жодних проблем

// TypeScript
let value = "ok";
value = 100; 
// ERROR - тип змінної value не може бути змінений

TypeScript не сприймається браузерами, тому його потрібно скомпілювати в JavaScript за допомогою TypeScript Compiler (TSC).

Встановлення TypeScript Compiler (TSC)

Попередньо слід переконатись, що Node.js встановлено на вашому комп’ютері, виконавши в терміналі команду:

node -v

В разі відсутності може бути корисним ознайомитись: Встановлення Node.js та NPM на Windows

Якщо Node.js вже на борту, наступним кроком потрібно встановити компілятор TypeScript командою:

npm i -g typescript

Перевірити коректність встановлення можна командою:

tsc -v

Компіляція TypeScript в JavaScript

Файли TypeScript мають розширення .ts, тож для прикладу створюю файл script.ts, та пишу в ньому деякий код (поки не важливо на JavaScript чи TypeScript):

let id = 5;
let firstName = 'Jhon';

Для того щоб скомпілювати цей код в JavaScript, в директорії з файлом потрібно виконати команду:

tsc script

Після чого буде згенеровано файл script.js (або оновлено вже існуючий) з JavaScript кодом, на основі файлу script.ts:

Також є можливість задати іншу назву для js файлу, скориставшись опцією –outfile, наприклад:

tsc script.ts --outfile file-name.js

Якщо потрібно, щоб TSC автоматично робив перекомпіляцію файлів TypeScript, після внесення змін до них, слід додати прапор “watch” (-w):

tsc script -w

Цікава особливість TypeScript – він повідомляє про помилки, під час написання коду в текстовому редакторі, але все одно компілює код у JavaScript – незалежно від того, є в ньому помилки, чи ні.

Наступний приклад викликає помилку TypeScript:

let id = 5;
let firstName = 'Jhon';
id = '5';

Однак, якщо спробувати скомпілювати код за допомогою tsc script, він скомпілюється, незважаючи на помилку:

TypeScript припускає, що розробник знає більше, тож попереджає про помилку, але робити з нею щось чи ні – вирішувати вам.

Файл конфігурації TypeScript

Файл конфігурації TypeScript повинен знаходитись в кореневій директорії проекту. В цьому файлі можна вказати опції компілятора, встановити наскільки суворо TypeScript має робити перевірки в проекті.

Для генерації конфігураційного файлу, перебуваючи в терміналі в кореневій директорії проекту, слід виконати наступну команду:

tsc --init

Після цього, в директорії де було запущено команду, повинен з’явитись файл tsconfig.json:

Файлу tsconfig.json може виконувати наступні завдання:

  • встановлює кореневий каталог проекту TypeScript
  • виконує налаштування параметрів компіляції
  • визначає файли проекту

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

Якщо компілятору передаються назви вхідних файлів (наприклад – tsc script), файл tsconfig.json ігнорується.

Повний перелік застосовуваних у tsconfig.json опцій, можна переглянути в документації:

Documentation tsconfig

Мітки: