A Guide to Set Up Node.js Express with TypeScript

Overview

In the fast-paced world of web development, creating scalable and maintainable applications is crucial. One powerful combination for building robust server-side applications is Node.js, Express.js, and TypeScript. In this blog post, we will explore the process of setting up a Node.js Express project using TypeScript, providing you with the benefits of static typing while harnessing the full potential of the Express framework. 

Introduction

TypeScript:

TypeScript is an open-source, object-oriented programming language that is a strongly typed superset of JavaScript. It cannot run directly on a browser, but it needs to be compiled into a plain JavaScript file by a compiler. TypeScript provides typing to JavaScript, which makes it more suitable for large-scale JavaScript application development. TypeScript code can be executed on any browser, host, or operating system. TypeScript source files have the .ts extension. Any valid .js file can be used as a TypeScript source file by renaming it to .ts. TypeScript uses the TypeScript Compiler (TSC) to convert TypeScript code (.ts files) to JavaScript (.js files).

Node.js:

Node.js is a popular open-source server-side JavaScript runtime environment. It runs on various platforms, including Windows, Linux, Unix, and Mac OS. Node.js uses asynchronous programming for its input-output operations, allowing it to handle many concurrent connections without blocking. It is designed for scalable network applications. It uses asynchronous programming to handle many concurrent connections, making it ideal for real-time applications such as chat servers and web games.

Need For TypeScript

TypeScript is a statically typed superset of JavaScript that offers several web and application development advantages. Here are some key reasons why developers choose TypeScript:

• Strong Typing: TypeScript enforces static typing, which means that variables, function parameters, and return values have predefined types. This helps catch type-related errors at compile-time rather than runtime, making code more robust and reliable.
• Improved Code Quality: With TypeScript’s type checking, developers can write safer and more self-documenting code. This reduces the likelihood of runtime errors and makes it easier for other developers to understand and maintain the codebase.
• Enhanced Tooling: TypeScript provides advanced tooling and IDE support. Features like code navigation, auto-completion, and inline documentation (intellisense) help developers be more productive and write error-free code.
• Readability and Maintainability: TypeScript’s type annotations and interfaces make code more readable and understandable. This is particularly beneficial in larger codebases and when working in teams, as it provides clear expectations about data shapes and function signatures.
• Ecosystem and Compatibility: TypeScript is designed to be compatible with existing JavaScript code, libraries, and frameworks. You can incrementally adopt TypeScript in your project without rewriting everything.
• ES6+ Features: TypeScript supports modern JavaScript features and ECMAScript standards (ES6, ES7, etc.). This allows developers to use the latest language features and APIs while targeting different JavaScript versions for compatibility.
• Error Prevention: TypeScript can catch common programming errors early in development, reducing the need for extensive testing and debugging.
• Tool Integration: TypeScript integrates seamlessly with popular build tools like Webpack and Babel and task runners like Gulp and Grunt. It works well with popular frontend frameworks like Angular, React, and Vue.js.
• Community and Support: TypeScript has a growing and active community, which means you can find plenty of resources, libraries, and documentation to support your development efforts.
• TypeScript Definitions (Typings): TypeScript provides type definitions for popular JavaScript libraries through DefinitelyTyped or the @types This ensures that even third-party libraries can be used with type safety.

Steps to Use TypeScript in NodeJS Express Project

In this application, I am using VS Code Editor. You can choose any IDE or Editor.

1. We should install TypeScript in our system. This can be done by running the below command-

Through typescript, we can use the “tsc” command.

2. We will create a NodeJS project. Create your project directory, open the terminal, and navigate to the project directory. In your terminal, give the command

It will generate a boilerplate for our node application and create “package.json” file.

3. Next, we will install all the dependencies required in our project.

• typescript – With this, we can use typescript in our project.
• express – It is our NodeJS framework
• ts-node – With this, we can run the node app in typescript directly without the precompilation.
• nodemon – It will watch the server for changes and re-run our application when our code changes.
• @types/node – With this, we can use custom typescript types for nodes.
• @types/express – With this, we can use custom typescript types for express.

4. Next, in your terminal, run the command

It will create a typescript config file, “tsconfig”. In this file, there will be many compiler options present that we can use in our typescript projects. The required options will be uncommented, and the rest will be commented. Here, we have to change “target” to “ES6”, “rootdir“ to “./src and outdir” to “./dist”.

We will create a src folder and an “app.ts” file.

In our package.json file, we have to change the script commands.

• node dist/app.js— To run the node app in JavaScript.
• nodemon src/app.ts— To run the node app in TypeScript.
• tsc -p .— To compile the TypeScript.

5. Now we will add basic code to our app.ts

Its compiled app.js file will contain

It will create a production ready “dist” folder.

Conclusion

Setting up Node.js Express with TypeScript is a powerful combination that offers numerous benefits for modern web development.

By following the steps outlined in this guide, you can kickstart your development journey with this technology stack.

Drop a query if you have any questions regarding TypeScript and we will get back to you quickly.

About CloudThat

CloudThat is an official AWS (Amazon Web Services) Advanced Consulting Partner and Training partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, Amazon QuickSight Service Delivery Partner, AWS EKS Service Delivery Partner, and Microsoft Gold Partner, helping people develop knowledge of the cloud and help their businesses aim for higher goals using best-in-industry cloud computing practices and expertise. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Our blogs, webinars, case studies, and white papers enable all the stakeholders in the cloud computing sphere.

To get started, go through our Consultancy page and Managed Services Package, CloudThat’s offerings.