在 TypeScript 中实现 D3“可重用图表”模式

Question

下面第2节中的代码（工作示例here）基于第1节中的代码，但改为使用箭头函数，它基于Toward Resusable Charts中的Mike Bostock模式，即返回一个包含其他函数的函数。

如果我尝试在 typescript（演示 here）中运行第 1 节或第 2 节中的代码，它会说方法 addToChart 和 stop 在类型 (selection: any) => () => void 上不存在。

如何让 typescript 识别添加到返回函数的函数属性（在本例中为 addToChart 和 stop）？

第 1 节

const mychart = function (){
  let stop = false;
  const chart = function(selection){
    function tick(){
      console.log("tick");
    }
    return tick;
  };

  // Adding a function to the returned 
  // function as in Bostock's reusable chart pattern
  chart.addToChart = function(value){ 
    console.log("addToChart");
    return chart;
  };

  chart.stop = function(){
    return stop = true;
  }

  return chart;
}

const a = mychart();
const tick = a();
tick(); //logs tick
a.addToChart(); //logs "addToChart"

第 2 节

const mychart = () => {
  let stop = false;

  const chart = (selection) => {
    function tick(){
      console.log("tick");
    }
    return tick;
  };

  chart.addToChart = (value) => {
    console.log("addToChart");
    return chart;
  };

  chart.stop = () => {
    return stop = true;
  }

  return chart;
} 

const a = mychart();
const tick = a();
tick(); //logs tick
a.addToChart(); //logs "addToChart"

Answer 1

您可以定义hybrid type，即描述函数签名及其属性的接口。鉴于您的代码，它可能是这样的：

interface IChart {
    (selection: any): any;
    // Use overloading for D3 getter/setter pattern
    addToChart(): string;               // Getter
    addToChart(value: string): IChart;  // Setter
}

由于您应该避免像瘟疫一样避免any，这可能需要进一步完善，但这应该足以让您入门。此外，为了允许 D3-ish getter/setter 模式，您可以在接口声明中 overload addToChart 函数。

现在将这个接口作为一种类型集成到您的可重用代码模式中变得非常简单：

const mychart = (): IChart => {

  // Private value exposed via closure
  let value: string|undefined;

  const chart = <IChart>((selection) => {
    // Private logic
  });

  // Public interface
  // Implementing a  D3-style getter/setter.
  chart.addToChart = function(val?: string): any {
    return arguments.length ? (value = val, chart) : value;
  };

  return chart;
} 

const chart = mychart();

console.log(chart.addToChart())   // --> undefined       
chart.addToChart("Add");          // Sets private value to "Add".
console.log(chart.addToChart())   // --> "Add"       

看看可执行文件playground demo。

Answer 2

我想知道你是否可以使用接口/类：

interface IChart {
    constructor: Function;
    addToChart?: (number) => Chart;
    stop: () => boolean;
}

class Chart implements IChart {

    private _stop = false;
    constructor( selection ) {
        // content of tick funciton here
    }

    public addToChart = function (n: number) {
        return this;
    }
    public stop = function () {
        return this._stop = true;
    }

}

let mychart = function () {
    let stop = false;
    let chartNew: Chart = new Chart(1);
    return chartNew;
}; 

Answer 3

您可以使用Object.assign 创建混合类型（具有额外属性的函数），而无需定义专用接口。您可以在原始内部单独定义函数，这样每个函数可以有多个签名，如果您想通过this而不是chart访问对象，您甚至可以输入this参数。

let mychart = function () {
    let isStopped = false;
    let value = "";


    type Chart = typeof chart;
    // Complex method with multiple signatures
    function addToChart(): string 
    function addToChart(newValue: string): Chart
    function addToChart(newValue?: string): string | Chart {
        if(newValue != undefined){
            value = newValue;
            chart.stop()
            return chart;
        }else{
            return value;
        }
    }
    // We can specify the type for this if we want to use this
    function stop(this: Chart) {
        isStopped = true;
        return this; // instead of chart, either is usable
    }
    var methods = {
        addToChart,
        stop,

        // inline function, we can return chart, but if we reference the Chart type explicitly the compiler explodes 
        stop2() {
            isStopped = true;
            return chart;
        }
    };
    let chart = Object.assign(function (selection) {
        function tick() {

        }
        return tick;
    }, methods);
    return chart;
}; 
let d = mychart();

d("");
d.addToChart("").addToChart();
d.addToChart();
d.stop();
d.stop().addToChart("").stop2().stop()

备注

1. 虽然智能感知按预期工作，但如果将鼠标悬停在 d 上并查看类型，它比手工制作的版本要丑得多。

2. 我单独定义了methods，而不是在Object.assign 上内联，因为如果我这样做编译器会感到困惑。

3. 如果您不想在方法中使用this，则无需显式键入this。我展示了如何使用它，只是为了完整起见，使用图表可能更容易，它确保我们不必处理传入错误this 的人。

4. 虽然上面的示例有效，但在某些情况下，编译器会放弃推理并将mychart 的返回值键入为any。一种这样的情况是当我们在分配给methods的对象中定义的函数内引用Chart