CODEWITHSUNDEEP
typescriptcircular-dependency
secdef
secdef

Reputation: 73

Best way to resolve circular dependencies in TypeScript

I'm working on a simple API for a website in TypeScript, the code works well but I've a circular dependency that I need to fix.

A (very) minimal example of the project can be found here: https://codesandbox.io/s/dreamy-perlman-lpq6gh

Which is the best way to fix circular dependency of api/index.ts in this example?

I've tried to use an inherit class, but I don't know the best way to call a class child from another child.

Thanks!

Upvotes: 7

Views: 12625

Answers (3)

Peter T.
Peter T.

Reputation: 3325

I tried some tool for our pretty large TS project and I like

  • dependency-cruiser to generate reports with e.g. depcruise --output-type err-html -f reports/depcruise/report.html --progress cli-feedback src that have a very nice overview and good visualization of detailed results. It's also straightforward to add own rules, e.g. to ensure that architecture layers are enforced (you could also use nx for this)
  • dep-tree is very fast and has a cool and interactive 3D visualization but did not find all circular dependencies

Upvotes: 0

AFetter
AFetter

Reputation: 3612

After several tries with Madge I checked with lint and the result was much better.

Madge was able to find:

✖ Found 2 circular dependencies!

1) context.ts > issuer-context-middleware.ts
2) context.ts > issuer-context-middleware.ts > slauth-middleware.ts

lint implementing import/no-cycle:

/src/anon-request-middleware.ts
  3:1  error  Dependency cycle via .:18  import/no-cycle

/src/claims-middleware.ts
  5:1  error  Dependency cycle via .:18  import/no-cycle

/src/context.ts
  18:1  error  Dependency cycle detected  import/no-cycle
  23:1  error  Dependency cycle detected  import/no-cycle

/src/index.ts
  10:1  error  Dependency cycle via ./context:3  import/no-cycle
  13:1  error  Dependency cycle via ./context:5  import/no-cycle
  16:1  error  Dependency cycle detected         import/no-cycle
  18:1  error  Dependency cycle via ./context:3  import/no-cycle
  19:1  error  Dependency cycle via ./context:3  import/no-cycle
  20:1  error  Dependency cycle via ./context:6  import/no-cycle
  44:1  error  Dependency cycle via ./context:5  import/no-cycle
  50:1  error  Dependency cycle via ./context:6  import/no-cycle
  51:1  error  Dependency cycle via ./context:3  import/no-cycle

/src/internal-request-middleware.ts
  3:1  error  Dependency cycle via .:18  import/no-cycle

/src/issuer-context-middleware.ts
  3:1  error  Dependency cycle detected         import/no-cycle
  4:1  error  Dependency cycle via ./context:6  import/no-cycle

/src/slauth-middleware.ts
  6:1  error  Dependency cycle via .:18  import/no-cycle

I do recommend https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md

Upvotes: 2

jmvcollaborator
jmvcollaborator

Reputation: 2495

Firstly run the following cli command to get a list of circular dependencies, then you will notice what to do: Further instruction for madge here

npx madge --circular --extensions ts ./

Upvotes: 12

Related Questions