Angular 2 component variable scope and references

Question

Is there a way to avoid always having to attach a "this" to referencing private Component variables or functions?

For example, the following will cause a "Cannot find name" error on "foo"

export class SomeComponent {
    private foo = 5;

    someMethod(){
        console.log(foo);
    }
}

To fix, I need to attach a "this" to the foo variable, as in:

console.log(this.foo);

I'm all for strong identification of variables, but this seems overly strict given the smaller size of most Angular components.

Suren Srapyan · Accepted Answer · 2016-10-28 12:07:30Z

3

In JavaScript and TypeScript you need to refer to the fields and functions of the class in that class with the this keyword

From The Documentation of TypeScript

Let’s take a look at a simple class-based example:

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

The syntax should look familiar if you’ve used C# or Java before. We declare a new class Greeter. This class has three members: a property called greeting, a constructor, and a method greet.

You’ll notice that in the class when we refer to one of the members of the class we prepend this.. This denotes that it’s a member access.

edited Oct 28, 2016 at 12:07

answered Oct 28, 2016 at 11:57

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

lenilsondc Over a year ago

Constructor shouldn't be considered a class member, isn't it?

Suren Srapyan Over a year ago

it is a class member, but not field. I speak about the fields, and also functions. Constructor is also a function but you can't call it inside the same class with this.

Mike M Over a year ago

I get that. The problem I have is that I get ridiculous looking code that looks like this.val = this.myMethod(this.variable1, this.variable2). Personal preference I guess. Thanks for clarifying though...

lenilsondc Over a year ago

@MikeM I'm with Suren, it's not possible. Typescript has to implement classes this way because of scope isolation issues in javascript, if you don't specify the this.gretting you can accidentally access window.gretting. In coffeescript there's the @gretting prefix that means this.gretting maybe there is a equivalent feature for typescript.

Mike M Over a year ago

@LenilsondeCastro, thanks, that makes sense. It would be nice if the TypeScript transpileation would assume that locally declared variables and methods were scoped this if referenced internally in the class and other scopes (e.g. window) would require explicit declaration.

|

Collectives™ on Stack Overflow

Angular 2 component variable scope and references

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related