What is TypeScript?
We also might say that TypeScript is ES6 with some extra options.
What does TypeScript do?
Watch keeps observing your TS files and automatically compiles when there is any change; setting the noImplicitAny flag to false means that the compiler will not supply an error if you do not explicitly type variables rather it just assumes they have type ‘any’; removeComments will help you to map the differences between TS code and JS. Though, comments might be removed after processing JS files in minification.
In my opinion the key points worth highlighting about TS are (note: items with 1.8 is only available from it):
- Learning TS does not require learning a new language, actually, it is being aligned to the new EcmaScript 2015 language specification;
- Interface: developers can define their types as interfaces and add them to parameters and returns for methods and functions thereby increasing the readability of the code;
- interfaces can be implemented by classes;
- classes can extend other classes;
- Arrow function: it is way helpful as resolving context for “this” in event handlers;
Being able to decompose an object/array into variables is very helpful to get develop clean code: think more, code less.
- Destructuring object;
- Destructuring array;
- Declaring private properties (Although technically they are not a private property);
Although you can declare a property as private, it does not work as a private property at runtime. As I already said, TS is just a superset of JS which runs and validates the code at compilation time. So, be careful! It is really important to know what the compiler does with your code.
- Control flow analysis errors (1.8);
The TS compilation process is able to be customized enabling even more strict validation as you can see below.
Unreachable code (off by default, enable through –allowUnreachableCode);
Unused labels (off by default, enable through –noImplicitReturns);
Implicit returns (off by default, enable through –noFallthroughCasesInSwitch);
Simplified props type management in React;
You might use destructuring and defaults to define props easily. See the following code:
- Augmenting global/module scope from modules;
We can create not only classes, but also compositions.For example, let’s say that you’re using a type but need to add some extra methods…
- String literal types validation (1.8)
String literal validation is more like enums. It is easy to understand that you can define possible values for a property as shown in the code below.
- Let/const in loops are correctly captured (1.8)
Previously, variables declared within loop statements using let or const operator weren’t allowed be accessed inside closures.
- Modules are now emitted with the “use strict”; prologue (1.8)
All modules are parsed in strict mode. Previously, they were compiled with strict mode just for ES6 target. This implies that the code used to silently fail at runtime, such as assigning to NaN. In TS code this will now loudly fail.
- Custom JSX factories using –reactNamespace
During the compilation you can specify the factory using the parameter “—reactNamespace
There are many other features beyond the ones that I have discussed in this post. This subset has function and code style guide at a high level. As you can see TS has many features that ensure consistency and quality of code.
Should I be careful with TypeScript?
There are some aspects of TS which you need to consider:
- Be careful with the extra features, otherwise you will end up depending on the TS;
- There is no annotation/decorator for ES 2015: it requires a polyfill to keep consistent;
- Private properties are assigned to object context “this”, it means that is not private at all. Everybody knows that once you have functions or values assigned to the object context “this”, it becomes public. But the superset validation is performed at compile time, then, if you try to access a “private” property, it will be considered a violation and it won’t compile your TS code;
Think about providing a promise for a map based on an array of elements and that you could also receive a promise as input.
Well, knowing that we do not have polymorphism and getMap has to provide the same result for both cases, you can see that loose typing is very powerful if used when required.
Should I use TypeScript?
Anders Hejlsberg: Introducing TypeScript
Why TypeScript is Hot Now, and Looking Forward
The rise of TypeScript?
Why TypeScript isn’t the answer