Typescript overview

As a frontend developer who mostly worked with frameworks in Javascript, I got to use Typescript to provide a type system. In the beginning, I always felt like I was using typescript without knowing deeply. After gaining solid knowledge about it and developing a couple of things using only Typescript helps me a lot in feeling comfortable using it.

If you are new to typescript or if you want to be able to do things with typescript itself to gain more expertise, I guess you will benefit from this article a lot. Here is the roadmap for how I will continue in this series:

• Introduction in typescript
• Typescript types
• Type Annotations
• Type Inference
• Classes
• Interfaces
• Type Guards
• Type Casting
• Type Assertions
• TypeScript Generics

As you can see, it is a lot to cover so I will divide them into different articles. In this article, I want to cover the first subject which is typescript.

Introduction in typescript:

As you can see typescript is a superset of Javascript. You have to keep in mind that we are still writing javascript when we write typescript code. What typescript distinguishes from Javascript is that it adds additional syntax to our code to handle something called a type system. This is what typescript is all about. Here are the goals of the type system:

• It can catch the mistakes in your editor
• It only works in the development
• Type annotations help the compiler in checking types and help avoid errors dealing with data types

In other words, the type system is being used as an improvement to the development workflow. When you are writing code in the editor, the type system constantly analysis it and if it finds any possible bugs, it will inform you in that instant.

Ok, typescript can let us know the possible issues but how could it do that?

Here is how we are as a developer involved in this process. We should add type annotations so typescript will make use of those type annotations to analyze our code base therefore it would detect possible bugs. We are going to tackle Type annotations in-depth but I’d like to give you an example to help you understand what are these and how they look.

// Example: Type Annotation of Parameters
function display(id:number, name:string)
{
    console.log("Id = " + id + ", Name = " + name);
}

// Example: Type Annotation in Object
const employee : { 
    id: number; 
    name: string; 
}; 

employee = { 
  id: 100, 
  name : "John"
}

Since we have a basic understanding of what is typescript and type system, it is time to find out what is the workflow of typescript and javascript.

Once we write out typescript code, we are gonna feed that code into the typescript compiler which is a command line tool that is gonna read our code and convert it into plain javascript to run in the browser on in nodejs.

Hopefully, you find this article beneficial. I will continue with the other items on the list in the next article.