Steps to setup TypeScript in Visual Studio

How to setup the Environment for TypeScript.

Prerequisite:

Npm.

Editors:

·        Visual Studio 2013 or New Version.

Visual Studio Code extension (https://code.visualstudio.com/blogs) etc.

Steps:

·        Create a Project folder.

e.g. D:\Shrikant\typescript demo

·        Go to Project folder in Command Prompt or Node.js Prompt.

C:\Windows\System32>D:

C:\Windows\System32>cd D:\Shrikant\typescript demo

·        Create Project Meta data file Or Root file (Package.json) using below command

“npm init”. This will ask for project details such name, version and author etc.

 Fill the details or press enter.

e.g. D:\Shrikant\typescript demo>npm init

Result: This utility will walk you through creating a package.json file.

It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields

and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and

save it as a dependency in the package.json file.Press ^C at any time to quit.

name: (typescript demo) ShrikamtM

Sorry, name can no longer contain capital letters.

name: (typescript demo) shrikantm

version: (1.0.0)

Invalid version: "      "

version: (1.0.0) 1

Invalid version: "1"

version: (1.0.0) 1

Invalid version: "1"

version: (1.0.0)

description:

entry point: (index.js)

test command:

git repository:

keywords:

author:

license: (ISC)

About to write to D:\Shrikant\typescript demo\package.json:

{

  "name": "shrikantm",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "dependencies": {

    "typescript": "^2.0.10"

  },

  "devDependencies": {},

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}

Is this ok? (yes)

·        Enter “y” to confirm creation of Package.json file.

·        Add typescript reference to project using below command.

D:\Shrikant\typescript demo>npm install --save-dev typescript

·        Go to .bin folder.

D:\Shrikant\typescript demo>Cd node_modules\.bin

·        Create typescript config file (tsconfig.json) using below code.

D:\Shrikant\typescript demo\node_modules\.bin>tsc –init

Result: message TS6071: Successfully created a tsconfig.json file.

·        Move tsconfig.json manually to root folder where package.json file is present.

·        Start typescript Compiler Watcher for automatic conversion of typescript files to Javascript using below command.

D:\Shrikant\typescript demo\node_modules\.bin>tsc –w

Note: - It will convert all typescript files present in same folder or subfolder where tsconfig.json is present.

Or

·        If you want to manually compile the typescript file then use below command.

D:\Shrikant\typescript demo\node_modules\.bin>tsc ..\..\fileName.ts

·        Now we are ready to create typescript files.