- How do I install?
- npm i -D typescript
- Does it work on Linux/Mac?
- Does my editor support it?
- VSCode, Atom, Vim, Sublime… See more here
- Do I have to learn a whole new language? Like CoffeeScript, Dart…?
- 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.
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.
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:
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`
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
- Visual Studio Code
- Sample code: TypeScript + React + Redux bootstrap
- See more on Github trending for TypeScript
Some other posts about TypeScript
- Why does TypeScript have to be the answer to anything? – Scott Hanselman
- Why You Shouldn’t Be Scared of TypeScript – Peleke Sengstacke
- Site https://www.typescriptlang.org/
- Git https://github.com/Microsoft/TypeScript
- NPM https://www.npmjs.com/package/typescript
- Twitter https://twitter.com/typescriptlang
- Wanna play a game?
If you want to learn it just go to TypeScript handbook and have a look at it. It is quite fast and quite simple.