Aphinya Dechalert
TypeScript. There are a lot of people out there who look at it with derision when they hear that a framework, library or bits of code has been written in. Some people even go as far to avoid using it simply because they view it as another thing to learn.
However, TypeScript is one of the best things to come out of Microsoft that is completely free, opensource and widely accepted by the community. the Angular team liked it so much that they even built their CLI generators around it.
Here’s the low down on why TypeScript is actually rather awesome.
Turns JavaScript into a grown up language
If we go back to the 90s when everything was just coming out, JavaScript entered the scene as snowflake effects for web pages. I was there. I remember. Fast forward a decade and a half, it is now running backends with RESTful APIs, mobile web apps and entire frontends.
While ECMA is pushing for yearly updates of the language, there is still quite a bit of room for JavaScript to grow up and learn from other languages such as Java and C#.
With TypeScript, it gives JavaScript developers the ability to strongly type their code and create resistance against code fragility. This can help reduce errors due to incorrect data types, in addition to other things like class declaration which was not introduced to JavaScript until ES6.
Why we need types in JavaScript
On the surface, TypeScript looks like any ordinary JavaScript code with the addition of typed data. The handiness of typing is that it prevents accidental or incorrect usage of the data given. It gives the loosely typed language a more strict approach to coding.
With TypeScript, a block of code may look like this:
let cat: string = "Merlin";
let age: number = 3;
function increaseAge( age: number ){
return age + 1;
}As trivial as it may seem, with TypeScript, if you were to run increaseAge(cat), TypeScript will throw an error because the function increaseAge() is expecting a number and not a string. However, if that were to run under plain JavaScript, increaseAge(cat) return Merlin1 instead of telling us that something went wrong. This could create errors further down the line and we’ll need to bust out our bug tracing skills and figure out what went wrong.
The above works exactly the same way as JavaScript but with a little bit of syntax sugar to help us detect potential errors before it happens.
Cross compatibility
The web moves fast and sometimes the things that run the web aren’t catching on fast enough. TypeScript solves this problem by allow you to select what version of JavaScript output you want. So for different environments, you only have to write the code once in TypeScript and then generate the necessary JavaScript code in your chosen ES version.
The purpose of TypeScript is that it sits on top of JavaScript, compiles into vanilla JavaScript and handles any feature gap that may occur. While JavaScript is backward compatible, when you’re using new features on a browser that’s running on a previous JavaScript version, it can often cause your application to break. TypeScript implements feature detection for you and determines how to help you handle the JavaScript output to achieve what you want. This allows you to spend more time coding your application’s logic than trying to handle to the logic of cross compatibility across devices, browsers and environments.
Standardizes code between teams
When you’re not bound to a particular JavaScript version, you become free to create without restrictions due to change or inability to change. Your code becomes much more resilient to age and you are able to implement features and functionality in the most cohesive and modular manner without the need to refactor every time JavaScript updates or when browsers and environments catch up.
You team only needs to become versed in programming paradigms and implement them in TypeScript rather than have to deal with the cross compatibility and potential upgrade issues. This also allows your team to close the feature and productivity gap that arises from changes and mismatch of JavaScript versions in the coding and final target environment.
Robust software across frameworks and libraries
During the time of Angular 2’s development, the team was actually looking to create a superset of JavaScript that would solve the issue of the feature and compatibility gap. TypeScript presented themselves as a candidate and the unlikely partnership between Google and Microsoft happened in the open source world.
Apart of the optional typing capabilities, TypeScript also gives access to ES7 and ES8 while major browsers are still playing catch up. 2018 features such as Object.fromEntries is not supported in Chrome 72 and all of Edge’s browsers. 2019’s Well-formed JSON.stringify is still not a thing in Node, along with optional catch binding in Node versions 8.10 or older.
You can check out more on the ES compatibility matrix here.
But how does it play with major players like React and Node?
We all know that the Angular promotes TypeScript as much as it promotes itself. You can’t really go into Angular without touching TypeScript. But what about React and Node? React already uses JSX and Node, well you can just write that in plain JavaScript.
The thing with TypeScript is that it doesn’t change the way you write your code. It only adds additional structure to it in order to create a certain level of future proofing. So your React code can still look like React code but with the addition of types.
When you transform JavaScript code into TypeScript, your code will still run because there are no types attached it yet. However, if types are declared, that’s when you will start to see the beauty and handiness of TypeScript in your debugging process.
TypeScript sits on top of everything else and does not interfere with the workings and structure of your chosen framework, library or vanilla JavaScript code.
Final words
If you’re new to the JavaScript scene, you shouldn’t deride TypeScript on first sight. TypeScript wasn’t designed and created just to entice back end developers onto the front end, but rather, to provide everyone with a tool that allows us to create robust code based on the lessons learned from other languages.
JavaScript was created to be portable and easy — but over time, we’ve seen the language grow beyond its original intention. While a few hundreds, if not thousands lines of code, would still be alright to maintain in vanilla JavaScript — we all know that is no longer true. JavaScript code has exploded and is running everywhere and on almost every device. The amount of lines have grown exponentially and we need a way to mentally digest and maintain it without it taking over our lives.
Learning TypeScript itself is not hard. It writes and runs like JavaScript — just with a few more tools and tricks to help you code better. In fact, you could just write TypeScript code like JavaScript and it will still compile. While it may just seem like syntactical sugar, it makes our experience maintenance and writing code just that much sweeter.
