

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

Чтобы начать работать с 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 в браузер:

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

Ссылки¶

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