¿Cómo agrego un texto mecanografiado a un proyecto Asp.Net MVC existente?

Question

Me encanta la idea detrás del texto mecanografiado, pero parece que no se me ocurre cómo incluirlo en un proyecto ASP.Net MVC. Ya instalé la extensión de Visual Studio, pero parece que no puedo encontrar un ejemplo o documentación sobre cómo agregar archivos *.ts que se compilan en archivos *.js.

Editar: En realidad, ¿debo replicar la forma en que el ejemplo de Win8 .jsproj incluye y maneja los archivos .ts? ¿O solo funcionará para proyectos HTML/JS Win8?

Answer 1

Advertencia: Esta respuesta ahora es bastante antigua, ya que tanto Typescript como MVC han cambiado significativamente desde esta respuesta. Voy a intentar una actualización más tarde. - Richcoder

Gracias a Sohnee por la respuesta.

Puede agregar archivos de TypeScript a un proyecto existente usando el cuadro de diálogo Agregar> Nuevo elemento. Tenga en cuenta que el elemento 'Archivo de tipo de letra' no se encuentra en el grupo web sino debajo de su elemento primario, en este caso Visual C#.

Esto debería agregar un archivo de TypeScript y Visual Studio hará el resto.

Luego hay que añadir estas líneas al archivo del proyecto:

<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> 

funcionó perfectamente para mí, pero por favor comentar si llegas a tener ningún problema.

Answer 2

Eso es correcto. todo lo que necesita es el objetivo de compilación ms para compilar los archivos .ts en archivos .js. El ejemplo de Win8 muestra un objetivo de beforeBuild para llamar a tsc en todos los archivos que pertenecen a itemGroup TypeScriptCompile, que se define como $ (ProjectDir) ***. Ts (o todos los archivos .ts en su proyecto).

La replicación de este patrón debería funcionar en cualquier proyecto de msbuild, y no solo en los proyectos de Win8.

Este es un ejemplo de lo que estoy hablando: añadir esto a cualquier proyecto msbuild, y que debe estar recopilando cualquier archivo ts en el archivo .js equivialnt cuando su construcción se inicia ..

<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> 

Answer 3

actualización:

Sólo tiene que instalar el plugin Web Essentials 2012, tendrá compilación automática de salvar - para ambos .js y .min.js y una vista dividida ordenado para ver la salida de JavaScript junto a su código mecanografiado.

---

Este es un método crudo He estado usando:

clic derecho sobre el proyecto> Propiedades> Eventos de generación

cuadro PreBuild pega este (de forma recursiva construye todos los archivos .ts en el proyecto):

forfiles /S /P $(ProjectDir) /m *.ts /c "cmd /c tsc @file" 

Para la construcción de archivos de entrada específica:

tsc $(ProjectDir)MyScripts/myfile.ts 

Estoy seguro de que hay una mejor manera de hacerlo.

Answer 4

Lancé un paquete nuget que agrega un archivo de objetivos msbuild a su proyecto. Ejecutará el compilador tsc y limpiará su salida para que pueda hacer doble clic en los errores en Visual Studio y saltar al archivo/línea/columna.

https://www.nuget.org/packages/Sholo.TypeScript.Build

Es necesario configurar la Acción de generación en la ventana de propiedades de 'TypeScriptCompile' para cualquier cosa que usted quiere TSC para compilar. A partir de unos pocos días de retoques con TypeScript, descubrí que los archivos .ts que hacen la referencia deben establecerse en TypeScriptCompile, pero los archivos a los que se hace referencia no deberían hacerlo, pero ymmv. Además, es posible que deba mostrar todos los archivos y agregar el archivo .js original. Si desea agrupar archivos relacionados .ts/.js/.d.ts, eche un vistazo a la extensión VsCommands. El flujo de trabajo también es muy bueno con NetDemon/extensiones similares.

Answer 5

Si está utilizando Bundling and Minification, acabo de lanzar una implementación de IBundleTransform que compila TypeScript para Javascript. Está en GitHub y NuGet (Install-Package TypeScriptBundleTransform). Si todavía no usa Bundling and Minification, ¡vale la pena verlo!

Answer 6

Si está utilizando el Microsoft ASP.NET Web Optimization Framework (también conocido como Agrupamiento y minificación), intente utilizar el Bundle Transformer con el módulo BundleTransformer.TypeScript instalado. Además de la compilación de código TypeScript a JS, también puede producir la minificación del código JS generado mediante el uso de otros módulos del transformador Bundle: BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.Closure, BundleTransformer.JsMin, BundleTransformer.UglifyJs y BundleTransformer.Packer.