在对象树 Typescript 中递归实例化对象

Question

我从 Java 服务器收到一个对象，其中包含

File

列表和

Group

列表。对应的Typescript对象是：

export class Group {
  files: File[];
  groups: Group[];

  constructor(group: Group) {...}
}

在打字稿中，我需要一种方法来遍历整个组树。我已经创建了该方法并将其添加到

Group

:

class Group {
  files: File[];
  groups: Group[];

  constructor(group: Group) {...}

  traverse(callback: (g: Group) => void) {
        callback(this);
        if (this.groups?.length) {
            this.groups.forEach(undergroup => {
                undergroup.traverse(callback);
            });
        }
  }
}

我可以通过首先使用

group.traverse(<some callback>)

实例化组树中的根节点来调用

let group = new Group(<response from server>)

。

问题是，当我在根节点上调用

traverse()

并尝试访问树的所有其他节点上的

traverse()

时，它们尚未实例化，并且不包含

traverse()

方法。

Typescript 中有没有一种方法可以自动将组树中的每个节点映射到

Group

的新实例？ IE。当我收到来自服务器的序列化响应时，该组及其所有子组都会用

new Group(...)

进行实例化。

或者有其他方法可以解决这个问题吗？

Answer 1

您可以为数据引入一个接口，然后用它实现您的类并声明更具体的

groups

属性，并在构造函数中递归地正确实例化所有子组：

游乐场

interface GroupData {
  name: string;
  groups?: GroupData[]
};

interface Group extends GroupData{};
class Group implements Group{
  declare groups?: Group[];
  constructor(group: GroupData){
    Object.assign(this, group, group.groups ? {groups: group.groups.map(group => new Group(group))}: {});
  }
  traverse(callback: (g: Group) => void) {
        callback(this);
        if (this.groups?.length) {
            this.groups.forEach(undergroup => {
                undergroup.traverse(callback);
            });
        }
  }
}

const data = {name: 'root', groups:[{name: 'child1', groups: [{name: 'child2'}]}]};

const group = new Group(data);
group.traverse(group => console.log(group.name));