0

In the component class i have been writing this:

export class myapp{
  detail;

  myarr = ['me', 'myself', 'i'];
  title = this.myarr[0];
  this.detail = this.title ;  //error
}

why this.detail is not allowed but this.title is allowed, why I have to create new variable, cant I use variable already in the class

drew moore
  • 31,565
  • 17
  • 75
  • 112
blackHawk
  • 6,047
  • 13
  • 57
  • 100

2 Answers2

0

Inside a class but outside of methods you can only initialize fields or declare methods. You can't add arbitrary statements there.

You can use the constructor() for that

export class myapp{
  detail : string = 'I am';

  myarr = ['me', 'myself', 'i'];
  title = this.myarr[0];
  constructor() {
    this.detail = this.title ;  
  }
}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • why this.myarr is allowed anyway – blackHawk Jun 23 '16 at 06:51
  • because its a field initializer. You can have `someField = someStatement;` but you can't have `someStatement;`. – Günter Zöchbauer Jun 23 '16 at 06:52
  • so all thing is, the error was because of someStatement = someStatement – blackHawk Jun 23 '16 at 06:55
  • if you are expert in angularfire2 then i have question for you, can we integrate angularfire2 with rxjs, like getting data using angularfire2 and apply operator on it – blackHawk Jun 23 '16 at 06:57
  • No, `this.detail` is not a statement. The line is just not a field or method declaration. – Günter Zöchbauer Jun 23 '16 at 06:57
  • I have seen angularfire2 being mentioned and I guess it is related to Googles Firebase, but that's it ;-). – Günter Zöchbauer Jun 23 '16 at 06:58
  • http://stackoverflow.com/questions/37959306/how-to-apply-rxjs-operator-to-data-got-from-angularfire2 . the link to the other question – blackHawk Jun 23 '16 at 06:58
  • i think this.detail should be allowed, because we are initializing it, as you said outside method but inside class – blackHawk Jun 23 '16 at 07:01
  • It definitely should not. I don't know any language where this would be supported. You are not declaring a field or method. What's the problem with using the constructor? That's exactly what the constructor was added for. – Günter Zöchbauer Jun 23 '16 at 07:05
  • Less sloppy languages don't even allow `this` at the right side of a field declaration and for good reasons because this makes the order of field declarations relevant. – Günter Zöchbauer Jun 23 '16 at 07:07
  • nothing just trying to understand why i cant initialize it at class level if i declaring it on class level – blackHawk Jun 23 '16 at 07:07
  • You can initialize but it has to be within the statement to the right of the field declaration. `fieldName = someStatement;` – Günter Zöchbauer Jun 23 '16 at 07:09
  • yes, fieldName is allowed but this.fieldName is not, what if we have declared field somewhere in the class but outside of any method, then why cant we initialize it like this : this.fieldName – blackHawk Jun 23 '16 at 07:13
  • As mentioned (I guess several times already) because `this.foo` is not a field declaration and not a method declaration which are the things that are allowed at the top level of a class (besides that also `constructor()` is allowed). `this.foo...` is arbitrary code which belongs inside a method or the constructor. – Günter Zöchbauer Jun 23 '16 at 07:16
0

In your instance, there is no point re-declaring the class member...

export class myapp{
    myarr = ['me', 'myself', 'i'];
    title = this.myarr[0];
    detail = this.title ;
}

Why is TypeScript doing this?

TypeScript is helping you to spot that you may have accidentally declared a second member with the same name by stopping you from doing what you are attempting.

You will also note that you don't need to use the this prefix for members in a class. The generated JavaScript will have them...

var myapp = (function () {
    function myapp() {
        this.myarr = ['me', 'myself', 'i'];
        this.title = this.myarr[0];
        this.detail = this.title;
    }
    return myapp;
}());

You can prefix the members with an access modifier. They are private by default.

export class myapp{
    private myarr = ['me', 'myself', 'i'];
    protected title = this.myarr[0];
    public detail = this.title ;
}

Access modifiers are enforced at compile time only.

Fenton
  • 241,084
  • 71
  • 387
  • 401
  • I just wanted to know why i cant this.memberVariable = this.memberVariable, I thought if I declare some memberVariable inside class but outside any function, and later at some other line i want to intialize it with some memberVariable like this, this.memberVariable = this.memberVariable in the same scope, inside class but outside any function, why cant i do that? – blackHawk Jun 23 '16 at 11:00
  • Effectively, the member variables placed directly inside the class will execute once when the class is instantiated. So if you *were* allowed to write the code in your orignal question, it wouldn't give you any benefit as it would execute once, and leave you only with the final value. In my updated version you can see that you *can* set the member based on another member - but there would be no point setting it multiple times. – Fenton Jun 23 '16 at 11:35
  • @blackHawk that doesn't affect my answer. If you are going to create the `detail` variable, simply assign the value to it on the same line -> that will be the "net result" of doing it on multiple lines. TypeScript is helping you to spot that you may have accidentally declared a second member with the same name by stopping you from doing what you are attempting. – Fenton Jun 23 '16 at 17:15