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?
  • VSCode, Atom, Vim, Sublime… See more here
  • 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?
  • Microsoft, Google… and over 120 that you can check here.
  • 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
ts-js

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

ts-js
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
ts-js

Intellisense!

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

Bruno Leonardo Michels

Written by

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade