TypeScript vs. JavaScript

What is TypeScript ?

On the 27th of April 2017, you wake to begin your morning routine, It’s 4:05 AM, so you don’t see it yet. No screen time till 6:00 am. Personal policy. You meditate. You work out, you make breakfast. This time you decide to slide in the book reading routine for a little while in there. You surely haven’t done that in a while.It’s 8:00 am you have managed to not have checked that phone screen. Your mind is fixed on getting to the office first. And again you don’t see it. Finally, the morning meetings are over and you have your sanity back for what? An hour? Half an hour maybe before another meeting.Then you pick up your phone to check for what you believe is a Twitter notification. That’s when your eyes catch it.

Announcing TypeScript 2.3

Today we’re excited to bring you our latest release with TypeScript 2.3!

For those who aren’t familiar, TypeScript is a superset of JavaScript that brings users optional static types and solid tooling. Using TypeScript can help avoid painful bugs people commonly run into when writing JavaScript by type-checking your code. TypeScript can actually report issues without you even saving your file, and leverage the type system to help you write code even faster. This leads to a truly awesome editing experience, giving you time to think about and test the things that really matter.

……..

You wonder, what in Gods name is this? You had just gone through hell with React/Redux, you are still grappling at Vue.js. Somehow you have figured Angular out. Well okay let’s say you did not really have a choice, you were learning on the job. No results meant your job would suffer. And so you learned Angular.

You think of the stress you have to go through to learn this shiny new thing. You check up the usage of this **strict syntactical superset of JavaScrip**t, a few days later and you find out it has an army of developers behind it. Do people love this thing? Now as a smart developer you know you have no other job but to keep up with the market as Chad Fowler mentioned in his still very relevant book The Passionate Programmer. I understand perfectly the way you feel. But I personally feel like TypeScript has come to stay.

But What Exactly Is This JavaScript ?

JavaScript the very dynamic programming language that everyone was drawn to because it didn’t “house them in” like C++ did. Its untyped nature and its unique prototypal inheritance was perfect bait. To justify my gut feeling about this just days after TypeScript was released by Microsoft, Angular picked it up and abandoned the plain ES6 that was another available option. Initially, their idea was to go with actionScript, a javascript scripting language that extended Typescript and got published by Google’s AngularJS team exactly two years after the forerunner TypeScript. In fact, it was going to run on the TypeScript of course as an extension.

With all that being said since then a decorator proposal has appeared for ES and it seems to be quite close to what original actionScript did. But before we jump the gun here really. What is this decorator proposal ES utilizes ?

A Decorator is:

• An expression
• That evaluates to a function
• That takes the target, name, and decorator descriptor as arguments
• And optionally returns a decorator descriptor to install on the target object

Read more here. But if you don’t want to branch out into another page until you are done with this article, a decorator is basically a high order function? An high order function ‘takes in’ another function and when it runs, it extends the behaviour of the latter function without explicitly modifying it.

UA very simple python decorator

So if our function myFunction(as a higher function) here takes in a function it won’t necessarily modify that function, though the output will turn out differently.

One of the first things that put me off with decorators was the ‘@’ sign. It immediately felt like I was reading another language other than JavaScript. I am sure this was the experience for a lot of other people too. Either ways the ‘@` tells the parser that everything (in that block of code) after that sign is a decorator. Sounds easy now? It is simply just talking to the computer directly what is about to happen which is that a function will be decorated by another function and the results will be passed back up.

And the computer says; ‘Got it! Fine, go on’ . The computer then treats that block of code as a different kind of function, kind of like how a parent would treat a favourite child and as a result of this special attention from the ‘parent’, it becomes a function that can do cool things like memoization, authentication, logging and so on. Again I won’t go deeply into the details of this for now but when you think of decorators think of them as this:

A decorator at work

…Instead of this train wreck.

Imagine you have a couple of functions you want to wrap around themselves. It would be a nightmare to code and maintain such program. All said and done about ES6, of course, you would still have to deal with typing somehow in ES. And TypeScript is a natural fit there(when it comes to typing). You can complement ES with a solution like Flow to get gradual typing after all. Maybe we’ll see two bigger camps. One for ES (Babel guys) and one for TS.

What is Static vs Dynamic Typing ?

Typing has always been about the variables in the program. If I create a static typing language I don’t have to immediately tell the compiler that this particular integer and will always be an integer. It will be exactly what I stored in the program even If I forget while coding and changed its value by passing it to another class or something. A number of good language examples are C, C++, Java. Dynamic typing, on the other hand, is the direct opposite of what the above is about. Ruby, Perl and of course our poster boy: JavaScript. This doesn’t mean any one of these languages is inherently weak or bad. And that should be the focus.

Example of Java (Static and Strongly Typed)

There is no way the system can go wrong in evaluating the value of ‘foo’, ever.

Example of Javascript (Dynamic and Strongly Typed)

As opposed to Java or C++, which are both strongly typed languages, Javascript is intelligent enough to know/interpret what variable type you want to use. but because of the laxness that this creates or can create in code quality it is also called a weakly typed language. But we know better. Especially if you follow best practices.

Example of PHP (Static and Weakly Typed)

Between the two up there they are just paradigm ways of coding, it doesn’t mean Static typing is bad or Dynamic typing is good. The devil that should be your sole attention should be weak and strong type languages. Here is what you lose by overlooking a scripting language that is focused on improving the life its users.

• Generic functions & Polymorphism
• Higher order functions
• Object composition

Again. Dynamic types DOES NOT =/ No type checks. on that topic check out this article that Dynamic Typing is NOT Weak Typing Taking a step back what if we combined both sides of the coin, meaning we take what made C++ be C++ and introduced that into Javascript?

• Speed: Static languages are generally faster
• Efficiency/Effective Static languages make the programmer more accountable. Dynamic programming sometimes creates a moral hazard and encourages bad programming habits

Here is JavaScript Dynamically typed

Here is Javascript Strongly Typed

And that is TypeScript!

If this article makes Typescript sound interesting, you can delve more into Typescript and see if it’s something you want to invest time and energy into. This is just a very brief article talking about these tools in a very peripheral manner.

‘