if i type this simple typescript code:
class Point2D
{
constructor(public x: number, public y: number)
{
}
}
and look at the generated js:
var Point2D = (function () {
function Point2D(x, y) {
this.x = x;
this.y = y;
}
return Point2D;
})();
my question: how does above differ from:
function Point2D(x, y) {
this.x = x;
this.y = y;
}
if no difference, then above is much simpler
What you see is The design pattern - Module. See more here:
a cite:
Module Export
Sometimes you don’t just want to use globals, but you want to declare them. We can easily do this by exporting them, using the anonymous function’s return value. Doing so will complete the basic module pattern, so here’s a complete example:
var MODULE = (function () {
var my = {},
privateVariable = 1;
function privateMethod() {
// ...
}
my.moduleProperty = 1;
my.moduleMethod = function () {
// ...
};
return my;
}());
Notice that we’ve declared a global module named MODULE, with two public properties: a method named MODULE.moduleMethod and a variable named MODULE.moduleProperty. In addition, it maintains private internal state using the closure of the anonymous function. Also, we can easily import needed globals, using the pattern we learned above.
Another really fundamental resource is:
a cite:
In JavaScript, the Module pattern is used to further emulate the concept of classes in such a way that we're able to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope. What this results in is a reduction in the likelihood of our function names conflicting with other functions defined in additional scripts on the page...
see more in the links
The reason it is computed as such is due to the functional nature of JavaScript an the class nature of the code being converted. The typescript is attempting to convert the code as accurately as possible and since Javascript is classless. It writes the code to simulate a class, Of course the class emulation is not the most efficient way of achieving the desired result, but has been demonstrated to be more readable to the programmer with a class based background. Also while there are multiple ways to achieve the desired results in JavaScript, the way it was transcribed most accurately represents the source it was provided since it is indeed based on a class. As for the difference the generated code uses a constructor to create an object that is then used to create objects based on it. This is how you end up with the ability to use it like a class since the objects you create with it will inherit from it just like a class in the language from witch you are converting. The function you have provided will only assign the values to itself when invoked where as the generated code will create objects that include the functionality inherently. To clarify more: your function would be used like this Point2D(5,4) It is also worth pointing out here that in JavaScript using a capital to name an object is reserved by convention only for Objects constructed like the one the code generated that are expected to use the 'new' method when used. The generated code would be used like this pointA = new Point2D(5,4). Because the code returns the function Point2D and it is invoked using () at that time, pointA becomes an instance of Point2D which again is acting like a class, Also, if you were to add any properties, functions etc. to Point2D, pointA would automatically pick those up as well, whether it had already been instantiated or not. Hopefully this clears it up for you, there are other differences, but it is not clear exactly how much information you are looking to acquire.
