D3，Typescript和GraphNodes（打字稿界面中的可选字段）

Question

以下是borisyankov/DefinitelyTyped中定义的D3.Layout.GraphNode和D3.Layout.GraphLink的定义。

export interface GraphNode {
        id: number;
        index: number;
        name: string;
        px: number;
        py: number;
        size: number;
        weight: number;
        x: number;
        y: number;
        subindex: number;
        startAngle: number;
        endAngle: number;
        value: number;
        fixed: bool;
        children: GraphNode[];
        _children: GraphNode[];
        parent: GraphNode;
        depth: number;
    }


    export interface GraphLink {
        source: GraphNode;
        target: GraphNode;
    }

但是，GraphNode并不一定总是拥有所有这些属性。例如，以下是GraphLink source:GraphNode和target:GraphNode，两者都没有所有属性。

此外，我不能有这样的课程：

class GraphData {
    nodes: D3.Layout.GraphNode[];
    links: D3.Layout.GraphLink[];
}

因为这样做不起作用：

var data:GraphData = {
    "nodes": [{
        "group": 0,
        "id": 0
    }, {
        "group": 0,
        "id": 1
    }, {
        "group": 0,
        "id": 2
    }],
    "links": [{
        "source": 0,
        "target": 2,
        "value": 1
    }, {
        "source": 0,
        "target": 0,
        "value": 1
    }, {
        "source": 2,
        "target": 1,
        "value": 1
    }, {
        "source": 2,
        "target": 1,
        "value": 1
    }]
}

typescript编译器给了我这个错误：

Compile Error. 
See error list for details
 C:/Projects/MyGraph/app.ts(111,23): error TS2082: Supplied parameters do not match any signature of call target:

Types of property 'nodes' of types '{ "nodes": { "group": number; "id": number; }[]; "links": { "source": number; "target": number; "value": number; }[]; }' and 'GraphData' are incompatible:

Type '{ "group": number; "id": number; }' is missing property 'index' from type 'D3.Layout.GraphNode'.

解决此问题的方法是使接口GraphNode中的所有字段都可选。但接口是没用的。 在这种情况下，如何利用TypeScripts静态类型？

Answer 1

所有这些都不是必需的，但可能有些是，并且接口定义尚未反映出来。也许您可以标记哪些是社区支持的可选项。

无论如何。当你想对其他人强制执行严格的行为但又想要灵活地打破你自己时，你可以使用任何一种。例如：

var data:GraphData = <any>{
    "nodes": [{
        "group": 0,
        "id": 0
    }, {
        "group": 0,
        "id": 1
    }, {
        "group": 0,
        "id": 2
    }],
    "links": [{
        "source": 0,
        "target": 2,
        "value": 1
    }, {
        "source": 0,
        "target": 0,
        "value": 1
    }, {
        "source": 2,
        "target": 1,
        "value": 1
    }, {
        "source": 2,
        "target": 1,
        "value": 1
    }]
}