Skip to content

Quick Setup: VSCode and TypeScript

Jul 9, 2018 12:00:00 AM
Curtis Badke

TypeScript can hardly be called a new kid on the block anymore but plenty of people still haven’t knocked it off their “languages to check out” list. So, here’s a quick and dirty guide to setting up VSCode for some TypeScript experiments to get you going.

Once you can build and run basic TypeScript code on your machine it won’t take long to get hooked and start convincing your team to make TypeScript a full blown member of your tech stack.

Let’s get started!

Install VSCode

VSCode is rapidly becoming a favourite editor for developers in nearly every community. It’s extension ecosystem is rich with fantastic add-on, it supports many different languages and it’s fast! The VSCodeVim extension made me an easy sell. It’s available on all your favourite operating systems so everyone can play.

Learn You Some Shortcuts

There are many great shortcuts built into VSCode. Some you’ll know from other apps but some will be new. Make sure you review (and practice!) the shortcuts in VSCode to up your speed.

A few you should take note of immediately:

  • Show Command Palette (Ctrl+Shift+P, ⇧⌘P)
    • The command pallette is your autocompleting magical keyboard access to pretty much everything VSCode can do.
  • Trigger Suggestion (Ctrl+Space)
    • You probably automatically do this if you a VS user.
  • Show integrated terminal (Ctrl+`)
    • You’ve never dropped in & out of the command line so fast!

Install Typescript Support

A thorough decription can be found at the VSCode documentation pages but the quick version is this:

Install Node

Use your appropriate packaging system for the install. Full instructions at nodejs.org.

Install TypeScript Compiler

Start with a global install for ease of use. If you need it, you can install specific versions per project later.

npm install –g typescript

Once that is complete you should have the latest Typescript compiler available for use by any user on the machine.

Start Your First Project

A TypeScript project is typically defined with a tsconfig.json file in the root directory. This config file allows you to set the compiler options you always want used whenever your project is built.

  • Create a new directory
  • Open that directory in VSCode [Ctrl-K Ctrl-O] or [⌘-K ⌘-O]
  • Either:
    • Add a new tsconfig.json file [Ctrl-N Ctrl-S] or [⌘-N ⌘-S]
    • or, run tsc --init in your new directory

A basic tsconfig.json would be something like:

{
    "compilerOptions": {
      "target": "esnext",
      "module": "commonjs",
      "sourceMap": true
    }
}

Make sure you use Trigger Suggestion (Ctrl+Space) when editing the json file to explore what types of options you can set and what values are valid. You can also look at the TypeScript compiler docs for a bit of help tsc –help

Including the sourceMap entry is needed in order for debugging within VSCode to work.

Hello World

Let’s test this whole thing out. Start a new HelloWorld.ts file [Ctrl-N Ctrl-S] and enter the following:

class Startup {
  public static main(): number {
    console.log("Hello World");
    return 0;
  }
}
Startup.main(); /// Don't forget this part !

To run your app you can either go from the command line or within VSCode itself.

To run from VSCode:

  • Run Build Task… [Ctrl-Shift-B] or [⇧⌘B] and select the build task
  • Start the debugger F5
  • You should see the output in the DEBUG CONSOLE

To run from Command line:

$ tsc HelloWorld.ts
$ node HelloWorld.js

You did it!

Smooth the Edges

Now you can start customizing VSCode to be exactly the editor you want. Explore the documentation and the app but here are a few things you’ll likely want to do.

Build before Launch

If you come from Visual Studio you’ll be used to having your project compile before launching when you hit F5. This does not happen out of the box in VSCode with TypeScript. Fortunately, it’s relatively easy to whip together.

  1. Open launch.json by hitting Ctrl-Shift-P (⇧⌘P), typing launch and selecting the command
    • This will autogenerate .vscode/launch.json
  2. Add the attribute "preLaunchTask": "tsc"
  3. Press F5 – you’ll get an error saying task ‘tsc’ cannot be found
  4. Click Configure Task
  5. Select tsc: build from task list. This will generate a new file .vscode/tasks.json
  6. Add "label": "tsc" attribute to generated task entry
  7. Press F5 and enjoy your “Build -> Run” experience!

Hide Generated JS Files

When you compile TS files you’ll end up with .js and .js.map files for each .ts file in your project. You can hide those files from showing up in your file tree by modifying your workspace settings.

  1. Open the Settings files by File->Preferences->Settings or Ctrl-, (⌘,)
  2. Switch to the Workspace Settings tab. This will generate .vscode/settings.json in your workspace
  3. Add a new files.exclude entry.
  4. Add "**/*.js": { "when": "$(basename).ts"}
  5. Add **/*.map": true

This will hide .js files if they have a neighbour .ts file with the same name as well as all map files.

Enable CodeLens Features

In your Workspace Settings (Ctrl-,) add the entries:

  • "typescript.referencesCodeLens.enabled": true"
  • "typescript.implementationsCodeLens.enabled": true

Install Extensions

Extensions you may want to install:

Learn TypeScript

Now that you can compile and run TypeScript, you’ll need to do the fun part and actually learn the language. There are many great resources out there to get you started but the first place I recommend to check out is the TypeScript website.

Good luck!
Advice Custom Software