TypeScript or Babel?
TypeScript and Babel are both hot options for transpiling ES6 into the more widely accepted ES5 standard. While Babel simply converts ES6 to browser friendly ES5, TypeScript both transpiles and extends JavaScript through static typing and class-based object oriented programming. In this article, we discuss the key differences between TypeScript and Babel and which option is right for you.
TypeScript and Babel are both transpilers
A transpiler takes code from one langauge and converts it into another language. This is similar to a compiler used with a compiled language (like Java or Objective-C), the key difference being the level of abstraction. A transpiler converts between two languages with similar levels of abstraction whereas a compiler converts a higher level of abstraction down to a lower level.
Both TypeScript and Babel are transpilers that take ES6 input and produce the ES5 equivalent. Developers write apps using ES6 or TypeScript and then transpile the code into ES5. The output files are then referenced directly by the application at runtime.
TypeScript is a type checker, Babel is not
TypeScript serves as a type checker as well. This means that every variable and function you define has a specified data type / return type associated with it. The benefits of type checking are best explained through example. Take the following JavaScript:
var myString = "hello"
(function(){
return myString * 2;
})()
This will return NaN at runtime since a string can't be multiplied by 2. With TypeScript, we would define our myString variable as follows:
let myString: string = "hello"
Notice how we use : string to explicitly define the data type for our variable myString. Now when we try and transpile our TypeScript file it will throw an error. The transpiler catches us trying to multiply a string by 2 before runtime, effectively catching the error at compile time.
How is this beneficial? After all, JavaScript has always been an interpreted language. Why slow down development time by explicitly checking all of our variables and functions before runtime? There are a few key reasons why type checking is beneficial. They include:
- Early detection of programming mistakes
- Prevents runtime failures
- Easier readability
- Easier to maintain
Sure, type checking adds some extra steps but it keeps your code more organized and helps catch bugs faster (especially for larger applications).
TypeScript extends JavaScript functionality
TypeScript is a strict superset of JavaScript. This means it expands on the existing functionality of JavaScript. Although the ES6 standard includes things like modules and classes, TypeScript extends this functionality to include things not inherently supported by ES6. It introduces things like interface and access level modifiers (public, private) similar to other object oriented languages like Java.
This extended functionality is somewhat controversial as things like interface aren't strictly enforceable like they are in .NET or Java. Although some developers get hung up on this, TypeScript ultimately makes front end JavaScript more object oriented. For those coming from a Java or .Net background, this makes TypeScript an easier transition.
Is TypeScript or Babel right for you?
Both TypeScript and Babel will allow you to write ES6 that converts to ES5. The real question you have to ask yourself is if you want all the bells and whistles that come with TypeScript. Specifically, if your team sees value in type checking or if you are working on a larger project then TypeScript may be the way to go. If you are are quickly trying to prototype a small project or are coming from a JavaScript background, using Babel may be sufficient for your case. A lot of it ultimately boils down to personal preference.
Conclusion
Both TypeScript and Babel allow you to write your apps using the ES6 standard. This is important since it's only a matter of time before ES6 completely takes over. If you’re operating in an enterprise environment then TypeScript may help you cross the T's and dot the I's. If you were built on ES5 and have no Java experience, then using Babel as a transpiler should be sufficient for your development needs.
