无需修改扩展名解决Next.js中类型注解仅支持TS文件错误

你遇到的错误是因为在JavaScript文件中使用了TypeScript的类型注解语法，又不想将文件改为.ts/.tsx扩展名，可通过以下两种方式解决：

方案1：移除类型注解，改用纯JavaScript写法 #

直接删除代码中的TypeScript类型标注，同时可以用JSDoc注释保留类型提示（可选）。修改后的代码如下：

import { NextApiRequest, NextApiResponse } from 'next';
import fs from 'fs';
import pickle from 'pickle';

/**
 * @param {NextApiRequest} req
 * @param {NextApiResponse} res
 */
export default function predict(req, res) {
    const { salt, vinegar } = req.body;

    // Load the model from the pickle file
    const model = fs.readFileSync('./pickle_model.pkl');
    const pickleModel = pickle.load(model);

    // Make a prediction using the model
    const prediction = pickleModel.predict([[salt, vinegar]]);

    res.status(200).json({ quality: prediction[0][0] }); 
}

方案2：配置Babel支持JS文件中的类型注解 #

如果想保留类型注解，可通过Babel插件让Next.js在JS文件中解析TypeScript类型语法：

• 安装依赖：

npm install --save-dev @babel/plugin-proposal-type-annotations @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

• 在项目根目录创建babel.config.js文件，添加配置：

module.exports = {
  presets: ['next/babel'],
  plugins: [
    ['@babel/plugin-proposal-type-annotations', { loose: false }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-proposal-object-rest-spread', { loose: true }]
  ]
};

注意：方案2需要额外维护Babel配置，对于简单场景，方案1更轻量易用。

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