20

I'm looking into using TypeScript combined with a client-side MVC (most likely Backbone.js + Marionette.js or Ember.js) for future projects and therefor have a few questions related to performance and optimisation :

  • How does TypeScript output compare to native JavaScript performance wise ?

  • Since asm.js is a subset of JavaScript, would it be possible to convert TypeScript code into asm.js code ? If yes, is it already possible ?

  • Is it possible and still useful to create builds of AMD projects that use TypeScript with Google Closure compiler ?

  • How much overhead does TypeScript add on average, file-size wise ?

  • When using lightweight libraries like Backbone.js in a small project for example. Does it make sense to use TypeScript in regards to file size ?

I like the added benefits of TypeScript but I don't want to sacrifice performance for coding style and typing.

Any articles / books about using TypeScript in big projects, especially related to performance, optimisations and builds are very welcome !

Thank you in advance !

m_vdbeek
  • 3,704
  • 7
  • 46
  • 77
  • You need to read more about the nature of TypeScript. I'd suggest you take a look at the output of the TypeScript compiler. You'll find that it's just plain-old-vanilla JavaScript. Nothing fancy, and no real measurable overhead if you know how to write good JavaScript in the first place (as the same perf rules hold true). JavaScript can't be compiled to asm.js. It's a superset. So, neither can TypeScript. – WiredPrairie Dec 29 '13 at 01:50

1 Answers1

28

We evaluated and tested TypeScript thoroughly in our team and other teams use it already, so here is my experience:

  • TypeScript is a superset of JavaScript and it mostly translates 1:1 to JavaScript without any significant performance compromises, so if you know how to write efficient JavaScript, you know how to write efficient TypeScript. One of the not so efficient features is inheritance, which is "emulated" using JavaScript prototypes and produces more code than one would write normally in JavaScript. So use inheritance with caution. You can look at generated JavaScript to see whether your constructs are compiled efficiently enough for your case.
  • Compiling typescript to asm.js is the same problem as compiling JavaScript to asm.js - you would need to emulate the features asm.js lacks compared to full javascript... If you need some parts in asm.js you would probably need to write them yourself or compile from some more appropriate (less dynamic) language by emscripten and such.
  • TypeScript has some AMD support, but I cannot speak about google closure support... Since it tries to accomplish similar thing very differently (types and metainfo in comments instead in a new syntax), I do not think that they are very compatible to use maximum of both...
  • File size is not really an issue, it is very similar to file size of a readable JavaScript, unless you use inheritance a lot
  • Using TypeScript with backbone and other libraries has one benefit compared to JavaScript; most popular libraries already have type definition files for TypeScript, so you get autocompletion and type checking almost for free. File size difference is not really an issue compared to well written JavaScript.

TypeScript is still quite young and many things we wanted to have (JSLint, code coverage, TDD, BDD tools, ...) were missing at the time. In addition, there were several bugs in the compiler (that have been fixed afterwards), so we did not chose to use it, but no point from your list showed as a real turn-down for us...

Update: To see the potential of TypeScript you can look at Visual Studio Online "Monaco". What they did there is pretty impressive see Getting started with TypeScript for quick intro

jJ'
  • 3,038
  • 32
  • 25
  • re: inheritance - these performance problems are due to the use of reflection: var __extends = this.__extends || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } __.prototype = b.prototype; d.prototype = new __(); }; – Jordan May 03 '15 at 14:44
  • ...but as you say the rest is pretty much 1:1 and is IMHO clever use of the prototype patter and module pattern w/ loose augmentation - inheritance uses tight augmentation to support overriding ( for reference: http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html ) – Jordan May 03 '15 at 14:47
  • I would not say "performance problems", because the reflection is used only when defining a "class" not making an instance and you do not define that many classes (like do it in a loop or so), so speed is not really affected noticeably... – jJ' May 04 '15 at 15:44
  • fair enough - also Anders Hejlsberg has pointed out that you don't even have to use classes to take advantage of TypeScript - a large portion of the JavaScript community is anti-class :) – Jordan May 17 '15 at 15:52
  • Using type script does improve your performance in v8 (see hidden classes) – user93 Jan 02 '17 at 03:47
  • @user93 hidden (or implicit) classes has not much to do with typescript and were added to speed-up plain JS and people were benefiting from this optimization long before TS. (I always wrote JS to enable this optimization). TS just makes it more convenient to write consistent initialization that enables this too. – jJ' Jan 03 '17 at 05:50