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:

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:

Install a Typescript compiler

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

Then Initialise the npm project:

Install gulp and dependencies

Then, let’s get gulp installed:

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:

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:

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:

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:

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.

But hold on, sorry, that won’t work yet, at the time of writing – I discovered something strange in the way Visual Studio Code calls the bash shell with it’s arguments. When called from Visual Studio Code, it simply doesn’t work – but if you copy and paste the command into the bash shell – Voila!

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:

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!

Never miss an article by subscribing to our monthly digest!

Summary
Typescript in Bash on Ubuntu on Windows using Visual Studio Code
Article Name
Typescript in Bash on Ubuntu on Windows using Visual Studio Code
Description
Ubuntu on Windows: how to transpile Typescript in Visual Studio Code, using commands executed in the context of Bash?
Author
Publisher Name
Atos Consulting CH
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *