Как добавить typescript в существующий проект Asp.Net MVC?

Мне нравится идея typescript, но я не могу понять, как включить ее в проект ASP.Net MVC. Я уже установил расширение Visual Studio, но я не могу найти пример или документацию о том, как добавить файлы *.ts, которые скомпилируются в файлы *.js.

Изменить: На самом деле, следует ли повторить то, как в примере Win8 .jsproj включены и обрабатываются файлы .ts? Или это будет работать только для проектов HTML/JS Win8?

Ответы

Ответ 1

Предупреждение: Этот ответ теперь довольно устарел, так как оба 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="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />
 </Target>

Он отлично работал у меня, но, пожалуйста, прокомментируйте, если у вас возникнут проблемы.

Ответ 2

Это правильно. все, что вам нужно, это цель сборки 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="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

Ответ 3

Я собрал пакет 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/аналогичными расширениями.

Ответ 4

Если вы используете Bundling and Minification, я только что выпустил реализацию IBundleTransform, которая компилирует TypeScript в Javascript. Он находится на GitHub и NuGet (Install-Package TypeScriptBundleTransform). Если вы еще не используете Bundling and Minification, это стоит посмотреть!

Ответ 5

обновление:

Просто установите плагин 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

Я уверен, что есть лучший способ сделать это.

Ответ 6

Если вы используете Структуру веб-оптимизации 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.