TypeScript: What is the difference between declaring variables inside the constructor and outside of it?

let's assume that I have a class written in TypeScript like this:

class Messenger { 
    x = 10;
    constructor(){
      this.y = 20;
    }
};

the JavaScript version of this will look like:

var Messenger = (function () {
    function Messenger() {
        this.x = 10;
        this.y = 20;
    }
    return Messenger;
}());
;

The x and y variables are compiled to the same thing in JavaScript so what is the difference here?

Thanks.

This is actually correct TypeScript:

class Messenger { 
    x = 10;
    y: number;

    constructor() {
        this.y = 20;
    }
}

You must declare properties of the class (not needed in JavaScript). As it compiles to the same think in JavaScript there is no difference in runtime. But is some cases it easier to write just x = 10 (property is correctly typed as number) than y: number + this.y = 20 - so if you have default value for properties that are not coming from parameters then you can write it in less characters.

How does variable declaration differ between the `class` and , in typescript without Angular2, you can do this with nothing more: Declaring the fields outside the constructor is for a more static approach like� Filed Under: Front-end Development, TypeScript Tagged With: difference between let and var, how to declare Variables in TypeScript, TypeScript fundamentals About Yogesh Koli Software engineer & Blogger lives in India, has 6+ years of experience working with the front-end and back-end web app development.

It does compile, however the compiler should give you an error message, that y is not part of class Messenger right here:

constructor(){
  this.y = 20;
}

However the compiler will often compile regardless of errors, unless you turn it off in your tsconfig.json. However there is a way to declare a variable inside the constructor, but it's not in the body but in the parameter list. Like this:

 constructor(public y: number){}

Either put private or public in front of them. This way the variable is automatically set to whatever you insert into the constructor without having to do this.y = y;. It's a very easy way of creating variables that you will always insert into the constructor.

You can even give a default parameter, that will work if you don't insert any arguments into the constructor:

 constructor(public y = 20){}

Check out this article for more information.

Why are instance variables declared outside constructors but , First, declaring them outside the constructors says “every instance of this In Java, is there a difference between setting instance variables inside a constructor � Notable changes include the constructor is now “inside” our class. The constructor is now explicitly defined - unlike the ES5 way which we had to assume / work out was in fact a constructor. One major difference is that in TypeScript we need to declare the class properties and their respective types upfront - typically you’d place these

Simpliest way, your code:

class Messenger { 
    x = 10;
    constructor(){
      this.y = 20;
    }
};

Is exactly the same like this:

class Messenger {
   x = 10;
   y = 20;
   constructor() { }
}

Because is the same to have this:

class Greeter {
   greeting: string;
   constructor(message: string) {
      this.greeting: string;
   }
}

that to have:

class Greeter { constructor(greeting: string) }

Actually you are doing the same, you are declaring a class property and if it is passed in the construction it will be assined, in other case it will be undefined. Is only a proper way to avoid innecesary code in TypeScript.

What is the best practice for initializing variables: outside or inside of , Given that you have declared some of the variables "static", use the first option. As you have observed, different people do it different ways. purpose here (you get such a default constructor for free if you do not define one): constructor is a reserved keyword in TypeScript. constructor is actually a class method which can have parameters — look below code at line no. 7 — we have parameter a and b of type number.

Handbook - Classes, One difference from the prior example is that each derived class that contains a What's more, before we ever access a property on this in a constructor body, we have to Note that even though tom is declared as an Animal , since its value is a name; Property '#name' is not accessible outside class 'Animal' because it� How TypeScript handles variable declaration. This odd-looking pattern is actually pretty common. The i in the parameter list actually shadows the i declared in the for loop, but since we named them the same, we didn’t have to modify the loop body too much.

TypeScript Classes and Constructors, We're ready to learn how to add TypeScript to our ES6 classes. There is no major difference between the ES5 and ES6 way, but by refactoring we can Notable changes include the constructor is now “inside” our class. Methods declared as above are known as “instance methods” and can only be� Global Scope − Global variables are declared outside the programming constructs. These variables can be accessed from anywhere within your code. Class Scope − These variables are also called fields. Fields or class variables are declared within the class but outside the methods.

The public keyword works in the same fashion, but also instructs the TypeScript compiler that it’s OK to access the property from outside the class.. Here’s a more complete example including the public keyword, as well as the result of not including a keyword: