GrabDuck

TypeScript | Первое приложение в Visual Studio 2015

:

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

Итак, создадим первое приложение на TypeScript в Visual Studio 2015 (или 2013). При создании нового проекта нужно выбрать в левом меню TypeScript, а среди шаблонов проекта - шаблон HTML Application with TypeScript:

Первое приложение на TypeScript

Также здесь можно установить название проекта и путь к нему на жестком диске. Как видно на скриншоте, в моем случае проект будет называться HelloApp. И после завершения всех установок нажмем на кнопку OK.

После этого создается проект, который уже имеет некоторую структуру:

Структура проекта TypeScript

Здесь уже есть четыре файла:

  • app.css: файл стилей

  • app.ts: файл с кодом на TypeScript. Все файлы TypeScript имеют расширение .ts

  • index.html: веб-страница с основным содержимым

  • web.config: файл конфигурации проекта

Однако если мы откроем файл index.html, то увидим в нем ссылку на файл скриптов app.js:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content"></div>
</body>
</html>

Хотя на самом деле никакого файла app.js в проекте нет - он будет компилироваться из файла app.ts. Файл app.ts представляет код на TypeScript и по умолчанию выглядит так:

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor(element: HTMLElement) {
        this.element = element;
        this.element.innerHTML += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }

    start() {
        this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
    }

    stop() {
        clearTimeout(this.timerToken);
    }

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

Не будем пока подробно разбирать, что делается в этом файле. Но если вкратце, здесь определяется класс Greeter со свойствами и методами, суть которых заключается в добавлении на веб-страницу новых элементов. А в функции window.onload, вызываемой при загрузке страницы, используется функционал этого класса.

Теперь запустим приложение в браузере, нажав на F5:

Приложение на TypeScript в Visual Studio 2015

При запуске запускается интегрированный в Visual Studio веб-сервер IIS Express, на котором разворачивается созданный нами проект. Поэтому в браузере мы можем обращаться к файлам проекта через localhost.

И если после запуска откроем папку проекта на жестком диске, то увидим там файл app.js.