CoffeeScript vs TypeScript

Abstract

This point of view intends to provide the reader with a holistic view of two highly sought out languages to write JavaScript and how they stack against each other. The responsibility of both these languages is to provide developers better syntax and features to write and manage complex JavaScript code. Both these languages (CoffeeScript and TypeScript) are just superset of JavaScript which at end compiles down back to JavaScript by their respective compilers. First, we will go through a high-level introduction of both CoffeeScript and TypeScript and then we will take important features of both and compare them to find their suitability.

CoffeeScript:

The fundamental thought behind CoffeeScript is to make the code more concise, saying things with a minimum key press. CoffeeScript avoids using ‘{‘, ‘;’ or ‘(‘, instead uses indentation to determine code flow similar to Python. CoffeeScript allows developers to use lambda like syntax to write functions which is more concise and easy to read.

CoffeeScript

add = (a, b) -> a+b

JavaScript

function add(a, b) { return a+b; }

CoffeeScript also follows best practices for JavaScript like when == or != is used in CoffeeScript, it gets compiled into === or !== respectively in JavaScript. CoffeeScript has an array of conventions like last statement inside a function is by default a return statement or in CoffeeScript, we don’t need to explicitly declare variables, CoffeeScript declares them for you when you first time use them.

TypeScript:

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript does not work on the principle of concise code like CoffeeScript but TypeScript tries to let developers write code in object-oriented format and then converts that to JavaScript format. TypeScript provides developers with features like type safety, compile-time type checking, object-oriented constructs on top of JavaScript. TypeScript provides keywords like Interface, Classes, private, public, constructor which allow developers to write large JavaScript code in a more manageable way.

TypeScript

var addFunction = function (n1: number, n2: number, n3: number) {

var sum = n1 + n2 + n3;

return sum;

};

JavaScript

var addFunction = function (n1, n2, n3) {

var sum = n1 + n2 + n3;

return sum;

};



Following are some of the main considerations for comparing CoffeeScript and TypeScript

Coding design:

Coding design talks about the syntax, code structure, code maintainability and extensibility, learnability for both these languages.

CoffeeScript is easy to write, concise, provide lots of syntactical sugar and its pleasure to write if you are from Python or Ruby background. CoffeeScript takes away all the noise from the code and lets developers write and understand the meat of the code. The syntax of CoffeeScript is simple to learn and implement, it does not have any heavy conventions like using curly braces, semicolons, and provides a way to handle the “this” dilemma in JavaScript. CoffeeScript compiler compiles the code into JavaScript and we can then add the JavaScript file in our required HTML pages hence CoffeeScript is held separately. Because the code is in a more structured manner it becomes more readable and maintainable. As CoffeeScript coincides nicely with Ruby and Python, it has an easier learning curve for the developers who have worked on these languages but having said so, it’s easy to learn for developers who do not have experience in above languages.

TypeScript is developed by Microsoft, though not restricted to Microsoft platform, the syntax is very close to C#. TypeScript does not work on fundamentals to writing concise code but, wants developers to write clean code which helps in the maintainability of the application. As TypeScript lets developers write code in C# format, it helps in maintain the object-oriented design (talked about in the next point). TypeScript also provides some very useful features on top JavaScript which are missing in CoffeeScript like type checking, type safety, IntelliSense, define the scope of variables like private and public which helps developers think client-side code in a similar fashion as server-side code. It also covers developers from scope creep, difficulties of dynamic variable type and these things become very important when you are writing a large scale application.

Object-Oriented Constructs:

CoffeeScript supports the concept of classes and constructors. We are writing code in the form of classes, define variables inside classes though the scope of variables is always public. CoffeeScript also has support for inheritance using the keyword “extends”, this helps us writing more robust and extendible code. CoffeeScript also allows us to define complex objects which can correspond to our business entities, this helps us write more code on client-side. CoffeeScript does not support interfaces, type inferences, or type checking, it is as dynamic in nature as JavaScript. CoffeeScript believes in writing code which is more in-line with how we think in real-world and this can be seen how we can define loops in CoffeeScript as shown below

singleItem = for item,index in itemArray

itemArray [index]

OR

singleItem = until itemArray .length is 0

itemArray .pop()

“until” is a keyword that allows us to say that “until” a condition is satisfied to keep on looping.

TypeScript resembles object-oriented constructs most closely in client-side languages. It supports the concept of modules (similar to the namespace in .Net), classes, interfaces, Optional types, Type inference, Type Checking, compile-time type support, IntelliSense. TypeScript is in line with most of the object-oriented concepts though it’s not an object-oriented language hence learning and implementing functionality in TypeScript is very fast. Not all the things written in TypeScript get converted to JavaScript like Interfaces but these features become very useful when you want to design the code with more rules and structure. TypeScript supports multiple types like string, number, and Boolean which allows TypeScript engine to flag down places where we try to assign values to other types. This solves one of the biggest problems of JavaScript i.e. dynamic typing.

var num: number = 30; //variable num is of type number

TypeScript also supports the scope of variables in classes and modules, we can create private variables in classes and then those will not be visible outside that class. TypeScript also has support for inheritance and implementation of Interfaces. These features help us create more robust and maintainable code.

Support for other libraries:

CoffeeScript is a standalone language and we can write whole JavaScript code in CoffeeScript but CoffeeScript does not have integrated support to use other external libraries like Jquery, Angular, Knockout, and many more which are being used by developers to create web applications. CoffeeScript code is a totally indifferent format as compared to JavaScript that we cannot use those interchangeably.

TypeScript on the other hand is very similar to JavaScript and we can write JavaScript inside TypeScript and it will compile just fine. TypeScript also supports the external libraries and provides developers to write code using these libraries in the same format as TypeScript. This is achieved using definitely type libraries that are available freely.

Conclusion:

Both CoffeeScript and TypeScript are definitely good wrappers on top of JavaScript and provide developers to write a more readable and manageable code. Both these come from a separate background, Python and C# and we can see a glimpse of these languages in these hence the learnability for both CoffeeScript and TypeScript depends on the background of the developer. TypeScript does provide more sweeteners than CoffeeScript and takes away a lot of dynamism from the developers. The main benefit of TypeScript is its support for static type checking and as was mentioned above all JavaScript code is automatically valid TypeScript code, which can make it easy to get started using TypeScript quickly. TypeScript also already has support for ECMA script 6 which shows that the creator of TypeScript is looking forward to making sure that as and when ECMA script 6 comes, TypeScript will already be using its features.

Overall, TypeScript is much more robust and allows more flexibility and options to write and maintain client-side code in the same form as server-side code.