no-use-before-define typescript interfaces

Question

I have 2 typescript interfaces that have a member that is of the type of the other interface (circular reference). My linter complains that I cannot use an interface before I defined it. However, I have to define one first.

interface Foo {
  // error, Bar was used before it was defined
  bar: Bar
}

interface Bar {
  foo: Foo
}

I am very much aware that I can just disable the linter rule for the line but what is the proper way of solving it?

Answer 1

With eslint and typescript, there are 2 rules to consider

• no-use-before-define
• @typescript-eslint/no-use-before-define

In the docs how to use, it is explained that you must turn off no-use-before-define and enable @typescript-eslint/no-use-before-define.

This made the error go away for me.

// eslint.js

module.exports = {
  "rules": {
    // Note: you must disable the base rule as it can report incorrect errors
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": "error"
  }
}