TypeScript brings a static type system to JavaScript. It helps in code organizing. In this tutorial, let's see how we can set up a node.js typescript project, compile and execute the code.
Initialize the node project
npm init -y
Initialize TypeScript
npm install typescript --save-dev
Install the base configuration of TypeScript for Node
npm install @tsconfig/node16 --save-dev
Create the tsconfig.json file
This file defines the compilation options for TypeScript.
This command creates a tsconfig.json file with all the available options which can be set for the typescript compiler.
npx tsc --init
We do not need to use the majority of the options specified in tsconfig.json. We can delete them and keep only what we require for this project. Your tsconfig.json file should look like this:
{
"extends": "@tsconfig/node16/tsconfig.json",
"compilerOptions": {
"lib": ["es2021"],
"module": "commonjs",
"target": "es5",
"allowJs": true,
"outDir": "build",
"rootDir": "src",
"strict": true,
"noImplicitAny": true,
"esModuleInterop": true,
"resolveJsonModule": true
},
"include": ["src"],
"exclude": ["node_modules"]
}
All the typescript code should be in the src folder.
Installing the Express web app framework
npm install express
Install the types required for Node & Express
npm install --save-dev @types/express @types/node
Create the src folder and create an index.ts file
Open the folder in the VSCode editor. Create a folder 'src' and create a file inside it named 'index.ts'. After you do so, your folder should look like this:
Create an Express server in index.ts
import express, { Express, Request, Response } from 'express';
const app: Express = express();
const port = process.env.PORT || 3000;
app.get('/', (req: Request, res: Response) => {
res.send('Hello World');
});
app.listen(port, () => {
console.log(`Server is listening on port ${port}`);
});
Compiling TypeScript code
npx tsc
TypeScript will compile the code and output it to the build folder as 'build/index.js' file.
Run the code
node build/index.js
Visit http://localhost:3000 in a browser. You should see Hello World.
Watching for file changes
To enable recompiling when a file changes, we need to install two npm packages.
npm install --save-dev nodemon ts-node
In the package.json file, add the key nodemonConfig. Its value will as shown below:
"nodemonConfig": {
"watch": ["src"],
"ext": ".ts,.js",
"ignore": ["test/*", "docs/*"],
"exec": "ts-node ./src/index.ts"
}
In the package.json, add another key to run the dev server for local development under the 'scripts' key. The 'scripts' should look like this as shown below:
"scripts": {
"dev": "nodemon"
}
To start development, simply run
npm run dev