How To Use MERN Stack With TypeScript?
- pankajsharmaaji1
- Apr 14
- 3 min read
Introduction
The MERN stack is a popular way to build full-stack web applications using MongoDB, Express.js, React, and Node.js. When you add TypeScript to the mix, it helps catch errors early, makes your code more organized, and improves your overall development experience. TypeScript adds type safety to JavaScript, making your apps more reliable. Refer to the MERN Course to learn how MERN Stack and TypeScript Work Together. In this guide, you’ll learn how to set up and use the MERN stack with TypeScript step by step in a simple and clear way.
Using MERN Stack With TypeScript
Using the MERN stack with TypeScript is a great way to build full-stack web applications with strong typing, better error checking, and improved developer experience. The MERN stack includes MongoDB, Express.js, React.js, and Node.js, and adding TypeScript enhances the overall code quality.
Here’s a guide on how to use the MERN stack with TypeScript.
Why Use TypeScript with MERN?
TypeScript is a typed superset of JavaScript that catches errors at compile time and improves code readability and maintainability. When used with MERN, it helps in:
Reducing runtime errors
Improving code completion and suggestions in IDEs
Making large codebases more manageable
Step-by-Step Setup
Below is a detailed guide on how to use MERN Stack with TypeScript. Refer to the MERN Certification courses for the best guidance.
1. Set Up the Backend with Node.js, Express, and TypeScript
Initialize your Node project
“mkdir backend
cd backend
npm init -y”
Install dependencies
“npm install express mongoose
npm install --save-dev typescript ts-node @types/node @types/express nodemon”
Create TypeScript config
“npx tsc –init”
· Update tsconfig.json for Node:
“{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
}
}”
File structure
“backend/
├── src/
│ ├── index.ts
│ └── routes/
│ └── userRoutes.ts
├── tsconfig.json”
Sample Express Server (src/index.ts)
“import express from 'express';
const app = express();
app.use(express.json());
app.get('/', (req, res) => {
res.send('API is running');
});
const PORT = 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));”
2. Set Up the Frontend with React and TypeScript
Create React App with TypeScript
“npx create-react-app frontend --template typescript”
React will now support .tsx files (TypeScript with JSX).
Sample React Component (src/App.tsx)
“import React from 'react';
const App: React.FC = () => {
return (
<div>
<h1>Hello MERN with TypeScript</h1>
</div>
);
};
export default App;”
3. Connecting Frontend and Backend
Enable CORS on backend
· Install CORS:
“npm install cors”
· Use it in index.ts:
“import cors from 'cors';
app.use(cors());”
Use axios on frontend to fetch backend data
· Install Axios:
“npm install axios”
· In App.tsx:
“import React, { useEffect, useState } from 'react';
import axios from 'axios';
const App: React.FC = () => {
const [message, setMessage] = useState('');
useEffect(() => {
axios.get('http://localhost:5000/')
.then(res => setMessage(res.data))
.catch(err => console.error(err));
}, []);
return <div>{message}</div>;
};
export default App;”
4. Working with MongoDB and Mongoose in TypeScript
Install mongoose types:
“npm install @types/mongoose”
Create models with interfaces:
“import mongoose, { Document } from 'mongoose';
interface IUser extends Document {
name: string;
email: string;
}
const UserSchema = new mongoose.Schema({
name: String,
email: String,
});
const User = mongoose.model<IUser>('User', UserSchema);
export default User;”
Conclusion
Using the MERN stack with TypeScript combines the flexibility of JavaScript with the safety and structure of TypeScript. This setup boosts productivity, reduces errors, and makes code easier to manage in large-scale applications. Many Mern Stack Interview Questions include questions on TypeScript, thereby, making it an essential topic for the MERN professionals. With TypeScript, both frontend and backend become more reliable and maintainable. By following the steps above, you can confidently build full-stack applications that are scalable, efficient, and easier to debug throughout the development process.
Comments