getting started with typescript and vscode

2017-06-25
programming/ typescript

In my previous post I wrote about Angular2 and the tutorial where users can create the Tour of Heros App. Working through this tutorial lead me to ask ‘How was all this working?’. The tutorial guide itself is solely focused on teaching users how to use Angular2. This is all starts from the Angular2 seed project which can be downloaded at the start of the exercises from github. The tutorial allows users to ‘npm start’ the node app which allows the app to automatically load in a browser and a watch task to run to refresh the browser whenever the code changes.

Naturally, my thoughts turned to how this magic is happening. Looking at the package.json file was the first obvious place to look which lead me to find the various chained tsc commands. So I asked, what is tsc?

After a little research it was easy to find that this was all relating to Typescript and the package of the same name available in npm. I decided to learn more about this by following the ‘Mastering Typescript’ book published by Packt Publishing and written by Nathan Rozentals. I have only just started at the beginning of the book and I have already encountered problems so thought I would help fill in some gaps here.

VSCode

Or to give it is full name Visual Studio Code is a simple IDE built by Microsoft which has great support for TypeScript. I chose to use this due to the simplicity although the interface is very similar to the Atom IDE. The IDE is available to download from https://code.visualstudio.com/ and can be run on Windows, Linux and Mac operating systems. I have written this article whilst using Linux operating system Ubuntu.

Getting started

You’ll need to have npm and node installed on your machine to start, if you haven’t got this then I recommend you use nvm as mentioned my previous post. Once installed, you need to add the npm typescript package globally, this can be installed via:

1
npm install typescript -g

If you’re not sure whether you have typescript installed globally, then as a quick check I would use:

1
npm list -g | grep typescript

With this typescript installed, open VSCode and create your first Typescript file using the Ctrl + N (or File -> New File) command. Enter following typescript code which will log to the console ‘Hello in TypeScript’:

1
2
3
4
5
6
7
8
class Startup {
public static main(): number {
console.log('Hello in TypeScript');
return 0;
}
}

Startup.main();

When saving the file you will be asked for a location and filename, simply create a new folder in your chosen workspace and name the file ‘hello.ts’. By appending the .ts on the file name VSCode will know that this is typescript and code assist when you try to make more changes to your code.

Your next step will be to use the typescript package you installed earlier to ‘transpile’ your Typescript into browser compatible Javascript. This can be done in VSCode using the Ctrl + Shift + B option, which should give you a VSCode build option. In order for this to work you need a tsconfig.json file in your project directory to tell VSCode that this is a TypeScript project and which version of JavaScript to transpile to. Create a new file (Ctrl + N) and add:

1
2
3
4
5
6
7
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}

Save this file in the same directory as your hello.ts file, name this new file tsconfig.json. Now, when you go back to your hello.ts file in VSCode and try to build (using Ctrl + Shift + B), you should get the option of tsc: build – tsconfig.json or tsc: watch – tsconfig.json. Both of these will kick off tsc in the terminal and generate your JavaScript files from your TypeScript code.

If you are following this with the Mastering Typescript book, you may notice that Nathan writes about configuring a tasks.json file for controlling you build and debug. Later versions of VSCode won’t automatically move to generate this file for you. If you do want to do this you will need to configure the build task by clicking on the spoke/Cog on the build options when pressing Ctrl + Shift + B.

Clicking this, you should get the VSCode specific task file to edit your build tasks. I’ll write more about these build tasks in a later post. For now, you should be able to see your new hello.js file in VSCode.