In this article, we’ll cover a Best way to set up TypeScript in an Express app, understanding the basic constraints that come with it.
Table of contents
- Create a package.json file
- Installing TypeScript & other dependencies
- Generating tsconfig.json
- Create an Express server with a .ts extension
- Watching file changes and build directory
1. Create initial folder and package.json
mkdir node-express-typescript
cd node-express-typescript
npm init --yes
After initialize a package.json file , The newly created file might look something like the following code:
{
"name": "Your File Name",
"version": "1.0.0",
"description": "",
"main": "index.js", // Entry Point change it from js to .ts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"type": "module",
"keywords": [],
"author": "",
"license": "ISC"
}
2. Installing TypeScript & other dependencies
npm install express mongoose cors mongodb dotenv
npm install -D typescript ts-node-dev @types/express @types/cors
3. Generating tsconfig.json
npx tsc --init
The command above will generate a new file called tsconfig.json with the following default compiler options:
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
After opening the tsconfig.json file, you’ll see a lot of other compiler options that are commented out. In tsconfig.json, compilerOptions is a mandatory field that needs to be specified
- Set the rootDir and outDir as src and dist folder
{
"compilerOptions": {
"outDir": "./dist"
// other options remain same
}
}
4. Create an Express server with a .ts extension
Create a file name index.ts open it
import express, { Express, Request, Response , Application } from 'express';
import dotenv from 'dotenv';
//For env File
dotenv.config();
const app: Application = express();
const port = process.env.PORT || 8000;
app.get('/', (req: Request, res: Response) => {
res.send('Welcome to Express & TypeScript Server');
});
app.listen(port, () => {
console.log(`Server is Fire at http://localhost:${port}`);
});
5. Watching file changes and build directory
npm install nodemon
After installing these dev dependencies, update the scripts in the package.json file:
{
"scripts": {
"build": "npx tsc",
"start": "node dist/index.js",
"dev": "nodemon index.ts"
}
}
6. Run The Code
npm run dev
if everything if perfect you will see the message in console of
Server is Fire at http://localhost:8000
Top comments (9)
instead of nodemon in package.json it should have been ts-node-dev
yes this work can be done by ts-node-dev also
nodemon can run typescript files if you have the dependency ts-node installed.
everything will be fine..but even after running the server i can't find the dist folder
To see dist folder
after running this you will see dist folder
work well for me. thanks
Not working showing success message of server is runnig. But when i try to request something request pn pedning...
I think there is some mistake on your side
please recheck the code and try to set it up using the steps mentioned.
Everything is working. But in cases where I am not using typescript type properly, it's not giving any error while running server, any suggestions what I can use here?