Introduction to TypeScript and How Does it Work?

Rawat Digamber /  Read Time: 4 minutes

TypeScript

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.

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 offers many exciting features including optional static typing, modules, interfaces, classes etc. Thanks to TypeScript, you will be using a futuristic version of JavaScript. TypeScript 3.1, the latest version is up for grabs.

2. 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.

3. 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 a 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.

4. 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.

Play Anytime with TypeScript

TypeScript Playground is the name of the tool. All that you have to do to click below to access the tool online.

Click Here 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.

Hope you have enjoyed the TypeScript introduction! We have tried to give you an overview of all the goodies that come with the TypeScript.

Written by Digamber

I am passionate about solving real-world problems through algorithms and functional design. I create digital products that make the user’s life easy using the latest programming languages and frameworks. e.g Angular 2+, Firebase Real-time Database, JavaScript, TypeScript, RxJS, Bootstrap, HTML5, CSS3, WordPress etc...