Typescript Introduction

Introduction to Typescript

Typescript is a superset of JavaScript which allows for the creation of more readable code.

For more detailed information, check our this great post on dzone: https://dzone.com/articles/what-is-typescript-and-why-use-it

Installation

You will need:

• Node.js
• Typescript
• an IDE like VisualStudio Code
• Postman, or a browser like Firefox

To go through all of the installation steps for installing typescript, node.js, postman, and an ide like VisualStudio Code would be excessive. Below are the links to guides for that:

• https://www.npmjs.com/get-npm
• https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
• https://code.visualstudio.com/download
• https://www.postman.com/downloads/

Getting Started

Up first, you will want to create a project directory on your system, and then enter it.

$ mkdir -p practice/typescript/d6_tutorial

$ cd practice/typescript/d6_tutorial

$ npm init -y

This will create a file called package.json. It essentially describes your project and all of the dependencies associated with it. If you read the file you will see what I mean.

Now you will want to install typescript and tslint into the package. If you notice they will be added to the package.json so that future users of your package can install them

$ npm install -D typescript

$ npm install -D tslint

Now we will install the dependencies required to run an Express server on your computer

$ npm install -D express -S

$ npm install -D @types/express

$ npm install -D http

Up next, run $ tsc --init and then open the file tsconfig.json file. Find the "outDir" parameter and change it to "bin." This sets the output directory for all of our .js files to be bin.

Now you should configure the tslint settings. Run:

$ ./node_modules/.bin/tslint --init

and change the contents to be these:

{

    "defaultSeverity": "error",

    "extends": [

        "tslint:recommended"

    ],

    "jsRules": {},

    "rules": {

  "no console": false

 },

    "rulesDirectory": []

}

Here, we force the linter to allow for console debugging statements

Now we add a start script to our package.json file. This segment literally runs the input bash commands when you run "npm run start" in your console. It's a great way to shorthand things. Append my start script (found at line 7) into your package.json.

Now onto setting up a project folder structure.

While in the root directory type the following:

$ mkdir src

$ cd src

And then create a new file called app.ts.

Open the file and add the following to it:

import express from 'express';

import http from 'http';

const app = express();

http.createServer(app);

const port = 3000;

app.get('/', (req, res) => {

res.send("hello there, ........ GENERAL KENOBI, YOU ARE A BOLD ONE!");

});

app.listen(port, () =>{

try{

console.log(`server is listening on port ${port}`);

} catch(err){

throw err as Error;

}

});

After that, open up your terminal and run:

$ npm start

You should see 'server is listening on port 3000'

Postman

To see your output you can do two things:

• Go to your browser and navigate to "localhost:3000", you should see your res.send output
• Open Postman and do it the fun way

Open postman and skip the account creation section if you wish. There isn't a huge advantage to doing so

Next, click on the little "plus" (+) tab near the top of the page and make a GET request to localhost:3000 as shown in the pic. Your output message should display below. Using postman you can easily make your own get requests and view the outputs, it lends itself to scalability and flexibility in terms of inputs.

Note: a GET request usually asks for information, a POST request usually sends a change.

Node.js

To get node.js up and running, follow the installation guide up above. After that it should be as easy as running $ node JS_SCRIPT

For example, by running $ node hello.js and $ node http.js inside of the lesson 6 folder of Professor Kevin Lu's iot github we get the following output