TypeScript vs JavaScript

TypeScript is JavaScript with types, to put it simple.

  • How do I install?
    • npm i -D typescript
  • Does it work on Linux/Mac?
    • Yes
  • Does my editor support it?
  • Do I have to learn a whole new language? Like CoffeeScript, Dart…?
    • No! Absolutely no! If you know JavaScript you know 95%. The remaining 5% or less is basically configuration.
  • Any big companies using it?
  • Does it support React?
    • Yes. `.tsx` files.
  • Have you ever coded a real project with it?
    • Yes and I actually kept it compatible with the architecture of other (js) projects in my company. One of the projects is scaling.
  • How many bugs did you prevent?
    • Over 9000… A lot and very recently I found a bug in production in a very big project that would never happen if it was coded in TypeScript.
  • Do you still use babel?
    • Not if I get to choose which version of node I will be using. For some old versions some polyfills are really good… TypeScript does not add polyfills, it does not change your code more than enough to support a few ES features. You can check it out for yourself on TypeScript playground, the playground targets ES3, so if you use arrow functions or async/await TypeScript will “alter” your code.

Basic usage

You can annotate your code with types to catch errors during “compile” time (development time if you use a IDE/extension with support to TS) rather than catching errors in production.

ts-js

But it is perfectly fine to not use the types, you will just end up with JavaScript.

ts-js

Real world bug found

This `add` example looks silly, but it is just a simple one. The following was a bug I found in real code in production (a bit simplified):

Doesn’t look like there are any errors right? Lets add TypeScript to find issues:

Oops! Looks like we found a bug! `fields` is an array of strings and there is a call to `renderGroup` that takes a object with a property `group`, but instead the code is being called with a string.

Cool huh? That would never make it to production if it was coded in TypeScript.

Lets see what else is there…

Latest syntax with no worries

TypeScript has a setting that allows you to target a specific ECMAScript version. If you set to `es5` then the arrow functions will be converted to functions. You can use the latest syntax features without having to worry about a thing.

Example spread operator on objects:

ts-js

Intellisense!

ts-js

From existing libraries as well (how many times did you forget some of the jQuery.ajax parameters huh? (I don’t blame you there are so many); If you never forgot a single one then… well… can you remember all other methods from all other libraries all the time? I hope you can, but it is not as easy as this, is it?)

To install a type, like the example above, just do (TypeScript 2.0+): `npm i -D @types/jquery`

Refactor!

You get to refactor your code. Rename only the variable you want across files without changing comments or local vars or other object properties with the same name.

Real World applications/code made with TypeScript

Some other posts about TypeScript

Links

If you want to learn it just go to TypeScript handbook and have a look at it. It is quite fast and quite simple.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s