Установка и компиляция из командной строки¶
Чтобы начать работать с TypeScript, установим необходимый инструментарий. Установить TypeScript можно двумя способами: через пакетный менеджер NPM или как плагин к Visual Studio
Установка через NPM¶
Для установки через NPM вначале естественно необходимо установить Node.js (если он ранее не был установлен). После установки Node.js необходимо запустить следующую команду в командной строке (Windows) или терминале (Linux):
npm install -g typescript
При установке на MacOS также требуется ввести команду sudo
. При вводе данной команды терминал запросит логин и пароль пользователя для установки пакета:
sudo npm install -g typescript
Вполне возможно, что ранее уже был установлен TypeScript. В этом случае его можно обновить до последней версии с помощью команды
npm update -g typescript
Для проверки версии необходимо ввести команду
tsc -v
Установка в качестве плагина Visual Studio¶
Если мы используем Visual Studio, то при ее установке автоматически устанавливаются все необходимые средства для работы с TS, и нам не надо предпринимать никаких дополнительных действий.
Так, после установки средств разработки для TypeScript по пути C:\Program Files (x86)\Microsoft SDKs\TypeScript\[номер_версии]
мы можем увидеть все установленные файлы, в том числе и сам файл компилятора tsc.exe
.
Компиляция приложения¶
Для начала создадим каталог приложения. В моем случае это будут папка по пути C:/typescript
. В каталог добавим файл index.html
. Откроем этот файл в любом текстовом редакторе и определим в нем следующий код:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>TypeScript HTML App</title> </head> <body> <h1>TypeScript HTML App</h1> <div id="content"></div> <script src="app.js"></script> </body> </html>
Это обычный файл html, в котором подключается файл app.js. Теперь в том же каталоге создадим файл app.ts. Причем именно app.ts, а не app.js, то есть файл кода typescrypt. Это также обычный текстовый файл. И в нем определим следующее содержание:
var el = this.document.getElementById('content') class User { name: string age: number constructor(_name: string, _age: number) { this.name = _name this.age = _age } } var tom: User = new User('Том', 29) el.innerHTML = 'Имя: ' + tom.name + ' возраст: ' + tom.age
Здесь получаем элемент с id=content, создаем класс User. Далее мы разберем создание и использование классов. Создаем объект этого класса с именем Том и возрастом в 29 лет. И выводим данные объекта в элемент. При сохранении файла лучше выбирать кодировку utf-8.
Теперь скомпилируем этот файл. Для этого в командной строке/терминале с помощью команды cd перейдем к каталогу, где расположен файл app.ts (в моем случае это C:\typescript). И для компиляции выполним следующую команду:
tsc app.ts
После компиляции в каталоге проекта создается файл app.js, который будет выглядеть так:
var el = this.document.getElementById('content') var User = (function() { function User(_name, _age) { this.name = _name this.age = _age } return User })() var tom = new User('Том', 29) el.innerHTML = 'Имя: ' + tom.name + ' возраст: ' + tom.age
И теперь мы можем кинуть веб-страницу index.html в браузер: