Implementing TypeScript in a MERN stack project with repository pattern: Facing controller issues

Backend
1 
// UserController.ts
import { RequestHandler } from 'express';

class UserController {
  private userService: any;

  constructor(userService: any) {
    this.userService = userService;
  }

  signup: RequestHandler = async (req, res) => {
    const { username, email, pass } = req.body;

    if (!username || !email || !pass) {
      return res.status(400).json({ error: 'Missing required fields' });
    }

    try {
      const result = await this.userService.addUser(username, email, pass);
      res.status(201).json({ message: result });
    } catch (err) {
      console.error(err);
      res.status(500).json({ error: 'Server error' });
    }
  };
}

// routes.ts
import express from 'express';
import { UserController } from './UserController';

const router = express.Router();
const userController = new UserController(/* inject user service */);

router.post('/signup', userController.signup);

export default router;

I’m working on a MERN project with TypeScript. I’ve set up my controller and routes as shown above. But when I try to use the signup method in my routes file, I get a TypeScript error. It says something about overload matches and missing properties.

How can I fix this error? Also, is there a better way to structure my code for proper error handling and cleaner architecture? Any tips on using TypeScript with Express controllers would be really helpful. Thanks!

2

hey, have u considered using dependency injection for ur UserService? it could make testing easier. also, maybe try using a custom error class for better error handling? just a thought. what kind of validation are u doing for the user input? curious to hear more about ur project!

3

I’ve encountered similar issues when implementing TypeScript in Express controllers. One approach that worked well for me was using class methods with arrow functions to preserve the ‘this’ context. Here’s an example:

class UserController {
  constructor(private userService: UserService) {}

  signup = async (req: Request, res: Response): Promise<void> => {
    try {
      const { username, email, pass } = req.body;
      const result = await this.userService.addUser(username, email, pass);
      res.status(201).json({ message: result });
    } catch (error) {
      res.status(500).json({ error: 'Server error' });
    }
  };
}

This approach eliminates the need for explicit type annotations on the method and avoids binding issues. Additionally, consider implementing a global error-handling middleware to centralize error management across your application. This can significantly improve code maintainability and error consistency.

4

yo creativechef, i’ve been there! try using async/await with a try/catch block in ur controller. it’ll make error handling easier. also, consider using zod for input validation - it’s super helpful with typescript. btw, have u looked into using interfaces for ur service? it could help with those typescript errors. good luck with ur project!