web-dev-qa-db-fra.com

Comment ajouter TypeScript à un projet MVC Asp.Net existant?

J'aime l'idée derrière TypeScript, mais je n'arrive pas à comprendre comment l'inclure dans un projet ASP.Net MVC. J'ai déjà installé l'extension Visual Studio, mais je n'arrive pas à trouver un exemple ou une documentation sur la façon d'ajouter *.ts fichiers qui se compilent en *.js des dossiers.

Edit: En fait, dois-je reproduire la façon dont l'exemple Win8 .jsproj inclut et gère .ts des dossiers? Ou cela ne fonctionnera-t-il que pour les projets HTML/JS Win8?

asp.net-mvctypescript
42
Richicoder

Avertissement: Cette réponse est maintenant assez datée, car TypeScript et MVC ont changé de manière significative depuis cette réponse. J'essaierai une mise à jour plus tard. - Richcoder

Merci à Sohnee pour la réponse.

Vous pouvez ajouter des fichiers TypeScript à un projet existant à l'aide de la boîte de dialogue Ajouter> Nouvel élément. exampleImage Veuillez noter que l'élément 'TypeScript File' ne réside pas sous le groupe Web mais sous son parent dans ce cas Visual C #.

Cela devrait ajouter un fichier TypeScript et Visual Studio fera le reste.

Ensuite, vous devez ajouter ces lignes au fichier de projet:

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

Cela a parfaitement fonctionné pour moi, mais veuillez commenter si vous rencontrez des problèmes.

24
Richicoder

C'est exact. tout ce dont vous avez besoin est la cible de build ms pour construire les fichiers .ts en fichiers .js. L'exemple Win8 montre une cible beforeBuild pour appeler tsc sur tous les fichiers appartenant à itemGroup TypeScriptCompile, qui est défini comme $ (ProjectDir) ***. Ts (ou tous les fichiers .ts de votre projet).

La réplication de ce modèle devrait fonctionner dans n'importe quel projet msbuild, et pas seulement dans les projets Win8.

Voici un exemple de ce dont je parle: Ajoutez ceci à n'importe quel projet msbuild, et vous devriez compiler n'importe quel fichier .ts dans le fichier equivialnt .js lorsque votre build démarre ..

<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>
19
mohamed hegazy

J'ai assemblé un paquet nuget qui ajoute un fichier de cibles msbuild à votre projet. Il exécutera le compilateur tsc et nettoiera sa sortie afin que vous puissiez double-cliquer sur les erreurs dans Visual Studio et accéder au fichier/ligne/colonne.

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

Vous devez définir l'action de construction dans la fenêtre des propriétés sur "TypeScriptCompile" pour tout ce que vous voulez que tsc compile. Après quelques jours de bricolage avec TypeScript, j'ai trouvé que les fichiers .ts qui font le référencement doivent être définis sur TypeScriptCompile, mais les fichiers qui sont uniquement référencés ne devraient pas, mais ymmv. En outre, vous devrez peut-être afficher tous les fichiers et ajouter le fichier .js d'origine. Si vous souhaitez regrouper les fichiers .ts/.js/.d.ts associés, jetez un œil à l'extension VsCommands. Le flux de travail est également assez agréable avec NetDemon/extensions similaires.

7
scottt732

Si vous utilisez Bundling and Minification , je viens de publier une implémentation d'IBundleTransform qui compile TypeScript en Javascript. Il est sur GitHub et NuGet (Install-Package TypeScriptBundleTransform). Si vous n'utilisez pas encore Bundling and Minification, ça vaut le coup d'oeil!

4
Wouter Devinck

mise à jour:

Installez simplement Web Essentials 2012 plugin, vous aurez une compilation automatique lors de la sauvegarde - pour les deux .js et .min.js et une vue séparée soignée pour voir la sortie JavaScript à côté de votre code TypeScript.

C'est une méthode grossière que j'utilise:

Cliquez avec le bouton droit sur votre projet> Propriétés> Créer des événements

Boîte PreBuild collez ceci (construit récursivement tous les fichiers .ts dans le projet):

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

Pour créer un fichier d'entrée spécifique:

tsc $(ProjectDir)MyScripts/myfile.ts

Je suis sûr qu'il existe une meilleure façon de procéder.

3
enko

Si vous utilisez Microsoft ASP.NET Web Optimization Framework (alias Bundling and Minification), essayez d'utiliser Bundle Transformer avec le module installé BundleTransformer.TypeScript . En plus de la compilation du code TypeScript en JS, vous pouvez également produire une minification du code JS généré en utilisant d'autres modules de Bundle Transformer: BundleTransformer.MicrosoftAjax , BundleTransformer.Yui , BundleTransformer.Closure , BundleTransformer.JsMin , BundleTransformer.UglifyJs et BundleTransformer.Packer .

0
Andrey Taritsyn