Quick Guide to Typescript - Part 1
Tags: typescript, javascript, beginners, programming
Published: 2021-11-21 19:21:06

Let's get started with some quick guide to Typescript.

In this article we'll cover the following concepts:

- Introduction
- Type Inference
- Explicit Types
- Union Types
- Dynamic Types
- Functions
- Type Aliases


## 📌 Introduction

- `Typescript is superset of Javascript` which means it is an extension of Javascript, adding new features and syntax on top of the core language.
- Typescript is a strongly typed, object-oriented & compiled language.
- Typescript is designed to be compiled into fully compatible Javascript, so it works in any browser, any host, and any OS. 
- We need typescript compiler to compile it to Javascript code because browsers do not understand typescript.
- Typescript strongly encouraged `static-typing` which means it will validate all the assertions before the code executes. It allows you to do a type check during development which leads to the cleaner code and less errors in the browsers.

If you are familiar with Javascript, then you know that javascript is a dynamic language:


```javascript
// In Javascript

const logger = (msg) => console.log(msg);

let marks = 20;

logger(marks);   // output: 20

marks = 'twenty';

logger(marks);  // output: twenty

```
In the above code as you notice first we assign a value of type `number` to variable **marks** and then reassign it value of type `string` to the same variable.

This is possible in javascript because it is `weekly-typed language` which means the type of variable is figured by JS at **runtime** & can be change from one type to another.

But this is not the case with typescript.

Let's get familiar with some unique feature which typescript provides :-


## 📌 Type Inference

> Typescript uses **inference** or it infers the type based on the value we assign to it.

```typescript
let age = 20;

age = 'twenty';  // ERROR
age = 40;  //CORRECT

```

In the above code snippet, when we try to assign a value of type "string" to variable **age**, it will cause error. But why???

> In Typescript, we can change the value of variables but not the type.

When we first assign a value to variable **age**, we don't have to specially mention the type of the variable, typescript *infer* its type as **number**, which cannot be change later.


### 🧩 Functions

- We can also declare what type of a value we are expecting to be passed into the function as an arguments.

```typescript
const area = (diameter: number) => {
    return diameter * Math.PI
}

area(2); //Correct
area('two'); // ERROR

```


### 🧩 Arrays

```typescript
let marks = [100, 200, 300, 400, 500];

// marks.push('abc'); //ERROR
```
In the above code snippet, typescript infers the *type* of array **marks** as "number", hence we cannot insert a value of type "string" into it.

There is another case:
```typescript
let mixed = ['xyz', 0, 3];

mixed[1] = 'abc';  //Correct
mixed[0] = 5;  //Correct
mixed[3] = true; //ERROR
```

In above code, typescript infers the type of array "mixed" as **number** or **string**, so we can insert the values of these types only, so in above case value of type **boolean** is not acceptable.


### 🧩 Objects

- Once we define the object we cannot assign additional properties to it later on.

```typescript
let student = {
    name : 'xyz',
    marks: 30
}

student.marks = 100;
student.marks = '30' //ERROR

//Cannot assign new property to an object
student.age = 10 //ERROR
```
- Once we declare an object then it has to have a same structure, the same type with the same set of properties which cannot be changed later on except the values.


## 📌 Explicit Types

- Typescript uses inference to know the type of the variable but we can also explicitly define the types using the following syntax:

```typescript
// Explicitly defining the types of variables
let character: string;
let totalMarks: number;
let isloggedIn: boolean;

totalMarks = '200'   //ERROR
```


### 🧩 Arrays
```typescript
// this array will contain elements of type string
let studentList: string[ ] 

// this array contains element of type number & also initialising it with empty array
let studentMarksList: number[ ] = [ ] 

```


### 🧩 Objects
```typescript
//Method 1
let bucketList : Object; 

bucketList = {
    name: 'apple',
    price: 30
}

//Method 2
let bucketList2: {
    name: string,
    price: number
}
```


## 📌 Union Types

In typescript, **union type** allows us to define a variable with multiple type. 

In case you want to explicitly define an array which can contain elements of type string or number, then the syntax for the same would be:

```typescript
let mixedList: (string | number)[] = [];

mixedList.push('abc');
mixedList.push(30);
// mixedList.push(true); //ERROR 
```
Following the same rule for other variables as well

```typescript
let uid : string|number;
uid = 'acc';
uid = 10;
// uid = false; //ERROR
```


## 📌 Dynamic Types

There are times when we are not sure of the exact type of specific variable. In this scenario typescript provides special type: **any**. This allows you to assign "any" value to that variable.

```typescript
let list : any;

list = 10;
list = 'abc';

let countList : any[] = [];
countList.push(10);
countList.push('xyz');

```


## 📌 Functions in Typescript

- In Typescript we can either use an arrow functions or a regular functions.

```typescript
let greet: Function
greet = () => {
    console.log("hello world");
}

const add = (a:number, b: number) =>{
    console.log("sum = ", a + b);
}

add(2,3);
```

- you can define **optional parameter** inside a function using the syntax:

```typescript
const subtract = (x: number, y: number, z?: string|number) =>{
    console.log("difference-> ", x-y);
    console.log("optional parameter-> ", z );
}

subtract(10, 5);
subtract(20, 10, 30);
subtract(100,50, 'abc');

```
Always put your required parameters at first and then put the optional parameters at the end.


- define **default value** of a parameter inside a function :

```typescript
const multiply = (x: number = 10) =>{
    console.log("default value parameter-> ", x );
}

multiply(); // 10
multiply(20); //20
```

- When a function returns something, typescript will infer the return type automatically.

```typescript
const divide = (x: number, y:number)=>{
    return x/y;
}

//Typescript automatically infer the type of result as number
const result = divide(20,10); 

```
- You can also explicitly define the **return type** of function by using the syntax:

```typescript
const msg = ():string =>{
    return 'hello world';
}

const greeting = msg();
```
- function in Typescript will return a **void** value when function doesn't return something. **void** is completely different from **undefined** in javascript.


```typescript
// Function Signature
let calculateFn: (x: number) => void 

calculateFn = (num: number) => {
    console.log("num-> ", num)
}

calculateFn(10);

```


## 📌 Type Aliases
We can initially defined the type which can be reusable later on with the keyword **type**.
```typescript
type stringOrNumber = string | number;
const myPredefinedType: stringOrNumber = 10;

type personRecord = {
    name: string,
    marks: stringOrNumber
}

let obj : personRecord;
obj = {
    name: 'anu',
    marks: '100'
}
```
In the above code snippet, we have define two types **stringOrNumber** & **personRecord**, which are reused later on.


## 📌 Wrap Up!!

That's all for this article. We'll explore more new features of typescript in the next post.
Thank you for your time!! Let's connect to learn and grow together.

[LinkedIn](https://www.linkedin.com/in/anuradha-aggarwal-4a2751107/) [Twitter](https://twitter.com/Anuradh06359394) [Instagram](https://www.instagram.com/blogcode404/)

[![Buy-me-a-coffee](https://cdn.buymeacoffee.com/buttons/v2/default-blue.png)](https://www.buymeacoffee.com/anuradha2612)