Learn Typescript with me - Part 2

In our previous article we learnt the basics of typescript, if you haven't read it please do before reading this.

1- Learn typescript with me - 1

ENUM

Enums provide a way to define a set of named constants. By default Enum values start with 0, but we can override them.

enum Color { Red = "RED", Green = "GREEN", Blue = "BLUE", };

const getColorMessage = (color: Color): string => { 
      return You selected ${color};
 }; 

console.log(getColorMessage(Color.Red));

Arrays

Arrays in typescript allow you to define collections of elements of the same types, you can think of them like list of some sort even in python it is called a list type.

const numbers: number[] = [1, 2, 3, 4];

numbers.push(5);

console.log(numbers);

now if I try to add a string in numbers array typescript will complain

number.push("five") // type string is not assignable to type number

Tuple

Tuples are a special array type in typescript that allow you to define an array with fixed sizes and types. Tuples are used where we exactly know the shape of our data, then by using tuples we will have performance gains in reading the data.

const user: [number, string] = [1, "Alice"];

console.log(user);

Object

Objects in typescript allow you to define the structure of an object with types. We can type object like this, more on objects in type alias topic

const user: { id: number; name: string } = { id: 1, name: "Alice" }; 

console.log(user.name);

Type Alias

Type aliases allow you to define custom types in typescript for better code reuse and readability. Now we can type our object as Type Alias UserType

Note: Don't use words like type in your real projects.

type UserType = { id: number; name: string; };

const user: UserType = { id: 1, name: "Alice" };

console.log(user.id);

Optional Properties

Optional properties allow you to define object properties that may or may not exist. In our previous example if we thought that the user will only have id and name may or may not exist. We can add ? before : to denote that this is an optional properties

type UserType = { id: number; name?: string; };

const user: User = { id: 1 };

console.log(user.name ?? "Name not provided");

Narrowing / Type Guard

Type guard allows you to narrow the type of a value within a specific block of code. So as we know our user have name as an optional property, if we now try to print the name of user it will show undefined which we don't want to show to our customers so we make sure the user name is a string before showing it

if (typeof user.name == 'undefined') {
   console.log("Welcome", user.name)
}  else {
   console.log("Welcome Guest")
}

Okay folks in our next article we will start covering functions and type assertions.

Danish Ali