Come posso aggiungere typescript a un file esistente Asp.Net Progetto MVC?[duplicato]

StackOverflow https://stackoverflow.com//questions/12680486

  •  12-12-2019
  •  | 
  •  

Domanda

Adoro l'idea alla base di typescript, ma non riesco a capire come includerlo in un ASP.Net Progetto MVC.Ho già installato l'estensione di Visual Studio, ma non riesco a trovare un esempio o una documentazione su come aggiungere *.ts file che si compilano in *.js file.

Modificare:In realtà, dovrei replicare il modo in cui l'esempio Win8 .jsproj include e maniglie .ts documenti?O funzionerà solo per i progetti HTML/JS Win8?

È stato utile?

Soluzione

Avvertimento: Questa risposta è ora abbastanza datata, poiché sia Typescript che MVC sono cambiati significativamente da questa risposta.Proverò un aggiornamento più tardi.- Richcoder

Grazie a Sohnee per la risposta.

È possibile aggiungere file dattiloscritti a un progetto esistente utilizzando la finestra di dialogo Aggiungi > Nuovo elemento.exampleImage Si noti che l'elemento 'Typescript File' non si trova sotto il gruppo Web ma sotto il suo genitore in questo caso Visual C#.

Questo dovrebbe aggiungere un file TypeScript e Visual Studio farà il resto.

Quindi è necessario aggiungere queste righe al file di progetto:

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

Ha funzionato perfettamente per me, ma si prega di commentare se si esegue in eventuali problemi.

Altri suggerimenti

E ' corretto.tutto ciò che serve è il target di build ms per costruire il.file ts in .file js.L'esempio Win8 mostra un target beforeBuild per chiamare tsc su tutti i file appartenenti a itemgroup TypeScriptCompile, che è definito come Proj (ProjectDir)***.ts (o tutti .file ts nel tuo progetto).

La replica di questo modello dovrebbe funzionare in qualsiasi progetto msbuild e non solo nei progetti Win8.

Ecco un esempio di ciò di cui sto parlando:Aggiungi questo a qualsiasi progetto msbuild e dovresti compilarne uno.file ts nell'equivialnt .file js all'avvio della build..

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

Ho messo insieme un pacchetto nuget che aggiunge un file msbuild targets al tuo progetto.Eseguirà il compilatore tsc e ripulirà il suo output in modo da poter fare doppio clic sugli errori in Visual Studio e passare al file/riga/colonna.

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

È necessario impostare l'azione di compilazione nella finestra delle proprietà su "TypeScriptCompile" per tutto ciò che si desidera che tsc compili.Da alcuni giorni di armeggiare con dattiloscritto, ho scoperto che il .i file ts che eseguono il riferimento dovrebbero essere impostati su TypeScriptCompile, ma i file a cui si fa riferimento non dovrebbero, ma ymmv.Inoltre, potrebbe essere necessario mostrare tutti i file e aggiungere l'originale .file js.Se si desidera gruppo correlati .TS/.js/.d. ts file insieme, dare un'occhiata al VsCommands estensione.Flusso di lavoro è anche abbastanza bello con NetDemon / estensioni simili.

Se stai usando Bundling e Minification, Ho appena rilasciato un'implementazione di IBundleTransform che compila TypeScript a Javascript.È acceso GitHub e NuGet (Install-Package TypeScriptBundleTransform).Se non si sta ancora utilizzando Bundling e Minification, vale la pena dare un'occhiata!

aggiornare:

Basta installare Web Essentials 2012 plugin, avrai la compilazione automatica su save - per entrambi .js e .min.js e una vista divisa ordinata per vedere l'output JavaScript accanto al codice TypeScript.


Questo è un metodo grezzo che ho usato:

Fare clic con il pulsante destro del mouse sul progetto > Proprietà > Crea eventi

PreBuild box incolla questo (ricorsivamente costruisce tutto .file ts nel progetto):

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

Per la creazione di file di ingresso specifici:

tsc $(ProjectDir)MyScripts/myfile.ts

Sono sicuro che c'è un modo migliore per farlo.

Se si utilizza il Microsoft ASP.NET Framework di ottimizzazione Web (aka Bundling e Minification), quindi provare a utilizzare il Trasformatore Bundle con modulo installato BundleTransformer.Dattiloscritto.Oltre alla compilazione del codice TypeScript in JS, è anche possibile produrre la minimizzazione del codice JS generato utilizzando altri moduli del trasformatore Bundle: BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.Chiusura, BundleTransformer.JSMIN, BundleTransformer.UglifyJs e BundleTransformer.Packer.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top