React18+TS4环境下VS Code自动还原catch参数类型及TS2339错误求解

定位自动格式化来源 #

VS Code保存时自动清除catch参数的类型声明，通常是以下工具的默认行为：

• 内置TypeScript语言服务格式化器
• Prettier插件
• ESLint自动修复功能

可以通过临时禁用相关插件（比如先关闭Prettier、ESLint），保存代码后观察是否还会还原，以此定位具体来源。

针对性解决方案 #

1. 针对Prettier插件 #

Prettier默认会移除TypeScript catch语句中参数的类型注解，需修改配置文件（如.prettierrc或.prettierrc.json），添加规则保留类型：

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "options": {
        "parser": "typescript",
        "printWidth": 120,
        "preserveCatchClause": true
      }
    }
  ]
}

如果上述选项不生效，也可以在代码中添加注释禁用Prettier对该语句的格式化：

try {
  // 业务代码
} catch (error: CustError) { // prettier-ignore
  console.log(error.error);
}

2. 针对内置TypeScript格式化器 #

VS Code内置TS格式化器默认会清除catch参数类型，需修改编辑器设置：

1. 打开VS Code设置（快捷键Ctrl+,）
2. 搜索并关闭typescript.format.enable，改用Prettier等第三方格式化工具；或者在settings.json中添加：

"typescript.format.removeUnusedCatchParameters": false

3. 针对ESLint自动修复 #

如果是ESLint的规则导致类型被移除，需修改.eslintrc.js等配置文件，调整相关规则：

module.exports = {
  // 其他配置
  rules: {
    // 允许catch参数使用any类型（如果需要）
    "@typescript-eslint/no-explicit-any": "off",
    // 关闭强制使用unknown作为catch参数类型的规则
    "@typescript-eslint/prefer-unknown-catch": "off",
    // 禁用该语句的自动修复
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^error$" }]
  }
};

也可以在代码中添加注释临时禁用ESLint修复：

try {
  // 业务代码
} catch (error: CustError) { // eslint-disable-line @typescript-eslint/no-explicit-any
  console.log(error.error);
}

4. 无需修改配置的临时方案 #

不想调整工具配置的话，可在catch块内部对error进行类型断言或类型守卫，绕过参数类型声明的问题：

try {
  // 业务代码
} catch (error) {
  // 类型断言
  const customError = error as CustError;
  if ('error' in customError) {
    console.log(customError.error);
  }

  // 或使用类型守卫（更安全）
  function isCustError(err: unknown): err is CustError {
    return typeof err === 'object' && err !== null && 'error' in err;
  }
  if (isCustError(error)) {
    console.log(error.error);
  }
}

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