Referencing 'this' in Angular and Typescript: Best practices

Question

Referencing 'this' in Angular and Typescript: Best practices

When setting up TypeScript in an Angular project, I use the following syntax to declare a controller:


module app {

    class MyController {
        public myvar: boolean;

        constructor() {
            this.myvar= false;
        }
    }
    angular.module("app").controller("MainController", [MainController]);
}

It's important to note that I prefer not to inject the scope and instead utilize inner properties/methods of the controller. However, I find accessing properties with 'this' to be cumbersome. Typically, I would have to declare:

var vm = this.
vm.myvar = ...

This becomes repetitive as I have many methods; each one requiring the 'vm' declaration. Are there any best practices or patterns for declaring 'vm' only once?

angularjs typescript controller

Answer 1

Answer №1

Instead of accessing properties with 'this' and declaring var vm = this, is there a more efficient way to declare 'vm' only once?

It's advisable to rethink that practice. In TypeScript, it's simpler to utilize this directly without assigning it to a variable—it's readily available for use.

The trick here is to utilize arrow functions to always refer to the class instance's this and not the this linked to a regular function expression.

class MyController {
    myVar = false;

    someOtherMethod() {
        // good
        functionWithCallback(() => {
            // this will be the class instance
            console.log(this.myVar);
        });

        // bad
        functionWithCallback(function() {
            // this will not be the class instance
            console.log(this.myVar);
        });

        // good
        functionWithCallback(() => this.myOtherMethod());

        // bad, `this` in myOtherMethod is not the class instance
        functionWithCallback(this.myOtherMethod);
    }

    myOtherMethod() {
        console.log(this.myVar);
    }
}

function functionWithCallback(callback: Function) {
    callback();
}

Answer 2

Instead of accessing properties with 'this' and declaring var vm = this, is there a more efficient way to declare 'vm' only once?

It's advisable to rethink that practice. In TypeScript, it's simpler to utilize this directly without assigning it to a variable—it's readily available for use.

The trick here is to utilize arrow functions to always refer to the class instance's this and not the this linked to a regular function expression.

class MyController {
    myVar = false;

    someOtherMethod() {
        // good
        functionWithCallback(() => {
            // this will be the class instance
            console.log(this.myVar);
        });

        // bad
        functionWithCallback(function() {
            // this will not be the class instance
            console.log(this.myVar);
        });

        // good
        functionWithCallback(() => this.myOtherMethod());

        // bad, `this` in myOtherMethod is not the class instance
        functionWithCallback(this.myOtherMethod);
    }

    myOtherMethod() {
        console.log(this.myVar);
    }
}

function functionWithCallback(callback: Function) {
    callback();
}

Referencing 'this' in Angular and Typescript: Best practices

Answer №1

Similar questions

Error message displaying 'class-transformer returning undefined'

The reset function in Angular's template-driven form does not seem to be functioning properly when implemented using a component

AngularJS offers a single checkbox that allows users to select or

Tips for utilizing a formatter with a Doughnut chart in Angular using Chart.js

The absence of an 'Access-Control-Allow-Origin' header on the requested resource prohibits access from the origin 'localhost:8080'

What is causing the issue with AngularJS Routing Concept in Notepad++?

Utilize an array as the response model in Amazon API Gateway using the AWS CDK

Accessing Route Data in Angular's AppComponent

Unlock the full potential of working with TaskEither by utilizing its powerful functionality in wrapping an Option with

Receiving distinct data from server with Ionic 2 promises

Conceal the name of a property when displaying it

Is it possible to pass a prop from a parent container to children without knowing their identities?

Attempting to assign a value in ng-init that was only established after loading the model and making two AJAX calls

What is the purpose of manually creating the vscode.d.ts file in the vscode source code?

AngularJS table not properly sorting date and time

Can a function's return type be set to match the return type of its callback function?

When invoked, the function Subscribe() does not have a

AngularJS - Executing code after the entire application has finished loading

Leveraging data generated by a CasperJS script within an AngularJS application

Can you explain the meaning of `(error: T) => void` in error?