Andrey on .NET

Microsoft выпустил новый язык для разработки веб-приложений – TypeScript. Давайте посмотрим что он из себя представляет и как его можно использовать в ASP.NET MVC веб-приложениях.

Что такое TypeScript?

В первую очередь необходимо отметить, что TypeScript это не самостоятельный язык. Он является развитием знакомого всем JavaScript и предоставляет возможности, которых в нем сильно не хватает:

• строгая типизация;
• интерфейсы;
• модули (аналог namespace в C#);
• классы в стиле C#;

Все это наглядно демонстрирует следующий код:

// Interface
interface IPoint {
    getDist(): number;
}

// Module
module Shapes {

    // Class
    export class Point implements IPoint {
        // Constructor
        constructor (public x: number, public y: number) { }

        // Instance member
        getDist() { return Math.sqrt(this.x * this.x + this.y * this.y); }

        // Static member
        static origin = new Point(0, 0);
    }

}

// Local variables
var p: IPoint = new Shapes.Point(3, 4);
var dist = p.getDist();

Обратите внимание, что конструктор класса Point типизированный и принимает два числа. Попытка подставить в качестве любого из параметров строковое значение приведет к ошибке (что будет отражено как в редакторе Visual Studio 2012, так и при сборке проекта).

При компиляции код на TypeScript превращается в обычный JavaScript, который и используется на страницах веб-приложения. Таким образом решен вопрос совместимости с существующими браузерами.

Для Visual Studo 2012 доступно дополнение, которое позволяет при редактировании исходного кода использовать такие возможности как:

• статический анализ кода;
• символьная навигация;
• автодополнение имен функций;
• рефакторинг.

Также существует поддержка для следующих редакторов: Emacs, Sublime Text и Vim.

На официальном сайте TypeScript расположена интересная “игровая площадка”. Она позволяет ввести TypeScript код и посмотреть какой JavaScript будет для него сгенерирован.

Исходный код проекта доступен на CodePlex: http://typescript.codeplex.com/

Добавляем поддержку TypeScript в проект

Для того, чтобы использовать TypeScript в своем веб-проекте необходимо:

1) Установить дополнение для Visual Studio 2012, eсли это еще не было сделано. Оно уже содержит компилятор TypeScript в JavaScript.

2) В файл проекта .csproj добавить следующий код:

<?xml version="1.0" encoding="utf-8"?>
<Project>
  ... 

  <Target Name="BeforeBuild">
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
  </Target>

</Project>

Обратите внимание, что номер версии указан в пути до компилятора. Возможно, что при выходе обновлений его придется модифицировать вручную.

3) Теперь можно добавлять в проект ts-файлы, используя пункт меню New Item. Если в нем отсутствуют файл файлы типа TypeScript, то необходимо закрыть Visual Studio и самостоятельно запустить файл TypeScriptLanguageService.vsix из папки *$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0* для установки расширения.

Небольшой пример

Давайте в ASP.NET MVC 4 проект добавим файл greeter.ts c кодом, который добавляет на страницу кнопку и обрабатывает её нажатие:

class Greeter {
    greeting: string;

    constructor (message: string) {
        this.greeting = message;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

var greeter = new Greeter("world");

var button = document.createElement('button');
button.innerText = "Say Hello";

button.onclick = function () {
    alert(greeter.greet())
}

document.body.appendChild(button);

После компиляции будет создан greeter.js:

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();
var greeter = new Greeter("world");
var button = document.createElement('button');
button.innerText = "Say Hello";
button.onclick = function () {
    alert(greeter.greet());
};
document.body.appendChild(button);

Для подключения созданного кода на страницу достаточно сослаться на js-файл в нужном Представлении:

<script src="~/Scripts/greeter.js"></script>

В завершении можно сказать, что первый шаг по модернизации JavaScript оказался успешным. Ждем продолжения и используем TypeScript в своих проектах.