Установка и компиляция из командной строки

Последнее обновление: 09.05.2021

Чтобы начать работать с 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>Metanit.com</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
Компиляция TypeScript из командной строки

После компиляции в каталоге проекта создается файл 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;
Первое приложение на TypeScript

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

Начало работы с TypeScript

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850