Setting up TypeScript with Visual Studio Code

Posted on 7/15/2015 @ 1:48 AM in #Vanilla .NET by | Feedback | 9060 views

In my previous blogpost, Debugging websites with Visual Studio code, I talked about why I like Visual Studio code, and how you can use it to author simple websites.

But in that blogpost, I showed only how to setup the web server. There are atleast 3 more things you need,

  • Setup TypeScript (yeah it is or going to be the defacto way you’ll write JavaScript)
  • Setup TDD
  • Setup CSS/LESS/SASS etc.
  • Setup minification

All of the above can be achieved using gulp – for which there is built in support in Visual Studio code, and which is what I had used to setup a dev web server.

Here is how you can setup TypeScript. Before I start, let me start by saying – finding the right mix of spices was, tough!

The biggest problem I faced was, the lack of control the typescript compiler gives us currently on picking files (TS files) it needs to compile, and outputting them, and maintaining the right order, so the final result actually runs!

So, after loads of experimentation and hair pulling, here is the best formula,

Step #1 – install gulp-typescript

npm install gulp-typescript

Step #2 – Create a tsconfig.json in the root of your app,

   1:  {
   2:      "compilerOptions": {
   3:          "module": "commonjs",
   4:          "noImplicitAny": false,         
   5:          "removeComments": true,
   6:          "preserveConstEnums": true,
   7:          "declaration": true,
   8:          "out": "tsoutput.js",
   9:          "sourceMap": true,
  10:          "watch":true
  11:      }, 
  12:      "files": [
  13:          "typescript/somefile.ts",
  14:          "typescript/anotherfile.ts"
  15:      ]
  16:  }

The tsconfig.json file is a better way of telling tsc (typescript compiler) what it needs to consider what we wish to build. For instance, in the above, we are saying, generate the sourcemap – this is great for debugging. Even chrome browser understands it. It is watching the filesystem for changes, so in dev mode, if you change a .ts file, the compiler will automatically pick it up, and generate javascript files. As described in my Debugging websites with Visual Studio code blogpost, with livereload, this gives you a 100% seamless debugging experience.

One very important note here is, I am using out, instead of outDir. I found that there is a big issue with outDir. It literally creates a folder called “typescript” that contains JavaScript, at the outDir path :-/. Sounded dirty, and in some circumstances, with one type, you could completely screw up your source typescript folder. Typically, the .ts files, you don’t want to ship them with your app. The JS files you do. And as long as your debugging/workflow works, who cares if the output is a single file.

Second important note, I am using “files” instead of “filesGlob”. This is again because files allowed me to control the ordering of files – which CAN break your AngularJS code. For instance, declaring a module must come before declaring a controller on the module. If you followed John Papa’s angular style guide, it is a good idea to have single responsibility files. I like to do that too. But single responsibility as the downside that you need to keep that files portion up to date, manually!  There has to be a better way!? There IS a better way. You could generate the files element using clever JavaScript code and gulp – but again, you cannot guarantee order. So to guarantee the order, it is best to just specify what files you wish to include. Its not that big a deal.

Look at it this way, when you add a file, you’d have to edit your index.html file to reference that file. You don’t have to do that anymore, since the index.html will reference only tsoutput.js. Instead you add your file references in tsconfig.json – see not so bad is it?

Anyway, moving along ..

Step #3 – Add a gulp task as below,

   1:  var ts = require('gulp-typescript');
   2:  var tsProject = ts.createProject('tsconfig.json');
   4:  gulp.task('scripts', function () {   
   5:      var tsResult = tsProject.src().pipe(ts(tsProject));
   6:      return tsResult.js.pipe(gulp.dest('built'));
   7:  });

So what I am doing here is, when the “scripts” task runs, use tsconfig.json, and place the tsoutput.js file in built.js – and now I simply reference the tsoutput.js in my .html as below,

   1:  <script src="built/tsoutput.js"></script>

That was easy, wasn’t it?

Now how to use it,

To only compile scripts,

Press ⇧⌘P, and type “Run task”, hit enter, and choose the scripts task. That’s it! The typescript compiler will now run, and it will build your JS. And note that in your tsconfig.json, I had watch = true. This means, it will even watch the files and keep your JS files updated as you change them. Sweet!

To build and debug,

Of course, at the very end, in the default task, you’d have a line like this,

   1:  gulp.task('default', ['build', 'scripts', 'test']);

This means, when you press ⇧⌘B, it will automatically run the build step (setup a web server in our case), compile the scripts, and run tests on our scripts.

Now speaking of tests . .TDD is great! And you can tie in TDD with your dev process also. In other words, as you save a .ts file, it automatically converts it to .js, and runs your tests on it. It does so, everytime you save the files you are working on.

I’ll cover that in my next blogpost.

Sound off but keep it civil:

Older comments..