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) В файл проекта <ProjectName>.csproj добавить следующий код:
<?xml version="1.0" encoding="utf-8"?>
<Project>
...
<Target Name="BeforeBuild">
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
</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 в своих проектах.