If you're a JavaScript developer, you may have heard of TypeScript, a superset of JavaScript that adds optional static typing and other features. TypeScript has become increasingly popular in recent years, and many developers are using it with Node.js and Express.js to build scalable, maintainable applications.
In this article, we'll show you how to get started with TypeScript and Node.js Express.js, step-by-step. Whether you're new to TypeScript or just getting started with Node.js Express.js, this article will provide you with the knowledge you need to get up and running quickly.
Prerequisites
Before we dive into using TypeScript with Node.js Express.js, there are a few things you'll need to have installed on your machine:
- Node.js: You can download Node.js from the official website. We recommend using the latest LTS version.
- NPM: NPM comes bundled with Node.js, so if you have Node.js installed, you should also have NPM installed.
- TypeScript: You can install TypeScript globally using the following command:
npm install -g typescript
Getting Started
Once you have the prerequisites installed, we can start setting up our project. We'll be using NPM to manage our dependencies, so the first thing we need to do is create a new directory for our project and initialize it with NPM:
mkdir my-project
cd my-project
npm init -y
This will create a new directory called "my-project" and initialize it with a default package.json file.
Next, we need to install the required dependencies for our project. We'll be using the following dependencies:
- express: The popular Node.js web framework.
- @types/express: TypeScript definitions for Express.js.
- body-parser: Middleware for parsing HTTP request bodies.
- @types/body-parser: TypeScript definitions for body-parser.
To install these dependencies, run the following command:
npm install express @types/express body-parser @types/body-parser
This will install the required dependencies and save them to our package.json file.
Setting up TypeScript
Now that we have our project set up and our dependencies installed, we can start setting up TypeScript. First, we need to create a new TypeScript configuration file called "tsconfig.json" in the root directory of our project. This file will tell the TypeScript compiler how to compile our code.
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true,
"outDir": "dist"
},
"include": [
"src/**/*"
]
}
In this configuration file, we're setting the target to ES6, which is the version of ECMAScript that we want to target. We're also setting the module to commonjs, which is the module system that Node.js uses. We're enabling source maps, which will allow us to debug our TypeScript code in the browser. Finally, we're specifying an output directory of "dist", which is where the compiled JavaScript code will be placed.
Next, we need to create a new directory called "src" in the root directory of our project. This is where we'll store our TypeScript code.
Writing TypeScript Code
Now that we have TypeScript set up, we can start writing our code. Let's create a new file called "app.ts" in the "src" directory.
import express from 'express';
import bodyParser from 'body-parser';
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.get('/', (req, res) => {
res.send('Hello, World!');
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server listening on port ${PORT}`);
});
In this code, we're importing the "express" and "body-parser" modules, which we installed earlier. We're creating a new instance of the Express.js app, and using the "body-parser" middleware to parse HTTP request bodies. We're then defining a route for the root path ("/"), which will send the text "Hello, World!" to the client when the path is accessed. Finally, we're starting the server and listening on port 3000.
Compiling TypeScript Code
Now that we've written our TypeScript code, we need to compile it to JavaScript before we can run it. We can do this using the TypeScript compiler, which we installed earlier.
To compile our code, run the following command in the root directory of our project:
tsc
This will compile our TypeScript code to JavaScript and place it in the "dist" directory, as specified in our "tsconfig.json" file.
Running the Server
Now that we've compiled our code, we can start the server by running the following command in the root directory of our project:
node dist/app.js
This will start the server and listen on port 3000. If you open your web browser and navigate to http://localhost:3000, you should see the text "Hello, World!" displayed in your browser.
Conclusion
In this article, we've shown you how to use TypeScript with Node.js Express.js. We've covered the basics of setting up a TypeScript project, installing dependencies, writing TypeScript code, compiling the code to JavaScript, and running the server. We hope that this article has provided you with the knowledge you need to get started with TypeScript and Node.js Express.js, and that you're now well on your way to building scalable, maintainable applications with these powerful tools.