How TypeScript fixed ES6 messed up design
We’ve all been in the whirl of the transpilers since the days of CoffeeScript! a lot of languages tried to fix the mess in JavaScript but most of them didn’t leverage it like they should do until the tc39 people stood up to fix the current issues and started enhancing ECMAScript and opened the doors for proposals.
It was all good at the beginning, and Babel shined in the chaos of the updates and changes to help us start writing apps using the future JavaScript. All of that was cool till we started to miss some stuff like simple static variable or private methods (yes somehow you can create a private method in ES5) then TypeScript came out.
TypeScript was made to make writing front end apps easier for those who are used to languages like C# (TypeScript was created by the same guy who created C#) and it made JavaScript powerful! let’s see how it leveraged JavaScript:
1- Static variables
Yes, static variables. ES6 missed that! and it wasn’t in any official specification release and now it’s in stage-2 and it will be part of the official specification soon.
For real? this was so easy in ES5
While in ES6 it’s not there! and the only trick to do it is after declaring the class
In TypeScript it’s so easy and clear
Now the only way to get a static variable in the current version is by using a static getter method!
Simple stuff like that are really important, waiting for tc39 proposal to pass to have static variables back again.
2- Private variables & methods
Yes it is possible (somehow) to get private variables in ES5, here’s an example
As you saw, achieving private methods and variables is possible in ES5 the only problem is you have to create a reference for this keyword (don’t talk to me about OOP specifications I’m trying to deliver an idea here that’s it!)
Now in TypeScript stuff are easier to write, just use the private keyword and everything is done
Yes it’s that simple and you’ll get a warning before compiling/transpiling that you’re trying to use a private variable or method and yes I know you still can access those methods and variables since the transpiler is still using the prototype keyword (check ts playground to see yourself) instead of doing a trick like what we did earlier in the ES5 example but hey if your app is fine at compile time then it will work great at runtime, and don’t talk to me about hackers because every .js file is public to your site visitors so stop!.
Now to stay fair in this there’s a tc39 proposal for private methods and variables, I don’t like the syntax of it, to be honest, using # in front of every private member is confusing at least go with what the community used to do by using _ in front of private members but anyway this is still a good thing to wait for.
3- Variable declaring
One annoying thing about JavaScript is that you can declare variables from any place inside your class, whether you’re writing with ES5 syntax or ES6 this problem is still valid in JavaScript!
I remember I had bad times trying to find the place where the variable was declared to the $scope in angularjs because anybody from any method can create a new variable and this problem happened again with React when you declare a new variable using the this keyword and it will be available for the whole class and again causing you problems (I guess now you understand the need for functions like setState in React to keep your variables usage sane!).
While in TypeScript variables can only be declared outside the methods inside the class with default values if wanted, you can also assign default values in the constructor and change them inside the method when you call them this way your work will be more organized and you can avoid silly errors.
Conclusion
JavaScript is a great language but it is always misunderstood, it is indeed holding the title for the most misunderstood language in the world! but a lot of efforts have been and will be shown to improve it and keep it simple for the next generation.
That was some of my thoughts, I might be right and I might be wrong.
See ya in the next article, Salam.
