Following are the steps to setup development environment and writing simple node program using typescript. These steps covers
- Setup Sublime Text IDE for typescript
- Setup typescript development environment
- create simple node program using node js
- running the program in terminal
- debugging the program using chrome developer tool
-
Let's create a working folder first
mkdir nodejs-typescript
-
Open the folder in sublime text
-
Prepare sublime text for working with typescript by installing required packages
- press cmd + shift + p in mac or ctrl+shift+p in windows to open sublime command palette
- select "Package Control: Install Package", this will show package installer window where you can browse and install packages. If Package controler is not installed follow instruction in the link "https://packagecontrol.io/installation" then repeat from 1st step.
- search and install these packages "Typescript" and "SublimeLinter-tslint".
-
Make sue that you have node installed. If not check this link "https://nodejs.org/en/download/" to install node.
-
Initialize node project by running following command. you will be asked some questions, answer them or you may also skip them.
npm init
-
Package.json file will be created in the working folder.
-
Install necessary node packages in the project folder
- "typescript" for transpailing typescript to javascript
npm install typescript --save-dev
- "ts-node" to run typescript files. This is wrapper to node to run .ts files
npm install ts-node --save-dev
- "@types/node" which is types definitions of node javascript api so that they can be used in typescript
npm install @types/node --save-dev
- "typescript" for transpailing typescript to javascript
-
Initialize typescript config. "npx" is command to run cli commands installed locally
npx tsc --init
-
In sublime text right click on the root folder and create new files named "index.ts" and greeter.ts
-
Add following codes to greeter.ts file
'use strict' export class Greeter{ name:string; // property of string type constructor(name:string){ this.name = name; } // sayHello function with string return type sayHello():string{ // Notice backtik ` in the below string litral not single quote ' let greeting = `Hey ${this.name}, you did it!! Welcome to typed world of typescript.`; return greeting; } }
-
Add following code to index.ts file. Do not forget to pass your name to Greeter constructor.
'use strict' import {Greeter} from './greeter' //import Greeter class exported in greeter module let greeter = new Greeter('Dev'); console.log(greeter.sayHello());
-
Open the package.json file and change script block to following
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "debug": "node --inspect-brk --require ts-node/register index.ts", "start": "node --require ts-node/register index.ts" },
-
Now run the program
- Open terminal and make sure your current director is root folder of this project
- Run following command to run the program. Remember that we defined the start command in package.json file.
npm run start
- You should see greeting in the command terminal
-
Debug the program in chrome developer tools
- Open terminal and cd to project rood directory
- Run following commands, then terminal will wait for debugger to connect
npm run debug
- Open chrome browser and enter following url in address bar "chrome://inspect". Then click link with text "Open dedicated DevTools for Node"
- Chrome debugger will open with breakpoint at 1st line of index.ts
-
Thats all enjoy programming in nodejs with typescript