Browsed by
Month: October 2016

Setting up TypeScript in Visual Studio Code.

Setting up TypeScript in Visual Studio Code.

Install Node

NodeJS is a server side JavaScript framework but also used in a lot of frontend technologies as a package manager for various js plugins.
Whether you are a JavaScript developer or not, you must learn the basic of nodejs.
You can install nodejs from nodejs.org

After installing node, verify it by going to the command line and run these commannds.

you should get the version numbers for both the commands.

Install TypeScript

TypeScript can be installed in multiple ways
1. From npmjs.org
2. From typescriptlang.org
3. For Visual Studio users, You can download it from here

g – global.

Download Visual Studio Code

Visual Studio Code can be downloaded from code.visualstudio.com

Configure Visual Studio Code

The root folder of the project should have these following files

1. package.json

Used by the npm package manager to download all the dependencies and run other startup scripts.

2. tsconfig.json

Used by the typescript compiler for compiling your typescript files. This file containes the various options that the compiler uses.
If nothing is specified, it will use the default options. A few options of tsconfig.json is listed below.

Complete list of typescript compiler options can be found here


TypeScript declaration files

In a typical JavaScript project, it is very common to use third party JavaScript frameworks like JQuery, Angular, React etc. If we have to use the code by using the variables
like $ or angular, TypeScript will show compiler errors like,
cannot find name '$'. For TypeScript, this is like a global variables and this should be fixed.
To fix this issue, there is a file called declaration file which has a extension *.d.ts which is usually developed by the framework developer. It is like a JSDOC for TypeScript compiler which checks whether the function or variable is declared before it is used at compile time and also gives the tooling support for developer by giving the intellisense options for the third party libraries.

For example, to install the declaration file for JQuery, the following command should be executed.

npm install --save-dev @types/jquery

To search for the declaration file for your third party js file, check this link. microsoft.github.io.


Compiling TypeScript files.

TypeScript files can be compiled by executing the following command tsc. The compiler will compile all the typescript files in the project including the node_modules folder. To fix this issue, an option has to be added to the tsconfig.json file. "exclude": ["node_modules"].

Running TypeScript compiler in watch mode.

To run the compiler in watch mode, use the following command. tsc -w.


Summary

In this post, I have covered the basic configuration needed to get started with TypeScript with Visual Studio Code.

Resources

  1. Visual Studio Code
  2. microsoft.github.io.
  3. typescriptlang.org – Offcial TypeScript page.
  4. TS lint source for tslint.json
  5. TypeScript compiler options for tsconfig.json