Learning typescript

 Recently, I have changed up my team and moved to a team which is extensively using typescript language. So, naturally I have to learn it up. In this post I would be discussing about my learnings:

What is Typescript?

Typescript is built on the top of JavaScript. It is type superset of JavaScript which compiles back to simple JavaScript. It provides object-oriented features like java and c# and is also statically typed. For those who don't know what is statically typed it means that variables are declared with their types at the time of their declaration.

Hmmm.... That's interesting so I assume it's a programming layer which is built on the top of JavaScript and provides object-oriented features of statically typed languages and compiling back to JavaScript. Hence, bringing functionalities of both JS and object-oriented languages together.

Installation

Let's start with discussing installation of typescript. I am assuming that you might be having node js installed over your system. So, use this command to install typescript:

npm install -g typescript

tsConfig.json File

As the name suggests it's a config file used to store project related information. We can add project related information inside the folder like compiler options, root files.
Inside compiler options you can put a lot of fields according to your needs. Check them from here.

tsConfig files also provides option of inheritance so we can use an extends flag supported by it.

 Data types:

As we have installed typescript and learned about its compilation now let's get hands on. Let's start first with data types. If we start with primitive data types, there are 5 which are Boolean, number, string, Array, Enum. Enum is introduced in typescript it's not present inside JavaScript.

Let's define a value :

let name = "hello"

let name: string = "hello"

 So, ideally both variables hold the same value but in the first case typescript would be able to infer string data type using its type inference. But for the sake of more readability, I generally prefer to use the 2nd way. But yeah my point was typescript provides type inference.

We have talked about let in our last example, but we can also use a varible type named const which makes values inside the variable as immutable.

const name: string = "hello" 

There are other datatypes also which typescript can offer void, null, undefined, never, any. So, Let's explore a bit more about these types I have seen these types quite a lot of times but found it bit difficult to understand it.

void: This is used for functions which are not returning any value.

null: Null is used to define intentional absence of an object from variable.

undefined: It defines uninitialized variables.

never: It represents some value which is never going to occur e.g., some function which always throws error or having infinite loop.

any: Variables with any type can be represented which mean a variable having any (string, Boolean....) type can be assigned to this variable.

union: There is an bonus type too which is union type. It allows multiple types to be grouped together. Let's look at an example:

let name: string | number

 Below example allows the type of name to be as either string or an number. If we try to assign something else to it would throw an error.

Functions:

Defining up functions constitutes as major part of any programming language. So, here is the way to implement in typescript.

function testFunction(p:string, q:number): void{

           ... 

}

testFunction is the name of the function with return type as void and p,q as input parameters of type string and number respectively.

There is another way also to define function

let functionName = (p:string,q:number)=>{} 

functionName ("hello",2)

      

Interface:

Interfaces are generally used for defining general structure of an object without defining up actual details of it. It can contain fields and method names/signature without going into actual implementation details of it. Any object containing all the fields of that interface is implementing the interface.

interface Employee{

    name: string,

    id: number

} 

 

Export and Import statements typescript:

These statements are used to export and import classes, interfaces, function, variables from modules. From module just use export statement to export module.

export class Name {}

          export interface Employee {} 

or there is another way to do it, use:

export {Name, Employee};

For import just follow this syntax:

        import {Name, Employee as Person } from './person'

There is also a concept of relative vs non-relative referencing it is recommended to use relative referencing when module is created by and absolute referencing when module is imported/downloaded. If inside the import path we supply absolute path then typescript would look into node_modules package.