TypeScript中使用express-handlebars注册模板引擎时报类型错误如何解决

这是express-handlebars v6.x版本内置的TypeScript类型定义，与@types/express中app.engine方法要求的模板引擎函数类型不匹配导致的静态类型校验报错，代码本身运行时逻辑没有问题。

方案1：添加类型断言（推荐，无需修改依赖） #

直接对engine()的返回值做类型声明即可绕过校验，修改后代码如下：

import express from 'express';
import { engine } from 'express-handlebars';
const app = express();

// 新增类型断言解决类型不匹配问题
app.engine("hbs", engine() as unknown as (path: string, options: object, callback: (e: any, rendered?: string) => void) => void);

// 后续模板配置可正常书写
app.set("view engine", "hbs");
app.set("views", "./views");

如果不需要严格的类型校验，也可以用as any替换上述长类型声明，写法更简洁。

方案2：降级到v5.x版本 #

不想使用类型断言的话，可以回退到类型适配更成熟的v5版本：

1. 执行命令卸载现有版本：npm uninstall express-handlebars
2. 执行命令安装v5版本及对应类型包：npm install express-handlebars@5.3.4 @types/express-handlebars@5.3.1
3. 修改代码适配v5版本的API：

import express from 'express';
import exphbs from 'express-handlebars';
const app = express();

app.engine('hbs', exphbs({ extname: '.hbs' }));
app.set('view engine', 'hbs');
app.set('views', './views');

内容的提问来源于stack exchange，提问作者Ramón de León