7:00 – 3:30 SR

• Timesheets
• Wow – upgraded to Windows 7! Of course, that means that I don’t have PuTTY and can’t get to the servers. Put in a ticket…
• Need to see how super() works in JavaScript. I’m thinking it should be possible to write a Utils.FatSuper(this.myFnPtr) static method that will do the same.
• TypeScript parent class (Parts stripped out for clarity):

  export class TestController implements ITestController {
     // standard TypeScript constructor
     constructor() {
     }
  
     public extendableFunction():void{
        alert("It's extendableFunction()");
     }
  
     public fatArrowFunction = ():void => {
        alert("It's fatArrowFunction()");
     }
  }

• Compiled JavaScript of above:

  var TestController = (function () {
      // standard TypeScript constructor
      function TestController() {
          var _this = this;
          
          this.fatArrowFunction = function () {
              alert("It's fatArrowFunction()");
          };
      }
      TestController.prototype.extendableFunction = function () {
          alert("It's extendableFunction()");
      };
      return TestController;
  })();
  InheritApp.TestController = TestController;

• TypeScript child class:

  export class TestController2 extends TestController implements ITestController2 {
     myInheritedString:string;
  
     // standard inheriting constructor pattern. Note that 'super' must be on the first line and
     // that the arguments from angular get passed through
     constructor(){
        super();
     }
  
     public extendableFunction():void{
        super.extendableFunction();
     }
  }

• Compiled JavaScript of above:

  var TestController2 = (function (_super) {
      __extends(TestController2, _super);
      
      function TestController2() {
          _super.call(this);
      }
      TestController2.prototype.extendableFunction = function () {
          _super.prototype.extendableFunction.call(this);
      };
      return TestController2;
  })(TestController);
  InheritApp.TestController2 = TestController2;

• JavaScript of above with all the contents commented out:

  var TestController2 = (function (_super) {
      __extends(TestController2, _super);
      function TestController2() {
          _super.apply(this, arguments);
      }
      return TestController2;
  })(TestController);
  InheritApp.TestController2 = TestController2;

• As an aside, __extends is just parasitic inheritance:

  var __extends = this.__extends || function (d, b) {
      for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
      function __() { this.constructor = d; }
      __.prototype = b.prototype;
      d.prototype = new __();
  };

• So we know a few things now:
  • extending in TypeScript means that the child class is called with the parent class passed in as an argument called ‘_super’
  • Fat arrow functions are defined in the constructor as variables pointing to functions and are attached to ‘this’, not ‘_this’
• I tried looking for the properties in the debugger, but couldn’t really see what was going on in the JavaScript. So I added a loop over the properties in the TestController2 constructor. FatArrowFunction is listed and extendableFunction is not. To me this makes sense, as extendableFunction is on the prototype:

  this[fatArrowFunction] = function () {
          alert("It's fatArrowFunction()");
      }

• Building on the above, we can make what boils down to our own prototype for fat functions. The other option is to turn everything into fat functions as per this nifty piece of work, discussed on this page. I have a concern about adding all this wrapping to functions, so until I run some tests and see what’s faster, here’s a way of doing it semi-manually. Here’s the parent code:

  export class TestController implements ITestController {
     public functionMap:Function[];
  
     // standard TypeScript constructor
     constructor() {
        this.functionMap = [];
        this.setFatPrototype(this.fatArrowFunction, "fatArrowFunction");
     }
  
     public fatArrowFunction = (arg:string):void => {
        alert("It's fatArrowFunction("+arg+")");
     };
  
     public extendableFunction():void{
        alert("It's extendableFunction()");
     }
     public setFatPrototype(fn:Function, n:string){
        // TODO: look for earlier prototypes that we might need to call
        fn["name"] = n;
        this.functionMap[n] = fn;
     }
     public fatSuper(fnName:string, childArgs:IArguments){
        // TODO: look for earlier prototypes that we might need to call
        var fn;Function;
        if(this.functionMap.hasOwnProperty(fnName)){
           fn = this.functionMap[fnName];
           fn.apply(fn, childArgs);
        }else{
           console.log("fatSuper(): function '"+fnName+"'does not exist on the prototype chain");
        }
     }
  }

• And here’s the child class:

  export class TestController2 extends TestController implements ITestController2 {
  
     public extendableFunction():void{
        super.extendableFunction();
     }
  
     public fatArrowFunction = (arg:string):void => {
        this.fatSuper("fatArrowFunction", arguments);
        alert("It's fatArrowFunction2("+arg+")");
     };
  }

• As the comments say, I do not recurse up the ‘prototyp’ tree yet, though that wouldn’t be hard. Before I do that, I need to implement both versions and see if the version that converts all functions to function pointers works with Angular and if it does, to run some tests to see which is faster. Stuff for Monday.