How to use Typescript with NodeJS + Express
If you have worked with Angular projects, I’m sure that you are familiar with Typescript. But have you ever thought using it in your NodeJs backend?
Typescript, we can simply say that it is a superset of Javascript which brings optional static type-checking. Also Javascript programs are valid Typescript programs.
I used to code Nodejs backends with Javascript. But when i get hang of Typescript, I realized how easy it is. When you code with Typescript, it is really easy to catch the issues before executing the code. Since the syntaxes are similar to C#, Java it’s really easy to learn if you are familiar with those languages.
Assuming you are already familiar with NodeJS, time to get back into our topic. If you know NodeJs, you probably should have heard about the most popular web framework, ExpressJS.
To get started, initialize a npm project in a selected directory, using npm init.
Now you have to install dependencies.
We need to install Typescript as dev dependency.
npm i -D typescript
Great, now we can install our framework by using following commands.
npm i express
npm i -D @types/express @types/node
The second command installs typings for ExpressJS. Since ExpressJS and Typescript are independent packages, there is no way for Typescript to know about the types of the ExpressJS classes.
Installing those package is not enough, we need to configure our project for Typescript. For that we need to have a file called tsconfig.json. You can simply create that file by using the following command on your directory.
tsc --init
That file will have a list of properties which you can configure, and also those properties are described there in the comments. If you want to know more about those key-value options, you can find all the details here. In our case, we just need the following configuration.
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "compilerOptions": { "module": "commonjs", "esModuleInterop": true, "target": "es6", "moduleResolution": "node", "sourceMap": true, "outDir": "dist" }, "lib": ["es2015"] } |
Now we will create a src folder in the root directory which is where our Typescript files are going to be. Inside of the directory lets create a file, app.ts. Now our project structure should look like this;
|
1 2 3 4 5 6 |
├── node_modules ├── src/ ├── app.ts ├── package-lock.json ├── package.json ├── tsconfig.json |
Now let’s create our express server. To do that paste the following code into the app.ts file we created earlier.
|
1 2 3 4 5 6 7 8 9 10 |
import express from 'express'; const app = express(); app.get('/', (req, res) => { res.send('Hello World!'); }); app.listen(3000, () => { console.log('Server is running...') }); |
That is a very basic express server which simply returns ‘Hello World!’ when you make a GET request to http://localhost:3000.
To start the server you just have to execute the following command.
tsc && node dist/app.js
This command will compile Typescript code into Javascript and the compiled ones will be in the dist folder which is the output directory we configured earlier in the tsconfig.json file. From there we are going to start the node server.
If it runs successfully, we get a message on the console saying ‘Server is running…’. Now you can make the GET request. For that you can simply visit the http://localhost:3000 on the browser and you will see the message.
You can add the above command as the npm start command, so that next time you can just do a npm start.
Alternatively, you can install ts-node which is something similar to nodemon. With that you don’t need to run command every time when you make a change in the code. ts-node will automatically detect the changes, compiled it and restart the server.
If you are using ts-node, just run ts-node src/app.ts.
Great! Now you have working Nodejs project with Typescript.
Yes. It is just the name. 😉 Serverless does not mean that there are no servers involved. It simply means, the developers don’t have to think about server management and low-level infrastructure. The cloud provider will be responsible for managing resources, provisioning, patching and make servers available for the tasks. So that the developer can focus only in coding. 👨💻
