如何修复 eslint 错误 no-use-before-define

Question

I am using Airbnb's style guide and have a couple of functions that reference each other this error is triggered no matter which function is above the other. Is there a best practice on how to fix this error besides just disable it?

function foo() {
    const ham = document.querySelector('#ham');
    ham.onclick = () => {
        bar();
    };
}

function bar() {
    const spam = document.querySelector('#spam');
    spam.onclick = () => {
        foo();
    };
}

Answer 1

You might have to just disable for the first function since your use case is also popular:

function foo() {
    const ham = document.querySelector('#ham');
    ham.onclick = () => {
        /* eslint-disable no-use-before-define */
        bar();
    };
}

Or you can wrap them up in an literal object to resolve the issue:

const wrapper = {
  foo() {
    const ham = document.querySelector<HTMLDivElement>('#ham');
    ham.onclick = () => {
        wrapper.bar();
    };
  },

  bar() {
    const spam = document.querySelector<HTMLDivElement>('#spam');
    spam.onclick = () => {
        wrapper.foo();
    };
  }
};