Блог

У меня есть иерархия классов, например Parent , Child1 которая расширяет родительский и Child2 т. Д. Parent Хранит массив дочерних элементов, и мне нужно импортировать Child1 и Child2 внутри Parent .

Это, очевидно, приводит к циклической зависимости и выбросам при попытке создать дочерний элемент 1 или Дочерний элемент 2 со следующей ошибкой:

 TypeError: Super expression must either be null or a function  

Каковы варианты решения этой проблемы?

Например, рассмотрим следующую структуру:

parent.js

 export default class Parent {  itemArray = [] }  

child1.js

 import Parent from "./parent.js" export default class Child1 extends Parent { }  

child2.js

 import Parent from "./parent.js" export default class Child2 extends Parent { }  

itemArray рекурсивно сохраняет либо Child1 или Child2

Теперь мне нужно ввести аннотацию к элементу, чтобы parent.js он выглядел как показано ниже:

parent.js

 import Child1 from "./child1" import Child2 from "./child2"  export default class Parent {  @Types(() =gt; [Child1, Child2])  itemArray = [] }  

Эта аннотация позволяет назначить правильный класс каждому элементу в массиве, когда конечный объект строится из простого объекта. Но это уже детали. Вопрос в том,:

Как разрешить такую структуру, чтобы она не тормозила всю иерархию?

Решение простое и понятное для понимания. Идея решения заключается в импорте классов, иерархически расположенных в другом модуле.

 // internal.js (New Js File) // This module imports and exports // Parent and Child classes will import classes from here.  export { Parent } from "./parent.js"; export { Child1 } from "./child1.js"; export { Child2 } from "./child2.js";  

И вы можете импортировать необходимый класс из ‘internal.js». В качестве примера:

 // parent.js  import { Child1 } from "./internal.js"; import { Child2 } from "./internal.js";  export class Parent {  // @Types annotation method here..  itemArray = []; }  

Выход:

 // index.js file to output result  import { Parent } from "./internal.js"; import { Child1 } from "./internal.js"; import { Child2 } from "./internal.js";  var child1 = new Child1(); var child2 = new Child2(); var parent = new Parent();  parent.itemArray.push(child1); parent.itemArray.push(child2);   console.log(parent.itemArray.length); //it prints '2'