visual-studio-2012 - virtualstudio - visual studio core
Uso de TypeScript en un proyecto existente de Visual Studio Web Site (8)
Tengo un proyecto de Visual Studio existente que se configuró como un proyecto de "Sitio web". Puede crear proyectos como este yendo a Archivo-> Nuevo sitio web. Este es un tipo de proyecto diferente a un "Proyecto de aplicación web".
Me gustaría mezclar algo de TypeScript en este proyecto. Sin embargo, no puedo encontrar la manera de instruir a Visual Studio para que "cree" mis archivos .ts y genere archivos .js. Tengo el plugin de VSScript TypeScript, y puedo crear un proyecto de TypeScript, como se describe aquí . Ese proyecto funciona bien, pero eso es más como un "Proyecto de aplicación web". Es un tipo de proyecto diferente a un "Proyecto de sitio web".
Además, cuando creo el archivo .ts, dentro de ese archivo, el editor me da un resaltado de sintaxis de TypeScript e intellisense. Pero nuevamente, no puedo encontrar la manera de compilar el TypeScript a JavaScript.
¿Un poco de ayuda?
Éste ha sido un objetivo en movimiento, pero solo porque el equipo de TypeScript ha estado mejorando la forma en que funciona. He intentado cubrir tantos escenarios como sea posible a continuación, desde el más nuevo hasta el más antiguo.
Lo último en esto es que esto debería funcionar ahora en las últimas versiones de Visual Studio (actualmente v1.4) incluso para proyectos web.
He tomado estas notas abreviadas de mi respuesta mucho más larga sobre la adición de TypeScript a un proyecto existente .
VS 2013 / 0.9.5
Si está usando la Extensión de Visual Studio para 0.9.5 o superior junto con Visual Studio 2013, debería encontrar que configurará automáticamente todo tan pronto como agregue el primer archivo de TypeScript.
Auto TypeScript-isation no funcionó?
La configuración automática solo agrega algunas líneas; puede hacerlo manualmente:
<ItemGroup>
<TypeScriptCompile Include="Scripts/app.ts" />
</ItemGroup>
<Import Project="$(MSBuildExtensionsPath32)/Microsoft/VisualStudio/v$(VisualStudioVersion)/TypeScript/Microsoft.TypeScript.targets" Condition="Exists(''$(MSBuildExtensionsPath32)/Microsoft/VisualStudio/v$(VisualStudioVersion)/TypeScript/Microsoft.TypeScript.targets'')" />
VS 2012 / 0.9.x
La siguiente configuración de archivo de proyecto debería funcionar:
<ItemGroup>
<TypeScriptCompile Include="app.ts" />
</ItemGroup>
<PropertyGroup Condition="''$(Configuration)'' == ''Debug''">
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptRemoveComments>false</TypeScriptRemoveComments>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
<TypeScriptModuleKind>AMD</TypeScriptModuleKind>
</PropertyGroup>
<PropertyGroup Condition="''$(Configuration)'' == ''Release''">
<TypeScriptTarget>ES5</TypeScriptTarget>
<TypeScriptRemoveComments>true</TypeScriptRemoveComments>
<TypeScriptSourceMap>false</TypeScriptSourceMap>
<TypeScriptModuleKind>AMD</TypeScriptModuleKind>
</PropertyGroup>
<Import Project="$(VSToolsPath)/TypeScript/Microsoft.TypeScript.targets" Condition="Exists(''$(VSToolsPath)/TypeScript/Microsoft.TypeScript.targets'')" />
¿Aún más viejo configurado?
He encontrado que la manera más confiable de agregar TypeScript a un proyecto existente es agregar lo siguiente al archivo del proyecto:
<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" @(TypeScriptCompile ->''"%(fullpath)"'', '' '')" IgnoreExitCode="true" />
</Target>
Aquí también puede agregar indicadores opcionales, como --module amd :
<Exec Command=""$(PROGRAMFILES)/Microsoft SDKs/TypeScript/0.8.0.0/tsc" --module amd @(TypeScriptCompile ->''"%(fullpath)"'', '' '')" IgnoreExitCode="true" />
A partir de la versión 0.8.2, lanzada el 21 de enero de 2013, el plugin VS2012 TypeScript admite compilación previa sin utilizar WebEssentials. Vaya a Herramientas> Opciones> Editor de textos> TypeScript> sección Proyecto y marque la casilla "Compilar automáticamente ...".
Si desea compilar todos sus archivos .ts en un solo archivo .js como parte de su proceso de compilación (que probablemente debería), asegúrese de que el script app.ts tenga <referencias> a todos los archivos que deberían incluirse. y agrega el siguiente paso de precompilación a tu proyecto:
"C:/Program Files (x86)/Microsoft SDKs/TypeScript/tsc.exe" --out app.js app.ts
(Especificar el parámetro --out le dice a tsc que incluya todos los archivos a los que se hace referencia).
Como no hay un archivo de proyecto, es posible que deba volver a ejecutar el compilador de TypeScript "manualmente".
Abra un símbolo del sistema de Visual Studio (Inicio -> Programas -> Microsoft Visual Studio 20xx -> Herramientas de Visual Studio -> Símbolo del sistema de desarrollador).
Ejecute: tsc your_input_file.ts --target ES5
Para suministrar múltiples archivos .ts, use un archivo de texto con el parámetro @args_file_name.
Cuando te canses de eso, ponlo todo en un archivo por lotes.
Cuando se cansa de usar un archivo por lotes, conviértalo a una Aplicación Web y modifique el archivo .proj según la respuesta de Sohnee.
Compruebe si sus archivos .ts en propiedades están asociados con TypeScriptCompiler.
Tenga en cuenta que abrir un archivo .ts en VS en el llamado proyecto virtual no es lo mismo que tener una referencia al archivo en el proyecto web VS. El primero no le permitirá establecer acción de compilación en él. Mientras que otro lo hará.
PD. Obtenga el complemento Web Essentials VS para obtener transformaciones en el almacenamiento de archivos, la división ts / js de texteditor y el minimizador incorporado.
Editar : Sí, no me di cuenta de que no hay ninguna acción de construcción disponible con otros proyectos al principio ... Pero bueno, empujé a Sohne en la dirección correcta.
He leído las publicaciones anteriores cuando trato de usar los archivos * .aspx y * .ts en un proyecto VS-2015. Inintencionalmente encontré una receta simple y clara "Cómo combinar * archivos de código .ASPX y * .TS en un proyecto de Visual Studio" y quiero compartir esta solución para todos. Disculpe si es demasiado fácil.
Para usar los archivos * .aspx y * .ts en un proyecto VS, cree un nuevo proyecto de tipo "Aplicación web ASP.NET". Luego, en el siguiente paso, seleccione "Vacío" en el panel superior "Plantillas ASP.NET 4.5.2" y "Formularios web" y "API web" en el panel "Agregar carpetas y referencias principales para:". Agrego dos imágenes con estos pasos.
Además, tengo un error de script cuando uso variables de tipo JQuery en mi código de TypeScript. Para usar el tipo JQuery, necesito agregar tres carpetas anidadas en el proyecto: Scripts / typings / jquery y agregar el archivo jquery.d.ts con las definiciones de tipo para jQuery. Creo que los detalles son fáciles de buscar en Google.
Gracias por mi amigo, que me ayudó a encontrar esta solución. primer paso del proyecto de creación
Josh, estoy usando Visual Studio 2012 Express para Web y lo que me he dado cuenta es que cada vez que guardas el archivo .ts, automáticamente genera el .js.
Revise su carpeta .ts cada vez que guarde un archivo y confirme si esto no le sucede a usted también.
Para que esto funcione en mi configuración, tengo marcada la casilla de verificación "Compilar automáticamente archivos de TypeScript que no son parte de un proyecto".
Pero esto no fue suficiente. Para que la compilación automática funcione en un proyecto de sitio web, tuve que crear un archivo tsconfig.json con las siguientes configuraciones:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"alwaysStrict": true,
"module": "amd"
},
"compileOnSave": true,
"exclude": [
"node_modules",
"wwwroot",
"packages"
]
}
El "compileOnSave": true es el más importante aquí. Es lo que desencadena la compilación automática.
Versión de mecanografiado 2.1.5 en Visual Studio 2017
Visual Studio ahora admite "compilar en guardar" para archivos de TypeScript. Estoy usando Visual Studio 2013 Update 2 , y puedo activarlo en un proyecto de sitio web yendo a Herramientas -> Opciones -> Editor de texto -> TypeScript -> Proyecto, y marcando la casilla "Compilar automáticamente archivos de TypeScript que son no es parte de un proyecto ". No sé por qué está etiquetado así, porque está compilando claramente archivos que son parte de mi proyecto ...
Muchas de las otras respuestas a esto no son aplicables a los proyectos del sitio web, porque no se puede conectar al proceso de compilación. Con un proyecto de sitio web, no hay ningún archivo csproj o vbproj , ya que IIS maneja la compilación, no Visual Studio.
Si está utilizando un proyecto de sitio web, y "compilar al guardar" no funciona para usted, existen solo algunas alternativas:
1) Use el compilador de línea de comando TSC para compilar manualmente su código.
2) Cree una herramienta personalizada para compilar manualmente sus archivos. Puede configurar esto para usar en Visual Studio.
3) Cree una página .aspx de "compilación según demanda" que compilará TypeScript y lo devolverá como JavaScript.
4) Utilice el proyecto de compilación de JavaScript de TypeScript para automáticamente su código en el navegador. Esto le proporciona la "compilación a petición" que normalmente viene con los Proyectos del sitio web.
Antes de "compilar en guardar" estaba trabajando en VS, estaba usando la compilación de TypeScript. Ahora estoy felizmente usando "compilar en guardar".