Exploring and Migrating to TypeScript

Sign in to queue

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

Download

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