Typescript in Bash on Ubuntu on Windows using Visual Studio Code

Lately Typescript is a hot topic; something about it being strongly typed and better structured, among other things. An analogy I saw recently is that you can write Javascript “much in the same way as you could eat your dinner by having someone throw it at your face from across the room” – source.

Another popular topic at the moment is the ability to run Ubuntu user-mode on Windows 10 (still in preview at the time of writing). Now this is super cool – it means I can use native bash on Windows and keep my dev-ecosystem there, as opposed to on a VM or using something like Vagrant.

The Challenge

Having set all of that up, I then faced the challenge… ‘How do I transpile Typescript in Visual Studio Code, using commands executed in the context of Bash?’

The Solution

First of all, we’re going to make some opening assumptions that you have at least the done the following:

We’re also going to assume that you’re already comfortable with nodejs, npm, gulp, Linux in general and of course Typescript and Javascript.

Update NPM

First up, if you haven’t done already, step into bash; open up a command line (run as Administrator) and type:

1

Bash

Next, although NPM is installed as part of Nodejs, NPM is updated more regularly than Nodejs overall. So immediately after installing Nodejs, you should update NPM:

1

sudo npm install npm–g

Install a Typescript compiler

Next up, we’re going to need a Typescript compiler:

1

sudo npm install–gtypescript

Then Initialise the npm project:

1

2

cd<your project directory>

npm init

Install gulp and dependencies

Then, let’s get gulp installed:

1

2

3

sudo npm install–ggulp-cli

npm install–-save-dev gulp

npm install–-save-dev gulp-typescript

Set up a Typescript project

A Typescript project is declared through the use of a tsconfig.json file; this file acts as the compiler configuration that is used at the time of calling the compiler. Here’s ours:

JavaScript

1

2

3

4

5

6

7

8

9

10

{

"compilerOptions":{

"target":"es5",

"module":"system",

"sourceMap":false

},

"exclude":[

"node_modules"

]

}

Our example does the following:

Tells the compiler that we want to output ECMA5

Specifies the module code generation to be that of SystemJS

Tells the compiler not to generate.map files

Gives the compiler a list of files or paths to exclude

It is very important to exclude the node_modules directory, otherwise the Typescript compiler will attempt to compile everything in there – and gets a bit shouty when you try to do that. So don’t J

Folder Structure

In this example, we’re going to use a very basic example folder structure. You can use whatever you like, but for the completeness, here’s mine:

1

2

3

4

5

6

7

+node_modules(auto created by npm)

+release

|--scripts

+ts

-gulpfile.js

-package.json

-tsconfig.json

Note: Bear in mind, this folder structure in no way represents a real live development system or otherwise; it’s purely for the purpose of demonstrating what we’re doing here.

Create the gulpfile.js

Next up, define a task to compile Typescript and to then watch the Typescript files for changes:

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

vargulp=require("gulp"),

ts=require("gulp-typescript");

varpaths={

scripts:['./ts/**/*.ts'],

release:'./release/scripts'

};

// Create typescript project

vartsProject=ts.createProject('tsconfig.json');

gulp.task('scripts',function(){

vartsResult=tsProject.src(paths.scripts)

.pipe(ts(tsProject));

returntsResult.js.pipe(gulp.dest(paths.release));

});

gulp.task('watch',function(){

gulp.watch(paths.scripts,['scripts']);

});

gulp.task('default',['scripts','watch']);

Make Visual Studio Code aware of your gulp tasks

Now here’s the clever bit. At this point, you could crack open a command line and run your gulp tasks manually, or, you can use some Visual Studio Code built in coolness J

Visual Studio Code has the concept of ‘Tasks’ built in. While they don’t do much by themselves, what they do enable you to do is to map some Visual Studio Code functionality and shortcuts to your gulp tasks.

Start by creating a tasks.json file:

Press F1 and type > Configure Task Runner and Enter

When a dropdown menu prompts you to Select a Task Runner, select Gulp (because we’re using Gulp, right?)

A json file is created in the .vscode folder

Update your tasks.json file to look like the following:

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version":"0.1.0",

"command":"bash",

"isShellCommand":true,

"args":["-c"],

"showOutput":"always",

"tasks":[{

"taskName":"Gulp Default Task",

"suppressTaskName":true,

"args":["gulp"],

"isBuildCommand":true,

"problemMatcher":"$gulp-tsc",

"isWatching":false,

"showOutput":"always",

}]

}

What’s going on here? I’ll not go into too much detail here about Visual Studio Code Tasks but the result of this is that when we hit Ctrl+Shift+B (default build shortcut), it should run the default gulp task.

I’ve no clue why it behaves in that way, but a simple workaround is to set the terminal executable for Windows in your settings file:

1

“externalTerminal.windowsExec”:“bash”

Then restart Visual Studio Code and open up your workspace, then press Ctrl+Shift+C (should open up a bash shell) and type your command. Can’t wait for the bash integration to work properly… But this will have to do for now. Happy coding!