Pregunta

Me encanta la idea detrás del mecanografiado, pero parece que no puedo entender 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 *.ts archivos que se compilan en *.js archivos.

Editar:En realidad, ¿debería replicar la forma en que se muestra el ejemplo de Win8? .jsproj incluye y manijas .ts archivos?¿O eso solo funcionará para proyectos HTML/JS Win8?

¿Fue útil?

Solución

Advertencia: Esta respuesta ahora está bastante anticuada, ya que tanto Typecript como MVC han cambiado significativamente desde esta respuesta.Intentaré una actualización más tarde.- Codificador rico

Gracias a sohnee por la respuesta.

Puede agregar archivos TypeScript a un proyecto existente usando el cuadro de diálogo Agregar > Nuevo elemento.exampleImageTenga en cuenta que el elemento 'Archivo mecanografiado' no reside en el grupo Web sino en su padre, en este caso Visual C#.

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

Luego necesitas agregar 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 comente si tiene algún problema.

Otros consejos

Eso es correcto.todo lo que necesita es el objetivo de compilación de ms para convertir los archivos .ts en archivos .js.El ejemplo de Win8 muestra un objetivo 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 de su proyecto).

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

Aquí hay una muestra de lo que estoy hablando:Agregue esto a cualquier proyecto de msbuild y debería compilar cualquier archivo .ts en el archivo .js equivalente cuando comience la compilación.

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

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

Debe configurar la acción de compilación en la ventana de propiedades en 'TypeScriptCompile' para cualquier cosa que desee que tsc compile.Después de unos días de jugar con TypeScript, descubrí que los archivos .ts a los que se hace referencia deben configurarse en TypeScriptCompile, pero los archivos a los que solo se hace referencia no, sino ymmv.Además, es posible que necesite Mostrar todos los archivos y agregar el archivo .js original.Si desea agrupar archivos .ts/.js/.d.ts relacionados, eche un vistazo a la extensión VsCommands.El flujo de trabajo también es bastante bueno con NetDemon/extensiones similares.

Si estas usando Agrupación y minificación, Acabo de publicar una implementación de IBundleTransform que compila TypeScript en Javascript.Está en GitHub y NuGet (paquete de instalación TypeScriptBundleTransform).Si aún no estás utilizando Bundling y Minification, ¡vale la pena echarle un vistazo!

actualizar:

Solo instala Fundamentos Web 2012 complemento, tendrá una compilación automática al guardar, tanto para .js como para .min.js y una vista dividida ordenada para ver la salida de JavaScript junto a su código TypeScript.


Este es un método burdo que he estado usando:

Haga clic derecho en su Proyecto > Propiedades > Crear eventos

En el cuadro PreBuild, pegue esto (compila recursivamente todos los archivos .ts en el proyecto):

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

Para crear un archivo de entrada específico:

tsc $(ProjectDir)MyScripts/myfile.ts

Estoy seguro de que hay una mejor manera de hacerlo.

Si estás usando el Marco de optimización web de Microsoft ASP.NET (también conocido como agrupación y minificación), luego intente usar el Transformador de paquete con módulo instalado PaqueteTransformer.TypeScript.Además de compilar el código TypeScript en JS, también puede minimizar el código JS generado utilizando otros módulos del Bundle Transformer: PaqueteTransformer.MicrosoftAjax, PaqueteTransformer.Yui, PaqueteTransformer.Cierre, PaqueteTransformer.JsMin, PaqueteTransformer.UglifyJs y PaqueteTransformer.Packer.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top