title: Anonymous/inline interface implementation in TypeScript
body: <p>I've just started with TypeScript and I'm trying to understand why the following inline object definition isn't considered valid. I have a collection of objects - their type is irrelevant (to me), but they implement the interface so that when I iterate through them I know that the interface methods will be present in each object in the collection.</p>
  
  <p>I came across a "compiler" error when I tried to create an object with private information required to implement the required method:</p>
  
  <pre><code>interface Doable {
      do();
  }
  
  function doThatThing (doableThing: Doable) {
      doableThing.do();
  }
  
  doThatThing({
      private message: 'ahoy-hoy!', // compiler error here
      do: () =&gt; {
          alert(this.message);
      }
  });
  </code></pre>
  
  <p>The compiler error message is <strong>"Argument of type <code>'{ message: string, do: () =&gt; void; }'</code> is not assignable to type Doable. Object literal must specify known properties, and 'message' does not exist in type Doable"</strong>. Note that the same message is given if I define the object outside of the function call, i.e.</p>
  
  <pre><code>var thing: Doable;
  thing = {
      private message: 'ahoy-hoy!', // error here
      do: () =&gt; {
          alert(this.message);
      }
  };
  doThatThing(thing);
  </code></pre>
  
  <p>The same error occurs if I add "unexpected" methods as well:</p>
  
  <pre><code>doThatThing({
      do: () =&gt; {
          alert("ahoy hoy");
      },
      doSecretly: () =&gt; { // compiler error here now
          alert("hi there");
      }
  });
  </code></pre>
  
  <p>I looked at the JavaScript and discovered that <code>this</code> within the inline object definition was being scoped to the global object: </p>
  
  <pre><code>var _this = this; // wait, no, why!?
  function doThatThing(doableThing) {
      doableThing.do();
  }
  doThatThing({
      message: 'ahoy-hoy!',
      do: function () {
          alert(_this.message); // uses global 
      }
  });
  </code></pre>
  
  <p>I tried searching for information on inline implementations of interfaces in TypeScript, but couldn't find anything speaking to this issue specifically. </p>
  
  <p>I can confirm that the "fixed" compiled JS works as intended:</p>
  
  <pre><code>function doThatThing(doableThing) {
      doableThing.do();
  }
  
  doThatThing({
      message: 'ahoy-hoy!',
      do: function () {
          alert(this.message);
      }
  });
  </code></pre>
  
  <p>...and that makes sense to me, because (as far as I understand) this is implicitly calling the Object constructor, so <code>this</code> should be scoped to the new Object instance.</p>
  
  <p>It seems like the only solution is to declare each implementation as a class implementing the interface, but that feels really regressive/heavy-handed since I'm only going to have one instance of each class. If the only contract with the called function is implementing the interface, then why can't the object contain additional members?</p>
  
  <p>Sorry, this turned out longer than I intended ...in summary, I'm asking:</p>
  
  <ol>
  <li>Why is that inline interface implementation ("anonymous class", as would be said <a href="http://docs.oracle.com/javase/tutorial/java/javaOO/anonymousclasses.html" rel="noreferrer">in Java</a>) considered invalid in TypeScript? Specifically, what does that compiler error mean, and what does it protect against?</li>
  <li>Why is the scope-reassignment to the global object generated in the "compiled" JavaScript?</li>
  <li>Assuming it's my error (e.g. that the compiler error is necessary for protecting against some undesirable condition), is the only solution really to explicitly declare a class in advance, like so? </li>
  </ol>
  
  
  
  <pre><code>interface Doable {
      do() : void;
  }
  
  class DoableThingA implements Doable { // would prefer to avoid this ...
      private message: string = 'ahoy-hoy';
      do() {
          alert(this.message);
      }
  }
  
  class DoableThingB implements Doable { // ... as well as this, since there will be only one instance of each
      do() {
          document.getElementById("example").innerHTML = 'whatever';
      }
  }
  
  function doThatThing (doableThing: Doable) {
      doableThing.do();
  }
  
  var things: Array&lt;Doable&gt;;
  things = new Array&lt;Doable&gt;();
  things.push(new DoableThingA());
  things.push(new DoableThingB());
  
  for (var i = 0; i &lt; things.length; i++) {
      doThatThing(things[i]);
  }
  </code></pre>
  
  <p>P.S. The compiler error only appeared when I upgraded to TS 1.6 today, although the faulty scope bug in the compiled JS occurs in both 1.6 and 1.5.</p>
  
  <p><strong>Update: François Cardinaux provided a link to <a href="https://stackoverflow.com/questions/31816061/why-am-i-getting-an-error-object-literal-may-only-specify-known-properties/31816062#31816062">this answer</a>, which recommends using a type assertion, but <em>this only removes the compiler error and actually causes a logic error due to improper scope</em>:</strong></p>
  
  <pre><code>interface Doable {
      do();
  }
  
  function doThatThing (doableThing: Doable) {
      doableThing.do();
  }
  
  doThatThing(&lt;Doable&gt;{ // assert that this object is a Doable
      private message: 'ahoy-hoy!', // no more compiler error here
      do: () =&gt; {
          alert(this.message);
      }
  });
  </code></pre>
  
  <p>Looking at the compiled JS, this is incorrect:</p>
  
  <pre><code>var _this = this; // very wrong, and now hidden
  function doThatThing(doableThing) {
      doableThing.do();
  }
  doThatThing({
      message: 'ahoy-hoy!',
      do: function () {
          alert(_this.message); // s/b "this.message", which works in JS (try it)
      }
  });
  </code></pre>