无需全量迁移TypeScript，如何检测JS类实例未定义方法名？

方案1：通过@typescript-eslint在JS文件中启用类型检查（无需全量迁移TS） #

利用TypeScript的类型系统验证JS文件中的成员访问，无需将所有JS改为TS，仅需给核心类/对象添加JSDoc类型注释，配合ESLint插件即可实现拼写检测。

步骤1：安装依赖 #

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser typescript

步骤2：更新ESLint配置（.eslintrc） #

{
  "plugins": [
    "eslint-plugin-import",
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-type-checked"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json",
    "allowJs": true
  },
  "rules": {
    "no-undef": "error",
    "no-extra-semi": "off",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-unsafe-member-access": "error"
  },
  "env": {
    "browser": true,
    "es2022": true
  },
  "overrides": [
    {
      "files": ["*.js"],
      "rules": {
        "@typescript-eslint/explicit-function-return-type": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off"
      }
    }
  ]
}

步骤3：创建极简tsconfig.json #

无需编译JS文件，仅用于类型检查：

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
    "strict": false,
    "module": "ESNext",
    "target": "ES2022"
  },
  "include": ["src/**/*.js", "src/**/*.ts"],
  "exclude": ["node_modules"]
}

步骤4：给核心对象添加JSDoc类型注释 #

比如给stream对象标注合法成员：

/**
 * @typedef {Object} Stream
 * @property {function()} renegotiate - 流协商方法
 * @property {function()} start - 启动流方法
 */

/** @type {Stream} */
const stream = {
  renegotiate() { /* 实现逻辑 */ },
  start() { /* 实现逻辑 */ }
};

此后若出现stream.renogotiate()这类拼写错误，ESLint会通过@typescript-eslint/no-unsafe-member-access规则抛出错误。

方案2：使用eslint-plugin-jsdoc做轻量静态检查 #

若不想引入TypeScript，可通过JSDoc注释配合eslint-plugin-jsdoc实现基础的成员拼写约束（检测能力弱于方案1）。

步骤1：安装依赖 #

npm install --save-dev eslint-plugin-jsdoc

步骤2：更新ESLint配置 #

{
  "plugins": [
    "eslint-plugin-import",
    "jsdoc"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
    "plugin:jsdoc/recommended"
  ],
  "rules": {
    "no-undef": "error",
    "no-extra-semi": "off",
    "no-unused-vars": "off",
    "jsdoc/require-type": "error",
    "jsdoc/require-param-type": "error"
  },
  "env": {
    "browser": true,
    "es2022": true
  }
}

步骤3：添加JSDoc类型注释 #

与方案1类似，通过@typedef和@type标注对象的合法成员，eslint-plugin-jsdoc会结合规则检测非法成员访问（需配合IDE的JSDoc支持增强实时提示）。

方案3：IDE层面的静态分析增强 #

比如VS Code的TypeScript插件，只需给JS文件添加JSDoc类型注释，IDE会实时提示成员拼写错误。可要求团队成员启用该功能，作为代码提交前的辅助检查手段。

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