Встановлення та компіляція з командного рядка

Щоб почати працювати з TypeScript, встановимо необхідний інструментарій. Встановити TypeScript можна двома способами: через пакетний менеджер NPM або як плагін до Visual Studio.

Встановлення через NPM

Для встановлення через NPM спочатку, звісно, необхідно встановити Node.js (якщо його раніше не було встановлено). Після встановлення Node.js необхідно запустити таку команду в командному рядку (Windows) або терміналі (Linux):

npm install -g typescript

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

sudo npm install -g typescript

Цілком можливо, що раніше вже було встановлено TS. У цьому разі його можна оновити до останньої версії за допомогою команди

npm update -g typescript

Для перевірки версії необхідно ввести команду

tsc -v

Компіляція програми

Для початку створимо каталог додатка. У моєму випадку це буде папка за шляхом C:/typescript. У каталог додамо файл index.html. Відкриємо цей файл у будь-якому текстовому редакторі та визначимо в ньому такий код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ITshnyk</title>
</head>
<body>
    <h2 id="header"></h2>
    <script src="app.js"></script>
</body>
</html>

Це звичайний файл html, у якому визначено порожній заголовок - елемент <h2> - у нього ми будемо виводити деякий вміст. І також на веб-сторінці підключається файл app.js.

Тепер у тому ж каталозі створимо файл app.ts. Причому саме app.ts, а не app.js, тобто файл коду typescrypt. Це також звичайний текстовий файл, який має розширення .ts. І в app.ts визначимо такий зміст:

class User{
    name : string;
    constructor(_name:string){
        this.name = _name;
    }
}
const tom : User = new User("Том");
const header = this.document.getElementById("header");
header.innerHTML = "Привіт " + tom.name;

Що тут відбувається? Спочатку визначає клас User - шаблон даних, які будуть використовуватися на веб-сторінці. Цей клас має поле name, яке представляє тип string, тобто рядок. Для передачі даних цьому полю визначено спеціальний метод - constructor, який приймає через параметр _name деякий рядок і передає його в поле name:

class User{
    name : string;
    constructor(_name:string){
        this.name = _name;
    }
}

Далі ми детальніше розберемо створення та використання класів. Далі створюємо константу tom, яка представляє цей клас:

const tom : User = new User("Том");

Інакше кажучи, константа tom представляє деякого користувача, у якого ім'я "Том".

Потім отримуємо елемент з id header на веб-сторінці в однойменну константу header:

const header = this.document.getElementById("header");

Тобто цей елемент представлятиме визначений на веб-сторінці index.html заголовок <h2>.

Далі за допомогою властивості innerHTML змінюємо вміст елемента:

header.innerHTML = "Привіт " + tom.name;

У цьому випадку властивості innerHTML передається рядок, до якого додається значення властивості tom.name. Тобто ми очікуємо, що в заголовок на веб-сторінці буде виводитися створюваний тут рядок.

Збережемо і скомпілюємо цей файл. Для цього в командному рядку/терміналі за допомогою команди cd перейдемо до каталогу, де розташовано файл app.ts (у моєму випадку це C:\typescript). І для компіляції виконаємо таку команду:

tsc app.ts

Після компіляції в каталозі проєкту створюється файл app.js, який матиме такий вигляд:

var User = /** @class */ (function () {
    function User(_name) {
        this.name = _name;
    }
    return User;
}());
var tom = new User("Том");
var header = this.document.getElementById("header");
header.innerHTML = "Привіт " + tom.name;

І тепер ми можемо кинути веб-сторінку index.html у браузер і побачити результат роботи написаного на TypeScript коду:

Посібник по TypeScript

Встановлення та компіляція з командного рядка

Встановлення через NPM