具有子/父引用的 Angular/typescript 树 - 如何避免在声明之前使用 Block-scoped 变量

标签 angular typescript

让我们有一个非常简单的节点/对象树,其中包含父节点和子节点引用,我们需要在其中引用父节点和子节点。这里棘手的部分是我们不仅要在树中设计和使用节点,还要独立于树/单独设计和使用节点。意思是,我们不能直接将它们嵌套到父节点中,而是通过引用在父节点中引用子节点。这提出了 Typescript 错误的问题:

2448 block 作用域变量“rootNode”在其声明之前使用。ts(2448)

如果我们按降序排列节点,我们可以引用上面的子节点。但不是下面的 parent 。反之亦然。如果我们将 parent 放在 child 之上,我们就不能引用 child ,因为他们是在他们之后声明的。

似乎 Typescript 不够复杂,无法预编译声明并会抛出错误。

如何解决?

这里是树节点的示例(按降序排列)及其带有引用的“独立”节点:

    export interface Node {
        id: string,
        value?: string,
        parent?: Node,
        children?: Node[]
    }

    export const nodeB2: Node = {
        id: 'B2',
        value: 'bbb-2',
        parent: nodeA1    // ERR 2448
    }

    export const nodeB1: Node = {
        id: 'B1',
        value: 'bbb-1',
        parent: nodeA1    // ERR 2448
    } 

    export const nodeA1: Node = {
        id: 'A1',
        value: 'aaa-1',
        parent: rootNode,    // ERR 2448
        children: [nodeB1, nodeB2]
    }

    export const rootNode: Node = {
        id: 'ROOT',
        value: 'root',
        children: [nodeA1]
    }

最佳答案

试一试:

declare let rootNode: Node;

export interface Node {
  id: string,
    value ? : string,
    parent ? : Node,
    children ? : Node[]
}

export const nodeB2: Node = {
  id: 'B2',
  value: 'bbb-2',
  parent: rootNode // ERR 2448
}

export const nodeB1: Node = {
  id: 'B1',
  value: 'bbb-1',
  parent: rootNode // ERR 2448
}

export const nodeA1: Node = {
  id: 'A1',
  value: 'aaa-1',
  parent: rootNode, // ERR 2448
  children: [nodeB1, nodeB2]
}

rootNode = {
  id: 'ROOT',
  value: 'root',
  children: [nodeA1]
};

export default rootNode;

关于具有子/父引用的 Angular/typescript 树 - 如何避免在声明之前使用 Block-scoped 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59350139/

相关文章:

angular - 如何更改默认的 `Page View` 名称

javascript - Angular2 组件样式/css 未在 ngAfterViewInit 中被浏览器应用

javascript - Angular 2 : EXCEPTION: No provider for Angulartics2GoogleAnalytics

angular - 使用 json 响应生成动态列表

typescript - knockout es5 类型

Typescript:通过 'this' 获取自定义接口(interface)的类型?

angular - 类型定义中的感叹号

typescript - 如何创建由一个账户签名但使用另一个账户支付的 Hedera 交易

Angular:将数据从 Material 对话框传递到未打开对话框的组件

使用 Angular 4 进行 HTML 5 拖放