title: Implementing the D3 "reusable chart" pattern in TypeScript
body: <p>The code in <strong>section 2</strong> below (working example <a href="https://jsfiddle.net/mjmitche/tzboups3/2/" rel="noreferrer">here</a>) is based on the code in section 1 but changed to use arrow functions, and it is based on Mike Bostock's pattern in <a href="https://bost.ocks.org/mike/chart/" rel="noreferrer">Toward Resusable Charts</a>, namely returning a function that has other functions on it. </p>
  
  <p>If I try to run either the code in section 1 or 2 in typescript  (demo <a href="https://www.typescriptlang.org/play/#src=let%20mychart%20%3D%20function%20()%20%7B%0D%0A%20%20%20%20let%20stop%20%3D%20false%3B%0D%0A%20%20%20%20let%20chart%20%3D%20function%20(selection)%20%7B%0D%0A%20%20%20%20%20%20%20%20function%20tick()%20%7B%0D%0A%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20return%20tick%3B%0D%0A%20%20%20%20%7D%3B%0D%0A%20%20%20%20chart.addToChart%20%3D%20function%20()%20%7B%0D%0A%20%20%20%20%20%20%20%20return%20chart%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20chart.stop%20%3D%20function%20()%20%7B%0D%0A%20%20%20%20%20%20%20%20return%20stop%20%3D%20true%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20return%20chart%3B%0D%0A%7D%3B%20%0D%0A" rel="noreferrer">here</a>)  it says the methods <code>addToChart</code> and <code>stop</code> do not exist on type <code>(selection: any) =&gt; () =&gt; void</code>. </p>
  
  <h3>How can I get typescript to recognize the functions properties (<code>addToChart</code> and <code>stop</code> in this case) added to the returned function?</h3>
  
  <p><strong>section 1</strong></p>
  
  <pre><code>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"
  </code></pre>
  
  <p><strong>section 2</strong></p>
  
  <pre><code>const mychart = () =&gt; {
    let stop = false;
  
    const chart = (selection) =&gt; {
      function tick(){
        console.log("tick");
      }
      return tick;
    };
  
    chart.addToChart = (value) =&gt; {
      console.log("addToChart");
      return chart;
    };
  
    chart.stop = () =&gt; {
      return stop = true;
    }
  
    return chart;
  } 
  
  const a = mychart();
  const tick = a();
  tick(); //logs tick
  a.addToChart(); //logs "addToChart"
  </code></pre>