Configuring VS Code for Node & TypeScript Development

In this blog post, I will outline the bare-minimum steps required to configure or setup VS Code for Node & TypeScript development. If you have never heard about VS Code, then you can go through the documentation here. If you are having Pluralsight subscription, then you can also watch(and skip this article) on Visual Studio Code by John Papa : http://www.pluralsight.com/courses/visual-studio-code.

Steps

  • Download and install Nodejs from here : https://nodejs.org/en/. After installing ensure that system path is updated with path to the Nodejs install directory. If not, then add to system path : C:\Program Files\nodejs\.
  • Download and install VS Code from here : https://code.visualstudio.com/
  • Next install TypeScript. You can either download and install TypeScript from here : http://www.typescriptlang.org/#Download. Or you can install TypeScript via npm using the following command : npm install –g typescript
  • Once TypeScript is installed via npm, type in console : tsc –v,  it will print the version of TypeScript installed.
  • One last thing that we need to install via npm is TypeScript’s TypeDefinition framework. TypeScript development will not happen in isolation i.e. most likely we will be making use of some other JavaScript framework like Angular, jQuery, Node etc. With TypeDefinitions help, we will get intellisense support in VS Code. You can find more about TypeDefinition’s here : http://definitelytyped.org/. In order to install TypeDefinitions(in short tsd) via npm, issue the following command : npm install –g tsd
  • With Node, npm, TypeScript & tsd installed lets switch over to VS Code.
  • First create a folder in your local machine and open that folder in VS Code.
  • The very first thing we have to do is add a tsconfig.json file. This is a configuration file meant for configuring TypeScript compiler. For now just add the following line in the file. What this is telling to the TypeScript compiler is to generate JavaScript which is ECMAScript 5 compatible. 

      {
          "compilerOptions": {
              "target": "ES5"
          }
      }

  • Next, assuming you are planning to do some angularjs based development. For that you need angular.d.ts files. You can download this file using the tsd command line option using the following command : tsd install –save angulajs. Once installed, you will find that the angular.d.ts file is added under ~/typings/angular/ directory in your project. 
  • Last remaining thing is to add a new TypeScript file with some code and run it to see if its generating appropriate JavaScript code. When you try to run the TypeScript code, VS Code will prompt you with message saying “Task Runner config file is not present”. Next to this message will be a button to add the task runner file. Click on it and it will add the appropriate task runner file. With task runner file in place, you are good to go ahead with full fledge development in TypeScript in VS Code.

       

      Contact Me

      rk.pawan@gmail.com | +1-737-202-7676 | LinkedIn | Facebook | Github |

      1 Comment

      • Your 4th step: tsc -v
        only works if the user has previously installed typescript for Visual Studio 2013 or 2015.

        Simply doing "npm install -g typescript" does not download and install the typescript compiler anywhere. Unfortunately, it seems that simply installing VS Code on a machine that was not previously setup with Visual Studio 2013/2015 does not install it either.

      Add a Comment

      As it will appear on the website

      Not displayed

      Your website