Getting Started Using TypeScript with Node.js and Express

Getting Started Using TypeScript with Node.js and Express

Image for post

What is TypeScript?

TypeScript is a strongly typed, object-oriented, compiled language. It was designed by Anders Hejlsberg (designer of C#) at Microsoft. TypeScript is both a language and a set of tools. TypeScript is a typed superset of JavaScript compiled to JavaScript. In other words, TypeScript is JavaScript plus some additional features.

Typescript provides optional static typing, classes, and interface. For a large JavaScript project adopting Typescript can bring you more robust software and easily deployable with a regular JavaScript application.

Image for postWeb Search worldwide in the last 12 months

Why TypeScript is getting popular day by day?

Since, Typescript is an object-oriented language which makes the app code more consistent, clean, simple, testable and reusable. So it should better to use typescript for developing large projects.

Comparison Between TypeScript vs JavaScript

Type: Typescript is a strongly typed object-oriented compile language whereas JavaScript is a lightweight, interpreted programming language.

Design & Developed: TypeScript was designed and developed by Anders Hejlsberg at Microsoft whereas Javascript was by Brendan Eich at Netscape Communications Corporation, Mozilla Foundation, ECMA International.

Light/Heavy Weight: TypeScript is a heavy weighted. an interpreted programming language whereas JavaScript is a light weighted It is specially designed for development of large application and trans compile to JavaScript.

Client Side/ Server Side: TypeScript is specially used in Client-Side these days whereas JavaScript is used at both client-side and server-side.

TypeScript Benefits:

  • Static Typing
  • A better choice for large Coding Projects
  • Better for collaboration.o When large coding projects have many developers. In that time there is a chance of messier coding. And a number of errors increase which makes the handling difficult. So Type safety has a feature to detect errors during coding time. Which makes more efficient code and also we can debug it easily.
  • Better productivity. o Features like ? o ECMAScript 6 code, dynamic typing, auto-completion are helped developer?s to boost their productivity.

JavaScript Benefits:

  • It has a huge active community of developers which make it more popular language.
  • It supports native browsers. Whereas for Typescript will first compiled and converted to javascript. Which is creating one extra step.
  • With raw javascript, the lines of code are more so it difficult to maintain and make it error-free when the code size increases than its counterpart.
  • More Flexibility.

Setup a Nodejs Express project with Typescript

Create a New Project

npm init

Install typescript package

Node.js engine runs Javascript and not Typescript. The node Typescript package allows you to transpile your .ts files to .js scripts. Babel can also be used to transpile Typescript, however, the market standard is to use the official Microsoft package.

npm install typescript

Update package.json file by adding ?tsc? in scripts tag to call typescript functions from the command line

?scripts?: {…….., ?tsc?: ?tsc?}

Now run below command:

npx tsc –init

This command initializes the typescript project by creating the tsconfig.json file.

Install Express

npm install express @types/express

By default, Typescript does not ?know? types of Express classes. There is a specific npm package for the Typescript to recognize the Express types.

Create Server.ts file(server/server.ts)

import express = require(?express?);// Create a new express app instanceconst app: express.Application = express();app.get(?/?, function (req, res) {res.send(?Hello World!?);});app.listen(3000, function () {console.log(?App is listening on port 3000!?);});

Compile the above code by running below command:

npm run tsc

After running above command a new file is created in server folder named server.js(Mainly Ts code is converted in Js)

Run the app:

node server/server.js

Check on the browser on URL: http://localhost3000

Image for postApp on Browser

Watch the Demo Tutorial: https://www.youtube.com/watch?v=clM4Dmn7Sbs

GitHub Link: https://github.com/pankajkrr/nodejs-express-ts

I hope this article will remove the fear of TypeScript to get started in Node.js Express Application.

Thanks!

17

No Responses

Write a response