React Native TypeScript项目catch子句加any类型后报Unexpected token错误

1. TypeScript strict模式默认开启useUnknownInCatchVariables配置项，所有catch块接收的error变量默认类型为unknown，未做类型处理时会触发TS校验报错。
2. 直接在catch参数后添加:any类型注解属于TS专属语法，React Native的Metro打包器依赖的Babel编译链如果没有配置对应的TS语法转译规则，会将该注解识别为非法JS token，抛出Unexpected token错误。

• 方案1：调整TS配置关闭catch变量严格校验
  打开项目根目录tsconfig.json，在compilerOptions字段下新增配置：

  "useUnknownInCatchVariables": false
  

  配置后catch变量默认恢复为any类型，无需手动加类型注解，不会触发TS报错，也不会出现打包语法冲突。

• 方案2：保留strict规则，使用类型断言处理error
  若不想关闭严格校验，不要直接给catch参数加类型注解，改为在catch块内做类型断言即可：

  try {
    // 你的业务逻辑代码
  } catch (e) {
    // 可按需求断言为你需要的类型，比如Error或者any
    const error = e as Error;
    // 后续使用error变量做错误处理
  }
  

  该写法完全符合TS语法规范，也不会被Babel识别为非法语法。

• 方案3：修复Babel转译配置支持参数类型注解
  如果你需要保留在catch参数上加类型注解的写法，确认项目根目录的babel.config.js已经正确引入@babel/preset-typescript预设，参考配置如下：

  module.exports = {
    presets: [
      'module:metro-react-native-babel-preset',
      '@babel/preset-typescript'
    ]
  }
  

  配置完成后清理打包缓存重启服务即可：

  npx react-native start --reset-cache
  

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