Exploring and Migrating to TypeScript

Download this episode

Download Video

Download captions

Download Captions

Description

TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript. It can help you be more productive and write higher quality code. That's all great, but migrating an existing JavaScript project to TypeScript can seem like a daunting proposition.
 
Luckily, benefiting from TypeScript doesn't require you to migrate your entire project to TypeScript. You can benefit from TypeScript by making incremental changes to your project.
 
In this module, you'll learn the basics of the TypeScript language and how to incrementally migrate a project to TypeScript. You'll also see how Visual Studio 2017 leverages the TypeScript Language Service to provide a rich JavaScript development experience including features such as symbol-based navigation, statement completion, and code refactoring. And you'll see how to use JSDoc comments and TypeScript Declaration (d.ts) files to refine the TypeScript Language Service's understanding of your code.
For more information, check out these courses on Microsoft Virtual Academy:

Day:

2

Session Type:

Training (Web Dev)

Code:

WEB-102

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      DashNYC

      Thanks for the tip: close your compiled files in VS or they won't be re-built @ 25:00

      This was driving me crazy.

       

    • User profile image
      Scheelings

      Thanks for this great demo. I have created a similar project in VS2017 to test it and everything works great.

      I have 1 question though about sourceMaps, which I have set to true in the tsconfig.json file. This generates the *.js.map files in the wwwroot/scripts folder. But when I try to debug a *.ts file in the Developer toolbar in Chrome or MSIE (without using VS2017 debugging) it is not able to load the *.ts file, because the *.js.map file maps to the localhost/Client folder which does not exist.
      How would you solve this problem?

      Thanks,
      Danny

    • User profile image
      Treehouse​SmashDev

      @Scheelings: As you've discovered, in an ASP.NET Core application, only static files located in the wwwroot folder will get served to clients. To get around having to move your TypeScript source files into the wwwroot folder, try setting the "inlineSourceMap" and "inlineSources" TypeScript compiler options both to "true". Doing this will make your TypeScript source code available to the browser developer tools.

      Ideally, you wouldn't enable those compiler options when building the production version of your application. Having a more robust front end build process/workflow using gulp/grunt/webpack would help you manage this.

      Thanks ~James

    • User profile image
      Scheelings

      @Treehouse​SmashDev, thanks for the tips!

    • User profile image
      Dash

      Argh, why do these need to be lengthy videos.

      Can't MS just document things?

    Add Your 2 Cents