D3, Typescript, and GraphNodes (Optional fields in a typescript interface)

Question

Here are the definitions for D3.Layout.GraphNode and D3.Layout.GraphLink as defined in borisyankov/DefinitelyTyped.

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

However, a GraphNode does not necessary always have ALL of these properties. For example, here is a GraphLink with a source:GraphNode and a target:GraphNode , both of which do not have all of the properties.

Furthermore, I can't have a class such as:

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

Because then doing this does not work:

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

The typescript compiler gives me this error:

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'.

A way to fix this is to make all of the fields in the interface GraphNode optional. But then the interface is useless. How do I take advantage of TypeScripts static typing in this case?

Answer 1

All of them are not required but perhaps some are and the interface definition does not reflect that as of yet. Perhaps you can mark which ones are optional for community support.

In any case. When you want to enforce strict behavior on others but want the flexibility to break out your self you can use any. e.g. :

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