How to Run TypeScript in VS Code

Learn how to set up, run, and debug TypeScript in Visual Studio Code. This guide provides step-by-step instructions to enhance your JavaScript development process. Dive into the seamless integration of TypeScript with VSCode for a productive coding session.

TypeScript, a superset of JavaScript, brings type annotations and other features that enhance our JavaScript development experience. If you're using Visual Studio Code, you're in for a treat when it comes to working with TypeScript. In this post, we'll guide you on how to set up and run TypeScript, debug your .ts files, and manage your compiler settings.

Installing TypeScript Globally

First and foremost, let's talk about how you can set up TypeScript.

TypeScript can be either installed globally via npm or locally in your project. We'll first cover the global installation.

Npm allows us to install packages globally using the -g flag. Once installed globally, you can access the package from any command line window on your machine. For TypeScript:

1. To install globally, run: npm install -g typescript
2. Confirm the installation by running: tsc --version

After you've set up TypeScript, create a new TypeScript file in Visual Studio Code and input a line to log out to the console. Next, compile this TypeScript file by opening a terminal and running tsc index.ts. You'll notice that this generates a corresponding JavaScript file. This file is a compilation from our TypeScript source code.

You can add more code to your TypeScript file and compile again using the tsc command. If you'd like to run the resulting JavaScript file, you can execute node index.js in the terminal.

Configuring the TypeScript Compiler

While the basic setup is good for starters, you might want to tweak some compilation settings down the road.

Here's how you can get started with custom configurations:

1. Add a tsconfig.json file in the root directory of your project.
2. Run tsc without any arguments. TypeScript will recognize the tsconfig file and use the configurations specified there during compilation.
3. Add compiler options like outDir to guide TypeScript on where to save the compiled JavaScript files.

Visual Studio Code provides fantastic support for TypeScript configurations:

• You can use Ctrl + Space (or Cmd + Space on Mac) to access IntelliSense, which shows you all the possible options for your tsconfig.json.
• Hovering over the configuration fields provides tooltips explaining their usage.

To avoid repeatedly running the tsc command after every change, use tsc --watch or Ctrl + Shift + B in VSCode to compile TypeScript files automatically upon changes.

Using a Local TypeScript Version

If your project uses a specific TypeScript version, you'd want VSCode to utilize that.

Debugging TypeScript in Visual Studio Code

One of the highlights of TypeScript support in VSCode is the ability to debug TypeScript files directly.

Here's a step-by-step guide:

1. Enable source maps in your tsconfig.json by setting "sourceMap": true under compilerOptions.
2. When you compile with source maps enabled, a .map file gets generated alongside your JavaScript file.
3. Configure the debugger in VSCode. Select Run and Debug in the menu and choose "Create a launch.json file". Here, specify the pre-launch task, which should be the TypeScript compile command (tsc).
4. Add breakpoints to your TypeScript file and start the debugger using the F5 key.

This setup allows you to debug the original TypeScript code instead of the compiled JavaScript, providing a seamless debugging experience.

Conclusion

With TypeScript, you enhance your JavaScript development process, making it more efficient, type-safe, and manageable. When combined with Visual Studio Code's robust support for TypeScript, you're set for a productive coding session. Remember, the right tools and configurations can make a significant difference in your development workflow.

Watch on YouTube

Check out this video on our YouTube channel showing TypeScript in VSCode in action.