I have:

class AdminHomeController {

    private config1; // I tried different variations here but none worked
    public config2;  //

    constructor(
                 private $scope: IAdminHomeControllerScope
               ) {
                     this.config = $scope.config; // << this works
                 }

    static $inject = [
        '$scope'
    ];

    configChanged = (clear) => {
        this.config.clear();
    };

}

This code works and this.config has all the methods I need. However is there a way that I can remove the need for the this? What I would like to be able to do is to code the following:

configChanged = (clear) => {
    config.clear();
};

I tried with many different variations but I cannot get it to work.

Here's an example of the same code before changing to Typescript:

angular.module('admin')
    .controller('AdminHomeController', [
        '$http',
        '$q',
        '$scope',
        'utilityService',
        adminHomeController]);

function adminHomeController(
    $http,
    $q,
    $scope,
    utilityService
    ) {

    var app = $scope.app;
    var config = app.config;
    var home = this;
    var util = utilityService;

    home.autoSave = false;
    home.data = {};
    home.entityType = null;
    home.forms = { grid: null, modal: null };
    home.grid = { view: [], data: [] };
    home.modal = { visible: false };
    home.row = {};
    home.rowSelected = null;

    home.configChanged = function (clear) {
        config.put();
        if (clear) {
            home.grid.backup = [];
            home.grid.data = [];
        }
    };

I have:

class AdminHomeController {

    private config1; // I tried different variations here but none worked
    public config2;  //

    constructor(
                 private $scope: IAdminHomeControllerScope
               ) {
                     this.config = $scope.config; // << this works
                 }

    static $inject = [
        '$scope'
    ];

    configChanged = (clear) => {
        this.config.clear();
    };

}

This code works and this.config has all the methods I need. However is there a way that I can remove the need for the this? What I would like to be able to do is to code the following:

configChanged = (clear) => {
    config.clear();
};

I tried with many different variations but I cannot get it to work.

Here's an example of the same code before changing to Typescript:

angular.module('admin')
    .controller('AdminHomeController', [
        '$http',
        '$q',
        '$scope',
        'utilityService',
        adminHomeController]);

function adminHomeController(
    $http,
    $q,
    $scope,
    utilityService
    ) {

    var app = $scope.app;
    var config = app.config;
    var home = this;
    var util = utilityService;

    home.autoSave = false;
    home.data = {};
    home.entityType = null;
    home.forms = { grid: null, modal: null };
    home.grid = { view: [], data: [] };
    home.modal = { visible: false };
    home.row = {};
    home.rowSelected = null;

    home.configChanged = function (clear) {
        config.put();
        if (clear) {
            home.grid.backup = [];
            home.grid.data = [];
        }
    };

• javascript
• angularjs
• typescript

Share Improve this question Follow edited Jul 27, 2014 at 5:26 Alan2 24.7k8686 gold badges276276 silver badges480480 bronze badges asked Jul 27, 2014 at 4:05 user3568783user3568783 2

• 1 Well before when I was using javascript only my solution looked clean. Now the solution has the word "this" in front of almost every function call. In some cases I have almost 100 function calls looking this way. – user3568783 Commented Jul 27, 2014 at 4:08
• Dropping this will cause your code to have a different meaning in JavaScript. This is not Java or C# or C++... – Stephen Chung Commented Jul 28, 2014 at 3:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

As djechilin said:

If you omit "this," the interpreter will simply look for the variable name in local, closured and global scopes, not actually look up object properties

So you can potentially do that in TypeScript by moving the function definition into the body of the constructor (where you have access to the closured $scope variable). Here we also close over config and then use it in the function:

class AdminHomeController {

    configChanged: ()=>void; // Need to declare the function  

    constructor(private $scope: any) {
        var config = $scope.config;
        this.configChanged = ()=> { // And then assign it
            config.clear();
        };
    }
}

As you can see, it's not elegant. You have function definition + declaration split. Also, the constructor body is being needlessly heavy.

TypeScript is not to blame here. It's just JavaScript.

In Javascript definitely not, and in Typescript I'm pretty sure no. References in Javascript bind lexically, not whatever the other way is called. If you omit "this," the interpreter will simply look for the variable name in local, closured and global scopes, not actually look up object properties. You would need some sort of magical flag to say "this variable is an object property," and the way this is implemented is with "this."

This is very usual in Javascript. Compiled languages like Java don't suffer this problem, and I'm not sure about other dynamic languages. It's not necessarily hard to solve; it's just not how JS has done things (arguably wrongly).