TypeScript：在定义@typescript-eslint/no-use-before-define 之前使用了“handleFirstTab”

Question

I have the following code in a React Component and TypeScript gives the following error:

'handleFirstTab' was used before it was defined @typescript-eslint/no-use-before-define

If I split both functions into separate files and import them in each other then the error goes away. Is there a way via which I can have both functions in the same file without disabling @typescript-eslint/no-use-before-define and the error will go away. Thanks.

  const handleMouseDownOnce = (): void => {
    document.body.classList.remove('user-is-tabbing')
    window.removeEventListener('mousedown', handleMouseDownOnce)
    window.addEventListener('keydown', handleFirstTab)
  }

  const handleFirstTab = (e: KeyboardEvent): void => {
    if (e.code === 'Tab') {
      document.body.classList.add('user-is-tabbing')
      window.removeEventListener('keydown', handleFirstTab)
      window.addEventListener('mousedown', handleMouseDownOnce)
    }
  }

Answer 1

when you define a variable (or function) using const or let it won't be Hoist as function declaration using function keyword or using var

if you want to have both of them in the same file you need to change your code like following:

  function handleMouseDownOnce(): void {
    document.body.classList.remove('user-is-tabbing')
    window.removeEventListener('mousedown', handleMouseDownOnce)
    window.addEventListener('keydown', handleFirstTab)
  }

  function handleFirstTab(e: KeyboardEvent): void{
    if (e.code === 'Tab') {
      document.body.classList.add('user-is-tabbing')
      window.removeEventListener('keydown', handleFirstTab)
      window.addEventListener('mousedown', handleMouseDownOnce)
    }
  }