TypeScript Best Practices

I've always hated JavaScript. I use it, sure, but only when necessary. I distinctly remember my first internship interview, back when I was a freshman at eXia.Cesi, a French computer engineering school. I only knew C and some Java, and I was asked to help on an intranet that mostly worked with homemade Ajax libraries. It was pure madness and kind of steered me away from the web aspect of computer engineering for a while. I find nothing likeable in the following:

var r = new XMLHttpRequest();  
r.open("POST", "webservice", true); 
r.onreadystatechange = function () { 
   if (r.readyState != 4 || r.status != 200) return;  
   console.log(r.responseText); 
}; 
r.send("a=1&b=2&c=3"); 
 

A native Ajax call. How ugly is that?

Of course, with jQuery modules and some separation of concerns, it can be usable, but still not as comfortable as I would like. You can see in the following screenshot that the concerns are separated, but it's not so easy:

Then, I learned some RoR (a Ruby-based, object-oriented framework for web applications: http://rubyonrails.org/) and Hack (a typed PHP by Facebook: http://hacklang.org/). It was wonderful; I had everything I always wanted: type safety, tooling, and performance. The first one, type safety, is pretty self-explanatory:

<?hh 
class MyClass { 
  public function alpha(): int { 
    return 1; 
  } 
 
  public function beta(): string { 
    return 'hi test'; 
  } 
} 
 
function f(MyClass $my_inst): string { 
  // Fix me! 
  return $my_inst->alpha(); 
} 

Also, with types, you can have great toolings, such as powerful auto completion and suggestions:

Angular can be used with CoffeeScript, TypeScript, and JavaScript. In this book, we'll focus on TypeScript, which is the language recommended by Google. TypeScript is a typed superset of JavaScript; this means that, with TypeScript, you can do everything you used to do in JavaScript, and more! To name but a few advantages: user-defined types, inheritance, interfaces, and visibility. And the best part is that TypeScript is transpiled into JavaScript so that any modern browser can run it.

In fact, with the use of polyfill, even our good old IE6 can almost execute the final output. We'll get back to that in the next chapter. The transpilation is different from compilation (for example, from C to executable or .java to .class) as it only translates TypeScript into JavaScript.

In this chapter, we will learn the best practices for TypeScript. The syntax of the TypeScript language is quite easy to grasp for anyone who knows JavaScript and an object-oriented language. If you don't know anything about object-oriented programming, I'd suggest you put this book aside for a few moments and take a look at this quick Udacity course: https://www.udacity.com/wiki/classes.

As a summary of the topics covered:

• TypeScript syntax
• TypeScript best practices
• TypeScript shortcomings