For server-side Web development you can use a multitude of languages and frameworks, but for client-side programming JavaScript is the only language that is supported by all browsers. JavaScript development has gotten better with the advent of frameworks like jQuery, but the language itself still contains a large number of mind-bending gotchas.
To combat this there are many languages that compile down to JavaScript, much the same way in which C++ used to compile down to C. These new languages offer improved syntax and new concepts while papering over the ugly bits of the JavaScript underneath. They can offer quick ways to write and manage complex code, while automatically generating more “correct” JavaScript than you are likely to do by hand.
It’s easy to read, but there is definitely a learning curve connected with its use.
Similar to Python, indentation is used to indicate blocks (function bodies, if statements, etc.) rather than braces.
Semicolon statement terminators are optional, and not generally used.
When calling functions parenthesis are sometimes optional, but I find that more confusing than helpful so I just use them.
Functions are written with a simple lambda-like syntax, with an implied return value from the last statement:
add = (a, b) -> a+b
rather than:
function add(a, b) { return a+b; }
CoffeeScript’s == and != operators compile to JavaScript’s === and !== to avoid the type coercion and general confusion of the JavaScript operators.
Aside from syntax, there are also a large number of features and fixes added by CoffeeScript. Variable scoping is improved in two ways; first a CoffeeScript file is generated in its own wrapping function to avoid polluting the global namespace. Second, the compiler figures out the proper scope for a variable and adds a variable declaration for you. You don’t actually declare variables in CoffeeScript (var is a reserved word), you just use variables and they are declared for you in the output. This still causes problems with typos creating new variables, but it’s an improvement over JavaScript, where typos can create global variables!
Another common problem in JavaScript is that callback functions are invoked with a different this object than you might expect, which makes it impossible to access object properties or methods. This is typically solved in JavaScript by capturing the correct this instance to another variable (self is one convention) and using that captured variable instead of this. CoffeeScript makes this pretty easy. If a function needs to access this, you define it with a fat arrow => instead of a skinny one ->. That causes it to be bound to the correct this and generally just works. There’s also a shorthand of using @something as an alias for this.something, which makes it obvious when a function needs a fat arrow.
CoffeeScript also provides great support for defining classes and class hierarchies, which can be confusing in JavaScript.
There’s a host of other great features, but CoffeeScript does have some drawbacks:
It’s dynamically typed (same as JavaScript) so it provides no compile-time type safety.
Its syntax is different enough that JavaScript isn’t valid CoffeeScript, so converting old code can take some effort (though there is a backtick delimiter to “pass through”).
TypeScript took a different approach than CoffeeScript in that it’s a superset of JavaScript. All JavaScript code is automatically valid TypeScript code, which can make it easy to get started using TypeScript quickly.
Like CoffeeScript, TypeScript provides a lot help for generating better JavaScript, such as a “natural” syntax for defining classes. The main benefit of TypeScript is its optional support for static type checking. The type checking is optional because regular (type-less) JavaScript code must be supported, but the fact that it’s optional is also a benefit because you can use it on a case-by-case basis. Use dynamic type checking for quick or prototype code; add type annotations when you want rigorous static checking. It also makes it easy to interface with external JavaScript libraries (e.g. jQuery) either without type checking or with a typed interface definition that you create (or download). (A typed definition for jQuery is of course available from NuGet.)
Read More:
TypeScript also provides a fix for the this problem; when using lambda syntax for defining methods this will be captured automatically.
Overall, TypeScript is much closer to JavaScript than CoffeeScript, which makes it easier to learn and means the generated output is closer to your input. It also means that there’s less “fixing” of JavaScript’s gotchas and less fancy syntactic sugar.
Here are some recommendations:
 |
| What is The Differences Between TypeScript And CoffeeScript |
CoffeeScript
CoffeeScript is one of these languages, and a popular one. Its syntax is similar to JavaScript, but it has a lot of departures in the name of cleaner, more concise code.It’s easy to read, but there is definitely a learning curve connected with its use.
Similar to Python, indentation is used to indicate blocks (function bodies, if statements, etc.) rather than braces.
Semicolon statement terminators are optional, and not generally used.
When calling functions parenthesis are sometimes optional, but I find that more confusing than helpful so I just use them.
Functions are written with a simple lambda-like syntax, with an implied return value from the last statement:
add = (a, b) -> a+b
rather than:
function add(a, b) { return a+b; }
CoffeeScript’s == and != operators compile to JavaScript’s === and !== to avoid the type coercion and general confusion of the JavaScript operators.
Aside from syntax, there are also a large number of features and fixes added by CoffeeScript. Variable scoping is improved in two ways; first a CoffeeScript file is generated in its own wrapping function to avoid polluting the global namespace. Second, the compiler figures out the proper scope for a variable and adds a variable declaration for you. You don’t actually declare variables in CoffeeScript (var is a reserved word), you just use variables and they are declared for you in the output. This still causes problems with typos creating new variables, but it’s an improvement over JavaScript, where typos can create global variables!
Another common problem in JavaScript is that callback functions are invoked with a different this object than you might expect, which makes it impossible to access object properties or methods. This is typically solved in JavaScript by capturing the correct this instance to another variable (self is one convention) and using that captured variable instead of this. CoffeeScript makes this pretty easy. If a function needs to access this, you define it with a fat arrow => instead of a skinny one ->. That causes it to be bound to the correct this and generally just works. There’s also a shorthand of using @something as an alias for this.something, which makes it obvious when a function needs a fat arrow.
CoffeeScript also provides great support for defining classes and class hierarchies, which can be confusing in JavaScript.
There’s a host of other great features, but CoffeeScript does have some drawbacks:
It’s dynamically typed (same as JavaScript) so it provides no compile-time type safety.
Its syntax is different enough that JavaScript isn’t valid CoffeeScript, so converting old code can take some effort (though there is a backtick delimiter to “pass through”).
TypeScript
TypeScript is a newer contender, having just reached a 1.0 release on April 2nd of this year. It’s written by Microsoft and is intended to have first class language support in Visual Studio including Intellisense and on-the-fly compiler errors. TypeScript is not Visual Studio-only however. It’s available as a separate compiler and supported by many other editors.TypeScript took a different approach than CoffeeScript in that it’s a superset of JavaScript. All JavaScript code is automatically valid TypeScript code, which can make it easy to get started using TypeScript quickly.
Read More:
- Differences Between JavaScript and TypeScript.
- ECMAScript 6 Latest Interview Questions And Answers.
- E4X Most Common Interview Questions Answers.
TypeScript also provides a fix for the this problem; when using lambda syntax for defining methods this will be captured automatically.
Overall, TypeScript is much closer to JavaScript than CoffeeScript, which makes it easier to learn and means the generated output is closer to your input. It also means that there’s less “fixing” of JavaScript’s gotchas and less fancy syntactic sugar.
CoffeeScript VS TypeScript?
There’s a case for both of them, and if you didn’t mind the maintenance and mental overhead, you could actually use both of them on the same project. Since both compile to JavaScript you can easily use code created by the other language.Here are some recommendations:
- If you want static type checking and better tool chain support (on Visual Studio) choose TypeScript.
- If you want a short learning curve from JavaScript or have a need to migrate legacy code (which isn’t common since you can continue to use old JavaScript without modification), choose TypeScript.
- If you want more concise code and lots of syntactic sugar, choose CoffeeScript.
- If coming from Ruby (or possibly Python), CoffeeScript is probably a closer mental match.