Express+Typescript调用res.status报Number无调用签名错误解决

问题描述 #

我刚接触 TypeScript，尝试搭建基于 TypeScript 运行的 Express 服务，使用 axios 获取数据后编写了如下代码：

import express, { Response, Request } from 'express'
// 其他逻辑省略
app.get('/api/mk', async (req: express.Request, res: express.Response) => {
    await axios
        .get('http://localhost:8080/rest/kuk/v1/ownerMKKOL/getALL')
        .then((axiosResponse) => {
            const { data } = axiosResponse
            return res.status(200).send(data)
        })
        .catch((err) => err)
})

运行时收到报错，错误信息如下：

This expression is not callable. Type 'Number' has no call signatures. TS2349
我不确定是否需要扩展 Response 接口，寻求对应的解决方案。

问题根因与解决方案 #

根因定位 #

项目结构不合理导致前后端类型定义冲突。原项目结构如下：

Root
|-- React App
    |-- Server
    |   |-- package.json
    |   `-- 其他服务端文件
    `-- package.json
        `-- 其他前端文件

从 React App 目录下执行构建命令时，TypeScript 编译器会同时加载前端和服务端的类型声明文件，类型冲突导致 res.status 被错误识别为数字类型而非方法，触发 TS2349 报错。

解决方案 #

调整项目结构，将前端和服务端项目拆分到根目录下的独立文件夹，避免类型声明冲突：

Root
|-- Server
|   |-- package.json
|   |-- express.ts
|   `-- 其他服务端文件
`-- Client
    |-- package.json
    `-- 其他前端文件

调整结构后重新执行构建命令，报错自动消失，不需要额外扩展 Response 接口。

内容的提问来源于stack exchange，提问作者Pascal