TypeScript or Babel?

Last modified: April 17, 2017

Ask all your coding questions @ codequery.io

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"
    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.


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.


October 11, 2017
this comparison seems kind of strange, but it ultimately makes sense. both typescript and babel fit into the development ecosystems the same way. you basically need webpack to understand how this kind of stuff works. once you understand webpack, typescript and babel can be seen as the same thing (even though they are not). They are both just fancy JS transpilers.

June 20, 2017
TypeScript is it's own thing. Babel is just a way to convert es6 so it's supported in all browsers. TypeScript is goo for enterprise but outside of that, why? do people agree?
Jeremy W.
May 11, 2017
TypeScript = typechecking JS
babel = using es6

different things. TypeScript is an unfortunate side effect of Angular 2 but Babel is almost required for React so pick your poison.
May 1, 2017
if you care about type checking then start using TypeScript. i you care about writing the latest / sexiest js standard then use Babel. most of the React.js tutorials out there are already using Es6 so if you are just getting into the development game you may as well use Babel and React.

You might also like: