This post Introduction to TypeScript and How Does it Work?
first appeared on positronX.io - Learn Full Stack Development
1 What is TypeScript?
First and foremost, TypeScript is a programming language. We use this programming language for large-scale JavaScript application development. We can refer to it as a typed superset of JavaScript. Or in other words, we have been dealing with the TypeScript for a long time!
The best thing about TypeScript is that you will gain access to features from recent versions of ECMAScript as well. And you may use features beyond the scope of that as well. When you compile TypeScript, you will be able to produce a version of JavaScript which is safe across all platforms.
TypeScript 3.1, the latest version is up for grabs. You will come across many exciting features in this version including optional static typing, modules, interfaces, classes etc. Thanks to TypeScript, you will be using a futuristic version of JavaScript.
How to Setup TypeScript using NPM and Visual Studio Code?
How does TypeScript Work?
TypeScript is in need of a compiler that can convert TypeScript syntax into standard JavaScript. And this compiler is called transpiler. Transpiler is designed to convert one programming language into another one.
You will notice that TypeScript files come with .ts extension. Once transpiler compiles the .ts files, you will get .js files as output.
Another good thing about TypeScript is that it allows you to access common JavaScript frameworks and libraries. This is made possible by providing seamless integration of declaration files.
Introducing TypeScript Compilers
We have already established that the TypeScript transpiler is referred to as transpiler. When it comes to the most basic functionality of transpiler, it type-checks the source code before turning it into legit JavaScript code. With the help of static code analysis, the compiler avoids runtime errors. You can make all sorts of mistakes in your code, be it sending passing wrong type of arguments to typos.
The compiler will throw compile errors to notify of the same. You can correct all those errors before you actually execute the code. It is an extremely important service. If you have ever worked with codes you would know that edge cases and logic errors can result in the crash of our application during runtime.
Thanks to TypeScript, we will be using the type definitions in a consistent manner throughout the code.
The compiler constitutes of various parts which assist in the fast processing of the source code. And these parts help make the code predictable.
Parser
A parser is an extremely crucial and complex component. Parser builds a data structure from the TypeScript source files and input data. And the data structure is referred to as an Abstract Syntax Tree here. The parser comes up with a structural form of the source code. It is helpful in analyzing whether we are following the grammar of the language or not. The parser checks the source code to see if it is following the correct syntax or not.
Binder
Let’s examine the working of the binder with an example. Let’s assume that we have a module and a function with the same name. With the help of a Symbol, the binder links these named declarations. It helps the type system to instill some meaning into it.
Type Checker or Type Resolver
This component generates type diagnostics, checks semantic operations and assigns types for each construct.
Emitter
Emitter generates output from d.ts and .ts files. As far as the file type of the output goes, it can be either .js.map (source map file), d.ts (TypeScript definition file) or .js (JavaScript file).
Pre-processor
Pre-processor manages and resolves references amongst files. It accomplishes its goals with the help of ///<reference path=…/> or import.
TypeScript to javascript using TypeScript Playground
If you wish to learn more about how TypeScript compilation works, you don’t have to set it up right away. If you wish to experiment with TypeScript code then there are ways to do the same. The TypeScript team has come up with an online tool that allows you to compile TypeScript code online. And you compare the JavaScript output with your source code side-by-side. TypeScript Playground is the name of the tool. All that you have to do to access these tools is to visit TypeScript Playground.
You will be able to share the code segments you create on TypeScript Playground with others. Playground for barista.ts can be accessed here.
Another great thing about the Playground is that you will be able to access built-in examples. You can study code snippets of different categories and complexities. It’s like using generics. When you play with these code snippets, you will be able to flesh out the link between JavaScript and TypeScript in a better manner.
Conclusion
When you work with TypeScript, you will see a marked improvement in productivity. Developer experience will also get better. You can easily integrate TypeScript with an existing JavaScript with little or no overhead. There is nothing complicated about this integration. One thing you need to keep in mind is that TypeScript is not exclusive to Angular. In fact, powerful frameworks like Vue and React are beginning to warm up to the magic of TypeScript.
Developers have realized the power TypeScript holds in help create scalable, sustainable and reliable applications. Both TypeScript and JavaScript are evolving as speak, but these two are not at war with each other. They created TypeScript only to enhance and complement JavaScript. TypeScript is never meant to replace JavaScript. When we peek into the future, we can see both having similar features where TypeScript continues to serve as the statically typed alternative.
Top comments (1)
Great article! Especially the detailed description of the compiler, it’s a great way of showing right away how useful TypeScript is. I think this language deserves even more recognition than it’s already received, and that’s why recently I wrote an article on this topic as well. However, I decided to include a bit more detailed list of benefits in order to really showcase it! I hope you’ll find some time to give it a read: stxnext.com/blog/2019/08/30/typesc...