Pesquisa de site

Árvore Angular/TypeScript com referências de filho/pai - como evitar variável de escopo de bloco usada antes da sua declaração


Vamos ter uma árvore de nós/objetos muito simples com referências a pais e filhos, onde precisamos referenciar tanto o pai quanto os nós filhos. A parte complicada aqui é que queremos projetar e usar os nós não apenas na árvore, mas também de forma independente da árvore/separadamente. Ou seja, não podemos aninhá-los diretamente nos nós pai, mas sim por referência e também referenciar os nós filhos nos nós pai. Isso apresenta um problema de erro no Typescript:

2448 Variável com escopo de bloco 'rootNode' usada antes de sua declaração.ts(2448)

Se colocarmos os nós em ordem decrescente, podemos referenciar os filhos acima. Mas não os pais abaixo. E vice-versa. Se colocarmos os pais acima dos filhos, não podemos referenciar os filhos, pois eles são declarados depois deles.

Parece que o Typescript não é sofisticado o suficiente para pré-compilar declarações e lança erros em vez disso.

Como isso pode ser resolvido?

Aqui está um exemplo dos nós da árvore (colocados em ordem decrescente) e seus nós 'independentes' com referências:

    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]
    }

Resposta #1

Experimente isto:

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;

Artigos relacionados