5

I encountered below code snippets which contain a cyclic importing dependency on type reference.

// Foo.ts
import { Bar } from './Bar';
export interface Foo {
  isBarOK: (bar: Bar) => boolean;
}

// Bar.ts
import { Foo } form './Foo';
export class Bar {
  protected readonly foo: Foo;
}

This is a simplified version but it explains the case I encountered. tsc has no problem in compiling the code, but I got a warning from the import/no-cycle ESLint rule. We can see that Foo and Bar references each other for typing. Is this a bad practice? What impacts does it imply?

Ruifeng Ma
  • 2,399
  • 1
  • 22
  • 40
  • This [blog](https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de) on how to resolve nasty circular dependencies in JS/TS provides a pretty smart solution, but it's to solve actual runtime dependency issues. – Ruifeng Ma Aug 20 '20 at 08:45
  • Even if ts would be able to manage circular dependencies it has a bad architectural smell. – Dirk R Aug 20 '20 at 08:46
  • @DirkR Yup, I agree architecture wise this needs an improvement. But I want to know just from typing perspective whether this has any implications. – Ruifeng Ma Aug 20 '20 at 08:49

1 Answers1

2

pure typescript file will not be outputted into your bundle, so you can safely ignore it.

but be careful with javascript file, circular import might mess up tree shaking

arslan2012
  • 1,010
  • 7
  • 19
  • Yup, I did a madge analysis on the transpiled JS files and found no circular dependencies. This is only cyclic type reference. – Ruifeng Ma Aug 21 '20 at 05:03