Мне нравится идея typescript, но я не могу понять, как включить ее в проект ASP.Net MVC. Я уже установил расширение Visual Studio, но я не могу найти пример или документацию о том, как добавить файлы *.ts, которые скомпилируются в файлы *.js.
Изменить: На самом деле, следует ли повторить то, как в примере Win8 .jsproj включены и обрабатываются файлы .ts? Или это будет работать только для проектов HTML/JS Win8?
Предупреждение: Этот ответ теперь довольно устарел, так как оба Typescript и MVC значительно изменились после этого ответа. Я попробую обновление позже. - Richcoder
Благодаря Sohnee для ответа.
Вы можете добавить файлы Typescript в существующий проект, используя диалог "Добавить > Новый элемент".
Обратите внимание, что элемент Typescript Файл не находится в группе Web, но под ним родительский в этом случае Visual С#.
Это должно добавить файл Typescript, а Visual Studio сделает все остальное.
Затем вам нужно добавить эти строки в файл проекта:
<ItemGroup>
<AvailableItemName Include="TypeScriptCompile" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="BeforeBuild">
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" IgnoreExitCode="true" />
</Target>
Он отлично работал у меня, но, пожалуйста, прокомментируйте, если у вас возникнут проблемы.
Это правильно. все, что вам нужно, это цель сборки ms для сборки файлов .ts в файлы .js. В примере Win8 показана цель beforeBuild для вызова tsc для всех файлов, принадлежащих itemGroup TypeScriptCompile, которая определяется как $(ProjectDir) ***. Ts (или все файлы .ts в вашем проекте).
Репликация этого шаблона должна работать в любом проекте msbuild, а не только в проектах Win8.
Вот пример того, о чем я говорю: Добавьте это в любой проект msbuild, и вы должны скомпилировать любой файл .ts в файл equivialnt.js, когда начнется сборка.
<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="TypeScriptCompile" BeforeTargets="Build">
<Message Text="Compiling TypeScript files" />
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
</Target>
Я собрал пакет nuget, который добавляет файл целей msbuild в ваш проект. Он запустит tsc-компилятор и очистит его вывод, чтобы вы могли дважды щелкнуть по ошибкам в Visual Studio и перейти к файлу/строке/столбцу.
https://www.nuget.org/packages/Sholo.TypeScript.Build
Вам нужно установить действие Build в окне свойств на "TypeScriptCompile" для всего, что вы хотите, чтобы компилировать tsc. С нескольких дней возиться с TypeScript, я обнаружил, что файлы .ts, которые делают ссылку, должны быть установлены в TypeScriptCompile, но файлы, на которые ссылаются только ссылки, не должны, а ymmv. Кроме того, вам может потребоваться показать все файлы и добавить оригинальный .js файл. Если вы хотите группировать связанные файлы .ts/.js/.d.ts вместе, посмотрите на расширение VsCommands. Workflow также очень хорош с NetDemon/аналогичными расширениями.
Если вы используете Bundling and Minification, я только что выпустил реализацию IBundleTransform, которая компилирует TypeScript в Javascript. Он находится на GitHub и NuGet (Install-Package TypeScriptBundleTransform). Если вы еще не используете Bundling and Minification, это стоит посмотреть!
обновление:
Просто установите плагин Web Essentials 2012, у вас будет автоматическая компиляция при сохранении - для .js и .min.js и аккуратного разделения чтобы увидеть результат JavaScript рядом с вашим кодом TypeScript.
Это грубый метод, который я использовал:
Щелкните правой кнопкой мыши свой проект > Свойствa > События сборки
Поле PreBuild вставляет это (рекурсивно строит все файлы .ts в проекте):
forfiles /S /P $(ProjectDir) /m *.ts /c "cmd /c tsc @file"
Для создания конкретного файла входа:
tsc $(ProjectDir)MyScripts/myfile.ts
Я уверен, что есть лучший способ сделать это.
Если вы используете Структуру веб-оптимизации Microsoft ASP.NET (также называемую Bundling and Minification), попробуйте использовать Bundle Transformer с установленным модулем BundleTransformer.TypeScript. В дополнение к компиляции кода TypeScript в JS вы также можете производить минимизацию сгенерированного JS-кода, используя другие модули Transcender Bundle: BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.Closure, BundleTransformer.JsMin, BundleTransformer.UglifyJs и BundleTransformer.Packer.