New Visual Studio 2013 Features for TypeScript

New Visual Studio 2013 Features for TypeScript

  • Comments 33

As users expect more from the web – more features, more device support, more interactivity – ASP.NET developers are increasingly building large JavaScript applications. Starting with 0.9.1, a key focus for TypeScript's capabilities in the Visual Studio support is enabling TypeScript to work better with ASP.NET projects.

Adding TypeScript to a Project

To get started with TypeScript in an ASP.NET project, just add a TypeScript file by choosing Add – TypeScript File in the Solution Explorer right click menu, or by using the Add – New Item dialog. Adding a TypeScript file automatically onfigures the project to support compiling TypeScript. You can also rename JavaScript files with the “.ts” extension to convert them into TypeScript files. Since TypeScript is a superset of JavaScript, you can gradually migrate the scripts you already have by adding type annotations and restructuring the code to use classes, interfaces, and modules.

Adding Declaration Files

One of the best parts of JavaScript development is the wealth of useful, free libraries available online. To use these JavaScript libraries seamlessly in TypeScript apps, TypeScript supports declaration files (with the extension “.d.ts”) that describe the types of objects in JavaScript files. Through the community efforts, many popular JavaScript libraries now have tooling and error detection using these declaration files.  Sites like DefinitelyTyped have become indispensable for developers by collecting these declaration files together in one place.  Contributions by the community have mirrored these packages as NuGet, making them available to Visual Studio users.

In 0.9.1, with a right click you can now choose “Search for TypeScript Typings…” This searches NuGet for TypeScript-related packages matching the name of the JavaScript file. If you install a typing package, it will automatically be referenced by all of the TypeScript files in your project. You no longer need to explicitly add reference tags in your TypeScript code to each of the declaration files.

 

Debugging

TypeScript 0.9.1 continues to make it easy to debug TypeScript code, letting you focus on the code you've written. Because the TypeScript compiler generates source map files that relate the symbols in your TypeScript code with its JavaScript output, you can set a breakpoint in a TypeScript file, open your app in Internet Explorer, and then step through your code in Visual Studio just like ordinary JavaScript. You can examine the values of objects, add watches, view the call stack, and more. Since TypeScript is compiled to clean, readable JavaScript, it’s also straightforward to debug your code in your browser’s developer tools.

Organizing TypeScript and JavaScript in Solutions

By default, TypeScript files are automatically compiled when they’re saved and when your solution builds. Generated JavaScript files are placed in the same directory as their TypeScript source files. Think of the generated JavaScript files like DLLs generated from C# or VB code: they’re not included in your project, so they don’t appear in the Solution Explorer. If you want to view the JavaScript files, you can use the “Show All Files” button at the top of the Solution Explorer. The TypeScript Playground is another great tool for quickly seeing how your TypeScript will be compiled.

Other Editors

We’ve released the TypeScript compiler and language as open source to make it easy for the community to build great tools. While we think Visual Studio 2013 provides the best TypeScript development experience, there are a number of other editors with TypeScript support available, including Eclipse, Web Storm, Sublime Text, emacs, and vim.

We hope that these features make it seamless to use TypeScript in ASP.NET projects in Visual Studio 2013. As always, send us feedback on the TypeScript CodePlex page.

Leave a Comment
  • Please add 6 and 8 and type the answer here:
  • Post
  • If the goal is not to include the compiled *.js and *.js.map files as part of the project, what's the story about using "Publish" to get your website out? I get how it works if you build it in-place (e.g., using Azure/Kudu), but what if you're using the "Publish Website" feature, which seems to only pick up the files that are a part of the solution?

  • @Ken - when you "publish", the JavaScript files that are built should be bundled with the other published files.  Our current support for ASP.NET focuses on "web applications" rather than "web sites".  

  • I compile multiple ts files into single js file. For now I use typescript complier fired from some text template. Do you plan to add some features to VS (plugin) to handle this type of build ?

  • I'm with Tristan. I also want to compile multiple ts files to one single js file. Beyond that, will there be a Typescript Library project template for people developing javascript libraries? Thanks.

  • @Tristan, @ken

    How about opening this request on visualstudio.uservoice.com so other people can vote and VS team can actually listen to you! 8-)

  • PLEASE offer nesting of the generated files to the solution as a default/toggle behavior.  We really want it back, (now that web essentials has dropped support due to conflicts).

  • @Jonathan - We use a "web application" and "publish" the DLLs and .js (and other required files) using right-click publish on the web application project.  When the .js files produced by Typescript are not part of the project, they do not get published, and of course the published web application fails.  Have you tried this?  What am I missing?

  • Re packaging questions above: The Microsoft.TypeScript.targets file, that gets included in the project when TypeScript is enabled, collects the output JavaScript files from the TypeScript build task and adds them to the "FilesForPackagingFromProject" item group, so your generated JavaScript files should still get packaged.  If you find this is not working correctly, please open an issue on typescript.codeplex.com under the "Issues" tab.  Thanks!

  • "While we think Visual Studio 2013 provides the best TypeScript development experience..." Without the features Web Essentials provided this is demonstrably not true anymore. You guys really need to rethink the decision to have Mads drop TypeScript support.

  • @Tristan/@karl - we're working on a user interface for setting project properties.  Until then, you can unload and edit the project and add a TypeScriptOutFile to the build settings (you can add it under the under Debug/Release build settings that have TypeScriptXXXX names)

    @Mitch - you can use the "Show All Files" in the solution explorer to see the .js files.  Unlike nesting, this also works if you use the options to compile multiple .ts files into a single .js file (like the steps above)

  • @Jonathan Turner [MS] I think you are missing the point, I realize the files are still physically on the disk.  What I am saying is that unless the support for Typescript natively includes the nesting of the files as an options there is little chance our team will be able to adopt it due to workflow issues and the need for changing our deployment processes.  Please keep in mind that just because its the way you believe it should be done, does not mean its the way it is done.  It is a very simple addition and I would venture a guess that you could just grab the code to do it from Mads...

  • We're well on our way to 1.0!  What a great product; you guys are doing a good job.  I am a little bummed that one of my machines still has the js file "associated" (a/k/a "nested") with the NEW (not default Greeter)  ts file even after all the vs 2012 updates, nuget updates and ts updates (0.9.1.1) I can find.  What is it that changed to not associate the js anymore?  Can I edit my csproj or something? must i use vs2013 with 9.1.1?  BTW.. Who is "Mads"??

  • @Mitch - Can you give more information?  What is the scenario you are trying to use this nesting?  

    @Gary - Was the project you're using made with a version before 0.9.1?  I believe it's up to the project.

    If you still see *.js files nested under your *.ts files, then your old project files probably contain something like:

    <Content Include=”foo.js”>

                   <DependentUpon>foo.ts</DependentUpon>

    </Content>

    To bring them into the 0.9.1+ style TypeScript, the above should be replaced with:

    <TypeScriptCompile>foo.ts</TypeScriptCompile>

  • Thanks Jonathan. Just reiterating... this is an old csproj but a new ts.  my steps: create csproj, add a ts (it is nested as was expected then), update vs and ts, add a new ts, it is still nested.  are you suggesting i edit my csproj whenever i add a new ts?

    btw also reiterating how much i am looking forward to using this.  you guys are doing a great job though sometimes these comments even my own hardly ever say so.

  • let me clarify.  in an old solution, i added a new "html project with typescript", the default app.ts has the unnested csproj line as you mention.  added a new ts file. the new ts file has both a typescript compile element and a content include element.

    wondering what is shaping up to be the best practice.  Will the "html project with ts" continue to be a thing or I think I read something about making the ts more part of the normal web projects.  if i was starting with an old solution, even an old web app csproj, what is the recommended way to add a ts file and have it compiled on save and/or at build time, and also have the js file be "published"?  I'm guessing i might have to add something like a target to my csproj unless that automatically happens when i add the first ts.  anyway.. what is the recommended way to do what i've laid out? i.e., old sln, old csproj, new ts, compile to js, publish.  i understand if this is still up in the air if you could let me know that's the case.

Page 1 of 3 (33 items) 123