Utilisation de TypeScript dans un projet de site Web Visual Studio existant
J'ai un projet Visual Studio existant qui a été configuré en tant que projet "Site Web". Vous pouvez créer des projets comme celui-ci en allant dans Fichier-> Nouveau site Web. Il s'agit d'un type de projet différent de celui d'un "projet d'application Web".
Je voudrais mélanger un peu de TypeScript sur ce projet. Cependant, je ne vois pas comment demander à Visual Studio de "construire" mes fichiers .ts et de générer des fichiers .js. J'ai le plugin TypeScript VS2012, et je peux créer un projet TypeScript, comme décrit ici . Ce projet fonctionne bien, mais cela ressemble davantage à un "projet d'application Web". C'est un type de projet différent de celui d'un "projet de site Web".
De plus, lorsque je crée un fichier .ts, l'éditeur me donne à l'intérieur de ce fichier la coloration syntaxique TypScript et intellisense. Mais encore une fois, je ne vois pas comment le faire pour compiler le TypeScript en JavaScript.
Un peu d'aide?
Visual Studio prend désormais en charge la "compilation à l'enregistrement" pour les fichiers TypeScript. J'utilise Visual Studio 2013 Update 2 , et je peux l'activer dans un projet de site Web en allant dans Outils -> Options -> Editeur de texte -> TypeScript -> Projet et en cochant la case "Compiler automatiquement". Les fichiers TypeScript qui ne font pas partie d’un projet. " Je ne sais pas pourquoi c'est étiqueté comme ça, parce qu'il s'agit clairement de compiler des fichiers qui font partie de mon projet ...
La plupart des autres réponses à cette question ne s'appliquent pas aux projets de site Web, car vous ne pouvez pas vous connecter au processus de construction. Avec un projet de site Web, il n'y a pas de fichier csproj ou vbproj , car la génération est gérée par IIS et non par Visual Studio.
Si vous utilisez un projet de site Web et que "compiler à l'enregistrement" ne fonctionne pas pour vous, il n'y a que quelques alternatives:
1) Utilisez le compilateur TSC en ligne de commande pour compiler manuellement votre code.
2) Créez un outil personnalisé pour compiler manuellement vos fichiers. Vous pouvez configurer cela pour une utilisation dans Visual Studio.
3) Créez une page .aspx de "compilation à la demande" qui compilera le TypeScript et le renverra au format JavaScript.
4) Utilisez le projet TypeScript Compile JavaScript pour automatiquement insérer votre code dans le navigateur. Cela vous donne la "compilation à la demande" qui est normalement fournie avec les projets de sites Web.
Avant que "compile on save" ne fonctionne dans VS, j'utilisais TypeScript Compile. Maintenant, j'utilise heureusement "compile on save".
Celui-ci a été un peu comme une cible mobile, mais uniquement parce que l'équipe TypeScript a amélioré son fonctionnement. J'ai essayé de couvrir autant de scénarios que possible ci-dessous, du plus récent au plus ancien.
La dernière en date est que cela devrait maintenant fonctionner dans les dernières versions de Visual Studio (actuellement v1.4), même pour les projets Web.
J'ai pris ces notes abrégées de ma réponse beaucoup plus longue sur l'ajout de TypeScript à un projet existant .
VS 2013/0.9.5
Si vous utilisez Visual Studio Extension pour 0.9.5 ou une version ultérieure avec Visual Studio 2013, vous constaterez qu'il configurera automatiquement tout dès que vous ajoutez le premier fichier TypeScript.
Auto TypeScript-isation n'a pas fonctionné?
La configuration automatique ajoute seulement quelques lignes - vous pouvez le faire manuellement:
<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 configuration de fichier de projet suivante devrait fonctionner:
<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')" />
Encore plus vieux mis en place?
J'ai trouvé le moyen le plus fiable d'ajouter TypeScript à un projet existant est d'ajouter ce qui suit dans le fichier de projet:
<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>
Vous pouvez également ajouter des indicateurs facultatifs, tels que --module AMD:
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" --module AMD @(TypeScriptCompile ->'"%(fullpath)"', ' ')" IgnoreExitCode="true" />
Depuis la version 0.8.2, publiée le 21 janvier 2013, le plug-in VS2012 TypeScript prend en charge la compilation lors de l'enregistrement sans utiliser WebEssentials. Sélectionnez Outils> Options> Editeur de texte> TypeScript> Section Projet et cochez la case "Compiler automatiquement ...".
Si vous voulez compiler tous vos fichiers .ts dans un seul fichier .js dans le cadre de votre processus de construction (ce que vous devriez probablement faire), assurez-vous que le script app.ts a une référence à tous les fichiers à inclure. et ajoutez l’étape de pré-construction suivante à votre projet:
"C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" --out app.js app.ts
(Spécifier le paramètre --out indique à tsc d'inclure tous les fichiers référencés.)
Comme il n'y a pas de fichier de projet, vous devrez peut-être revenir à l'exécution "manuelle" du compilateur TypeScript.
Ouvrez une invite de commande Visual Studio (Démarrer -> Programmes -> Microsoft Visual Studio 20xx -> Outils Visual Studio -> Invite de commande du développeur).
Exécuter: tsc your_input_file.ts --target ES5
Pour fournir plusieurs fichiers .ts, utilisez un fichier texte avec le paramètre @args_file_name.
Lorsque vous en avez assez, mettez tout cela dans un fichier batch.
Lorsque vous en avez assez d'utiliser un fichier de commandes, convertissez votre application en une application Web et modifiez le fichier .proj en fonction de la réponse de Sohnee.
Pour que cela fonctionne sur ma configuration, cochez la case "Compiler automatiquement les fichiers TypeScript ne faisant pas partie d'un projet".
Mais cela ne suffisait pas. Pour que la compilation automatique fonctionne dans un projet de site Web, je devais créer un fichier tsconfig.json avec les configurations suivantes:
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"alwaysStrict": true,
"module": "AMD"
},
"compileOnSave": true,
"exclude": [
"node_modules",
"wwwroot",
"packages"
]
}
Le paramètre "compileOnSave": true est le paramètre crucial ici. C'est ce qui déclenche la compilation automatique.
TypeScript version 2.1.5 sur Visual Studio 2017
J'ai lu les articles ci-dessus lorsque j'essayais d'utiliser des fichiers * .aspx et * .ts dans un projet VS-2015 . Par inadvertance, j'ai trouvé une recette simple et claire. "Comment combiner des fichiers de code * .ASPX et * .TS dans un Visual Projet Studio "et je veux partager cette solution pour tous. Excuse moi si c'est trop facile.
Pour utiliser les fichiers * .aspx et * .ts dans un seul projet VS, créez un nouveau projet de type "Application Web ASP.NET". Ensuite, à l’étape suivante, sélectionnez "Vide" dans le volet "Modèles ASP.NET 4.5.2" supérieur, puis "Web Forms" et "API Web" en bas "Ajouter des dossiers et des références principales pour:". J'ajoute deux images avec ces étapes.
De plus, j'ai une erreur de script lorsque j'utilise des variables de type JQuery dans mon code TypeScript. Pour utiliser le type JQuery, j'ai besoin d'ajouter trois dossiers imbriqués dans le projet: Scripts\typings\jquery Et d'ajouter le fichier jquery.d.ts avec les définitions de type pour jQuery. Je pense que les détails sont faciles à googler.
Merci à mon ami qui m'aide à trouver cette solution . première étape du projet de création
Josh, j'utilise Visual Studio 2012 Express pour le Web et je me suis rendu compte que chaque fois que vous enregistrez le fichier .ts, il génère automatiquement le .js.
Vérifiez votre dossier .ts chaque fois que vous enregistrez un fichier et confirmez si cela ne vous arrive pas aussi.