TypeScript函数参数使用字符串联合类型时出现Unexpected token解析错误

报错原因及解决方法 #

这个报错是代码解析器无法识别TypeScript的联合类型语法导致的，按以下顺序排查即可：

• 确认文件后缀是否正确：如果代码写在.js/.jsx后缀的文件中，解析器会默认按JavaScript规则解析，无法识别TS类型注解，将文件后缀修改为.ts/.tsx即可。
• 确认项目是否配置了TypeScript环境：检查项目根目录是否存在tsconfig.json文件，如果不存在，执行npm init typescript初始化TS配置，再重新运行项目即可。
• 确认ESLint解析器配置正确（如果项目接入了ESLint）：如果是TS项目但还是报错，大概率是ESLint没有配置TS专用解析器，安装以下依赖：

  npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
  

  再修改项目的ESLint配置文件（.eslintrc.js/.eslintrc.json），新增以下配置：

  module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: ['plugin:@typescript-eslint/recommended']
  }
  

• 确认Babel配置正确（如果项目用Babel编译）：需要安装@babel/preset-typescript依赖，再将该预设添加到babel.config.json的presets配置项中。

无TS环境替代方案 #

如果当前项目不想接入TypeScript，也可以用运行时参数校验实现相同效果，代码修改为：

export const notify = (type, message) => {
  const allowTypes = ['success', 'error', 'warning', 'info', 'question']
  if (!allowTypes.includes(type)) {
    throw new Error(`type参数仅支持传入：${allowTypes.join('、')}`)
  }
  // 原有业务逻辑
}

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