Introduction to Typescript. What is TypeScript

This chapter gives you a brief introduction of what is typescript and what is not. We also learn some of the advantages of using typescript over javascript. Finally, we look at the major components that make up the typescript’s architecture.

TypeScript is a primary language used in Angular application development. Check out our Complete Tutorial on Angular

What is TypeScript

Typescript is nothing but a superset of JavaScript. It is built on top of javascript and introduces syntax enhancements. It brings support for types and class-based object-oriented programming paradigm to the world of Javascript. When compiled (or transpiled) it produces Javascript.

What-is-Typescript.-It-is-a-Superset-of-Javascript

Any valid Javascript code is also a valid Typescript code. It uses the same syntax and semantics as the javascript

Typescript open source and free to use. It is designed, developed and maintained by Microsoft.

What TypeScript is not

Typescript is not a new programming language. It just a syntactic sugar added over Javascript. You can write pure javascript code and typescript still compiles it just as it is to Javascript.

TypeScript-Compiles-to-Javascript

If you know Javascript, the learning curve is very lean. If you are new to javascript, but coming from the c# or, Java background, you will see a lot of similarities in concept.

Benefits of TypeScript

Since in the end Typescript produces Javascript, you may wonder why not use javascript directly. The Benefit of TypeScript comes with its type system, which provides several benefits over javascript.

Optional Type System

TypeScript provides the static type system which provides great help in catching programming errors at compile time.

Javascript is a dynamically typed system. The variables can hold any values. The type of variable is determined on the fly. The javascript implicitly converts types for example string to a number. This is ok for a small app, but large apps this can be a lot of headaches. It is difficult to test to see if the proper types are passed and errors always happen at runtime.

Intellisense & syntax checking

The static Type system helps in provide better tooling support in IDE. The intellisense, syntax checking & code completion are few of the major benefits you get with the tooling support. This speeds up the development time and also ensures that the programmers make fewer mistakes with typos. All the major editors like VSCode, atom, sublime text includes the tooling support for Typescript

Maintainable code

Typescript brings Types, Classes, interfaces & modules. it makes the code more maintainable and scalable. It much easier to organize the Typescript code, than a Javascript code

Language Enhancement

Typescript comes with several language features. It supports Encapsulation through classes and modules. Supports constructors, properties & functions. It has support for Interfaces. You can make use of Arrow functions or lambdas or anonymous functions.

You are still using Javascript

The Typescript is still Javascript. It retains most of the javascript syntax. This means that all valid JavaScript code is valid TypeScript code. Hence the learning curve is lean. If you are not aware of OOP concepts like classes, interfaces, etc, you may need to learn them to get the best out of Typescript

Typescript Components

The architecture of TypeScript is neatly organized in different layers as shown in the image below. The three major layers are

Typescript-Component-and-architecture
  • Core TypeScript Compiler.
  • Typescript Standalone Compiler
  • Typescript Language Services

Core TypeScript Compiler

The TypeScript compiler manages the task of type-checking our code and converting it into valid JavaScript code. The compiler is made up of several different layers like core, program, scanner, parser, checker & emitter, etc

Standalone compiler (tsc)

The batch compilation CLI. Mainly handle reading and writing files for different supported engines (e.g. Node.js)

Language Service

The Language Service supports the editors and other tools to provide better assistance in implementing features such as IntelliSense, code completion, formatting and outlining, colorization, code re-factoring like rename, Debugging interface helpers like validating breakpoints, etc.

Summary

In this tutorial, we learned what typescript is and the benefits of using it over javascript.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top