如何处理相互递归中的@typescript-eslint/no-use-before-define规则报错？

问题场景 #

定义两个互相调用的const箭头函数时，ESLint会触发@typescript-eslint/no-use-before-define报错，示例代码如下：

const a = () => {
  console.log("a");

  if (Math.random() > 0.9) {
    // 避免无限递归
    return;
  }

  b(); // 触发报错：'b' was used before it was defined. (@typescript-eslint/no-use-before-define)
};

const b = () => {
  console.log("b");

  a();
};

尝试过在文件顶部添加/* global b */但无效，且const无法实现先声明后初始化，以下是几种最佳处理方式：

方案一：改用函数声明 #

函数声明存在提升特性，允许互相调用，直接规避报错：

function a() {
  console.log("a");

  if (Math.random() > 0.9) {
    return;
  }

  b();
}

function b() {
  console.log("b");

  a();
}

这是最简洁且符合JS特性的解决方案，无需额外配置或注释。

方案二：类型声明提前占位（TypeScript环境适用） #

若必须使用箭头函数，可先通过类型声明定义函数类型，再用let声明变量后赋值：

type FuncType = () => void;

let a: FuncType;
let b: FuncType;

a = () => {
  console.log("a");

  if (Math.random() > 0.9) {
    return;
  }

  b();
};

b = () => {
  console.log("b");

  a();
};

通过提前声明变量并指定类型，ESLint会识别到变量已存在，不会触发报错。注意此处不能用const，因为const必须在声明时完成初始化。

方案三：添加局部ESLint忽略注释 #

若不想修改代码结构，可在报错行上方添加忽略注释，仅跳过当前行的规则检查：

const a = () => {
  console.log("a");

  if (Math.random() > 0.9) {
    return;
  }

  // eslint-disable-next-line @typescript-eslint/no-use-before-define
  b();
};

const b = () => {
  console.log("b");

  a();
};

这种方式适合临时处理，但长期来看会削弱ESLint的代码检查能力，不推荐作为通用方案。

方案四：调整ESLint规则配置 #

在ESLint配置文件中，修改@typescript-eslint/no-use-before-define规则的参数，允许函数在定义前被使用：

module.exports = {
  // 其他配置项...
  rules: {
    "@typescript-eslint/no-use-before-define": [
      "error",
      {
        functions: false, // 关闭函数的使用前检查
        classes: true,
        variables: true
      }
    ]
  }
};

此方案会放宽规则对所有函数的检查，可能漏掉其他场景下的未定义使用问题，需谨慎使用。

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