CoffeeScript versus TypeScript

by Dave Sweeton

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.


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

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

The type system is pretty cool, with lots of type inference where you'd want it, as well as interfaces that support "duck typing" in which the compiler enforces the "shape" of a value rather than strict inheritance. TypeScript also has support for Generics à la C# or Java!

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 versus TypeScript: Which to Use?

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.

I should also note that both of these solutions are only for standalone code files. Any script inline in HTML pages/views needs to stay JavaScript, though I'm sure at some point there will be inline compilers.

Stout Systems is the software consulting and staffing company Fueled by the Most Powerful Technology Available: Human Intelligence®. Stout was founded in 1993 and is based in Ann Arbor, Michigan. Stout has clients across the U.S. in domains including engineering, scientific, manufacturing, education, marketing, entertainment, small business and, yes, robotics. Stout provides expert level software, Web and embedded systems development consulting and staffing services along with direct-hire technical recruiting and placements. If you're looking for a job in the tech industry, visit our job board to see if you qualify for some of our positions. Best of luck to you! If you're looking to hire technical talent for your company, please contact us. This is a technical article catered to developers, technical project managers, and other technical staff looking to improve their skills. Sign up to receive our technical articles in your email inbox.

COVID-19 update: Stout Systems is open with no reduction in our service levels or capabilities. We are primarily working from home to keep our staff safe and have shifted from in-person seminars to Webinars as a way to continue our mission of providing community service to support the technology community. Visit our calendar of events to sign up for a free webinar.
© Copyright 1995-2023 - STOUT SYSTEMS DEVELOPMENT INC. - All Rights Reserved
envelopephone-handsetlaptop linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram