Como adiciono TypeScript a um projeto Asp.Net MVC existente?[duplicado]
https://stackoverflow.com//questions/12680486
-
12-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Adoro a ideia por trás do TypeScript, mas não consigo descobrir como incluí-lo em um projeto ASP.Net MVC.Já instalei a extensão do Visual Studio, mas não consigo encontrar um exemplo ou documentação sobre como adicionar *.ts arquivos que compilam em *.js arquivos.
Editar:Na verdade, devo replicar a maneira como o exemplo do Win8 .jsproj inclui e manipula .ts arquivos?Ou isso funcionará apenas para projetos HTML/JS Win8?
Solução
Aviso: Esta resposta agora está bastante desatualizada, já que tanto o Typescript quanto o MVC mudaram significativamente desde esta resposta.Vou tentar uma atualização mais tarde.- Richcoder
Graças a Sohnee para a resposta.
Você pode adicionar arquivos TypeScript a um projeto existente usando a caixa de diálogo Adicionar > Novo Item.
Observe que o item 'Arquivo Typescript' não reside no grupo Web, mas em seu pai, neste caso, Visual C#.
Isso deve adicionar um arquivo TypeScript e o Visual Studio fará o resto.
Então você precisa adicionar estas linhas ao arquivo do projeto:
<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" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" IgnoreExitCode="true" />
</Target>
Funcionou perfeitamente para mim, mas comente se tiver algum problema.
Outras dicas
Está correto.tudo que você precisa é o destino de compilação ms para criar os arquivos .ts em arquivos .js.O exemplo do Win8 mostra um destino beforeBuild para chamar tsc em todos os arquivos pertencentes ao itemGroup TypeScriptCompile, que é definido como $(ProjectDir)***.ts (ou todos os arquivos .ts em seu projeto).
A replicação desse padrão deve funcionar em qualquer projeto msbuild, e não apenas em projetos Win8.
Aqui está um exemplo do que estou falando:Adicione isso a qualquer projeto msbuild e você deverá compilar qualquer arquivo .ts no arquivo .js equivalente quando sua compilação for iniciada.
<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="TypeScriptCompile" BeforeTargets="Build">
<Message Text="Compiling TypeScript files" />
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
</Target>
Eu criei um pacote nuget que adiciona um arquivo de destino msbuild ao seu projeto.Ele executará o compilador tsc e limpará sua saída para que você possa clicar duas vezes nos erros no Visual Studio e pular para o arquivo/linha/coluna.
https://www.nuget.org/packages/Sholo.TypeScript.Build
Você precisa definir a ação Build na janela de propriedades como 'TypeScriptCompile' para qualquer coisa que você deseja que o tsc compile.Depois de alguns dias mexendo no TypeScript, descobri que os arquivos .ts que estão fazendo a referência deveriam ser definidos como TypeScriptCompile, mas os arquivos que estão apenas sendo referenciados não deveriam, mas ymmv.Além disso, pode ser necessário Mostrar todos os arquivos e adicionar o arquivo .js original.Se você deseja agrupar arquivos .ts/.js/.d.ts relacionados, dê uma olhada na extensão VsCommands.O fluxo de trabalho também é muito bom com extensões NetDemon/semelhantes.
Se você estiver usando Agrupamento e Minificação, acabei de lançar uma implementação do IBundleTransform que compila TypeScript para Javascript.Está ligado GitHub e NuGet (Pacote de Instalação TypeScriptBundleTransform).Se você ainda não usa Bundling and Minification, vale a pena dar uma olhada!
atualizar:
Basta instalar Fundamentos da Web 2012 plugin, você terá compilação automática ao salvar - para .js e .min.js e uma visualização dividida para ver a saída JavaScript ao lado do seu código TypeScript.
Este é um método rudimentar que tenho usado:
Clique com o botão direito em seu projeto > Propriedades > Construir eventos
Caixa PreBuild cole isto (cria recursivamente todos os arquivos .ts no projeto):
forfiles /S /P $(ProjectDir) /m *.ts /c "cmd /c tsc @file"
Para construir um arquivo de entrada específico:
tsc $(ProjectDir)MyScripts/myfile.ts
Tenho certeza de que existe uma maneira melhor de fazer isso.
Se você estiver usando o Estrutura de otimização da Web Microsoft ASP.NET (também conhecido como Bundling and Minification) e tente usar o Transformador de pacote com módulo instalado BundleTransformer.TypeScript.Além da compilação do código TypeScript para JS, você também pode produzir minificação do código JS gerado usando outros módulos do Bundle Transformer: BundleTransformer.MicrosoftAjax, PacoteTransformer.Yui, BundleTransformer.Closure, BundleTransformer.JsMin, BundleTransformer.UglifyJs e BundleTransformer.Packer.
