Property 'status' does not exist on type 'ServerResponse' (TS2339)

Question

I have tried creating an interface, installing react types, the only way this works is when i put the code in JavaScript but in a TS project, it gives me error:

Property 'status' does not exist on type 'ServerResponse' (TS2339)

Here's the code:

import multer from 'multer';
import nc from "next-connect";


const upload = multer({
  storage: multer.diskStorage({
    destination: './public/uploads',
    filename: (req, file, cb) => cb(null, file.originalname),
  }),
});

const apiRoute = nc({
  onError(error, req, res) {
    res.status(501).json({ error: `Sorry something Happened! ${error.message}` });
  },
  onNoMatch(req, res) {
    res.status(405).json({ error: `Method '${req.method}' Not Allowed` });
  },
});

apiRoute.use(upload.array('theFiles'));

apiRoute.post((req, res) => {
  res.status(200).json({ data: 'success' });
});

export default apiRoute;

export const config = {
  api: {
    bodyParser: false, // Disallow body parsing, consume as stream
  },
};

How to fix the typings?

Answer 1

By default, the base interfaces of req and res are IncomingMessage and ServerResponse . When using in API Routes, you should set them to NextApiRequest and NextApiResponse by providing the generics to the factory function like so:

import { NextApiRequest, NextApiResponse } from "next";
import nc from "next-connect";

const apiRoute = nc<NextApiRequest, NextApiResponse>({
  onError(error, req, res) {
    res.status(501).json({ error: `Sorry something Happened! ${error.message}` })
  },
  onNoMatch(req, res) {
    res.status(405).json({ error: `Method '${req.method}' Not Allowed` })
  },
})

apiRoute.post((req, res) => {
  res.status(200).json({ data: 'success' })
})

It will provide you the correct typings, so that you can use status method of res object without any TypeScript error.

See the docs .