In this Node.js tutorial, I will walk you through setting up TypeScript in your Node.js projects.
What is TypeScript?
TypeScript is an open-source programming language designed as a superset of JavaScript and adds capabilities to the language. It is developed and maintained by Microsoft and is a favorite of many developers across the world!
The most prominent contribution of TypeScript is static type definitions, which don’t exist in plain JS. With types, it is possible to declare what will be the shape of our created object.
The shape of an object basically refers to the kinds of arguments we expect and what exactly is returned in our functions.
TypeScript is powerful enough to enhance the possibilities of JavaScript projects. It also provides developers with fixes before they run the code which saves a lot of programming time. It integrates beautifully with code editors like Visual Studio Code, which is again a Microsoft offering.
Now, because the browser doesn’t understand TypeScript, your code needs to be compiled into the browser’s language i.e. JavaScript. Compiling is the process of translating the source code in a particular programming language to the machine language or code.
Here’s an excellent answer on Stack Overflow I recommend you read, to get an in-depth understanding of TypeScript.
Prerequisites:
- Basic knowledge of Node.js, Express.js & TypeScript
- Node.js version 12 or above
Getting Started with TypeScript in NodeJS Projects
We will be using the popular Express framework for our web server in this tutorial.
Installation
Let us start by starting our project:
Now, let’s install TypeScript & Express in our project:
npm install typescript ts-node @types/node @types/express --save-dev
You must have noticed we’re installing TypeScript-related dependencies as devDependencies. We are this because our TypeScript code will be compiled as plain JavaScript. Hence, it is not necessary that we use it for runtime as it we are using TypeScript only during development.
When the developer is the only ‘user’ of a package, it is always recommended to install them as a dev dependency.
Going forward, our package.json should now look like this after completing dependency installations :
"name": "4_TYPESCRIPT_APP",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"@types/express": "^4.17.12",
"@types/node": "^16.0.0",
"ts-node": "^10.0.0",
"typescript": "^4.3.5"
}
}
TypeScript Configuration
Although you installed TypeScript, unlike other packages, we cannot use it yet. We now need to configure it by creating a tsconfig.json file. This will indicate that the directory is the root of a JavaScript or TypeScript project.
After you run this command, the tsconfig.json file that we talked about, will be created. This file will contain code that is mostly commented out.
Setting up an Express Server with TypeScript
Now that we have configured TypeScript, we can successfully use it!
Let us start by creating an index.ts (notice it is .ts and not js) file which is a TypeScript file and setting up our Express web server:
const app = express();
app.get('/', (req, res) => {
res.send('hello.');
})
app.listen(3000, () => {
console.log('Listening on port 3000!');
})
With this, we now have a simple app running on localhost:3000 that displays a message ‘hello.’. As of now, our app isn’t taking advantage of TypeScript as this tutorial is just to help you set up TypeScript for your Node.js project.
We can now compile it with the tsc command in the terminal. Our command should then look like this:
Once you run this command, a new file named index.js is created. Here is where the compiled JavaScript version of our TS code resides.
The –project flag indicates the TypeScript files location to pick from. Lastly, ‘./’ indicates the root of the project.
Automating Compilation
It can be laborious to write npx tsc –project ./ every time you want to compile your code. We could automate this, by adding a script to the package.json file that would take care of that for us.
In the package.json file, add the following line of code under scripts:
With this done, we can now simply run npm run build to compile the code making it quicker and easier.
Conclusion
TypeScript is an open-source superset of JavaScript, created by Microsoft, and adds capabilities to the language. With this tutorial, you can learn how to precisely set up TypeScript for your projects.
Make developing with Node.js easier! Click here to know the Top 5 Node Frameworks to Increase Productivity
