⚠️ This lesson is retired and might contain outdated information.

Compiling TypeScript with WebStorm

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

As long as you have a properly configured .tsconfig, most tooling can just run tsc behind the scenes to build your project. This lesson shows how WebStorm includes a nice interface for reporting and navigating to the errors and will continuously run your TypeScript build for you.

[00:00] While you can use any editor that you'd like with TypeScript, I'm going to use WebStorm because it's my personal preferred editor. If I open the same directory, it's going to prompt me to compile TypeScript to JavaScript.

[00:11] Now, if you already have a tsconfig, and you click OK, it's going to find that tsconfig, use those settings, and then start running tsc every time those files change. It's basically like doing a tsc-w watch for you.

[00:28] The neat thing, though, is if I make mistake here, and it pops up an error, it will output the errors here, and I can double-click and jump to them. You see if I double-click here, it jumps to that space. If I double-click here, it jumps to here.

[00:45] If you want to see the actual console output, you can see it through here that it's just running tsc and then outputting as expected. Now, if you want to change any of these settings, go into Settings, then navigate down to Languages and Frameworks and select TypeScript.

[01:02] You can see the different settings like should I resolve using the tsconfig? Should I enable the compiler so you can turn that off if you turned it on? You can set options manually using the command line, and have complete control over those settings.

[01:14] The most important thing to remember here is that, if you have a tsconfig, it doesn't matter whether you're compiling WebStorm, or whether you're compiling from the command line, or however you're doing it. As long as it's invoking tsc and it's using the tsconfig, it's always going to output the exact same files in the exact same directory.

Sequoia McDowell
Sequoia McDowell
~ 8 years ago

Wish you'd do a basic VS Code setup/watch intro as well! It's free so easier to dip a toe in. Webstorm is great too of course. :)

Markdown supported.
Become a member to join the discussionEnroll Today