- SASS is to CSS
- (if you’re old enough) C++ is to C
In all cases, the former includes the latter and comes with more programming constructs.
TypeScript !== OOP
One common misconception is that writing TypeScript means you will learn Object-Oriented Programming (OOP). Unfortunately (or fortunately?) that is not the case.
In fact, I use TypeScript for more than two years and I seldom need to do OOP unless it is required by the framework/library.
A typical (non-TypeScript) React project compilation pipeline look like this:
The parse step is to generate a data structure of your code, which is known as AST. With the generated AST, Babel will use it to “emit” (output) the final code. Usually, the compilation will succeed if your code doesn’t have syntax error, causing error in the parsing process.
TypeScript as a language, comes with its compiler. Conceptually, TypeScript compiler works almost similar to Babel, with an extra step of typechecking:
In addition of generate the data structure, TypeScript compiler will do type-checking (make sure there is no invalid operation), before finally emit the final code.
Combination of Babel and TypeScript
Previously, having such complex setup requires some good “webpack”-fu. However, Babel now has a plugin that makes it possible to parse TypeScript code.
Using this approach, we will able to convert our code to TypeScript with minimal change of our build pipeline. TypeScript compiler will be used to run the compilation separately without the emit step.
This setup can be summarized as below: