In contrast, you can utilize a t2.micro EC2 instance with 8GB of storage for approximately $8-10 USD per month. This expense can be further reduced by opting for reserved billing.

However, if your budget allows, it's always advisable to choose RDS. It offers replication through a standby instance in a different availability zone, includes automated backups out of the box, and manages automatic failover.

But if you have budget constraints or are prepared to handle and manage your own Postgres instance, EC2 presents a viable option.

An integral aspect of effective disaster recovery and preparation procedures involves automatically generating backups for production databases.

This article will demonstrate how to launch an EC2 instance, establish a dedicated PostgreSQL database, and implement automated backups to an S3 bucket while adhering to proper security protocols.

Prerequisites

• An AWS Account (duh).

Launch an Ubuntu EC2 instance

First, navigate to the EC2 console and proceed to create an EC2 Instance using the following steps:

1. Initiate the process by clicking on the Launch instances button.

2. Assign a name to your instance and opt for the Ubuntu OS image. Make sure to choose a Free Tier eligible AMI, which might already be pre-selected.

3. Opt for the t2.micro instance type.

4. Generate a new key pair and save it locally. This key will be necessary for SSH access to your instance.

5. Under the Network settings section, click the Edit button to adjust your security group settings according to the following instructions:

   

   We need to enable SSH and PostgreSQL access for the EC2 instance, as we will be accessing the EC2 instance through a Postgres client such as pgAdmin or a server on port 5432.

NOTE: While I am currently setting the source as Anywhere (0.0.0.0/0), in a production environment, please ensure that you add your server's public IP address to the Source field. This step is essential to restrict access to the DB on port 5432 only to your server.

1. Keep the other settings as it is and click on Launch instance

Install PostgreSQL on the EC2 instance

Now, we will install Postgres on our Ubuntu EC2 instance.

To do so, let's SSH into the EC2 instance. For this, we need the .pem file that we downloaded before launching the instance. Move that file to your Desktop.

Open your terminal on the Desktop and execute the following commands:

chmod 400 <ssh_key_name>.pem
ssh -i "<ssh_key_name>.pem" ubuntu@ec1-11-111-111-11.ap-south-1.compute.amazonaws.com
# Add your EC2 public IPv4 DNS in the place of `ec1-11-111-111-11.ap-south-1.compute.amazonaws.com`

Once you are inside the Ubuntu instance run the following commands:

sudo apt update
# install postgres
sudo apt-get -y install postgresql

Once the installation is complete, the next step is to create a password for the default user postgres

sudo su postgres
# this will switch to superuser with `postgres` as username
postgres@ip-111-11-11-111:/home/ubuntu$ psql

# psql will open interactive terminal to work wil Postgresql
# create a password for default user
postgres=# ALTER USER postgres password 'mypassword';
# To quit psql and exit postgres user:
postgres=# \q
postgres@ip-111-11-11-111:/home/ubuntu$ exit

Please use a strong password instead of mypassword. Once the new password is set, you will receive a confirmation in response as A"ALTER ROLE" on the terminal.

At this point, you have successfully installed and configured an instance on an EC2 Server. Next, we need to configure a few more permissions to ensure that the PostgreSQL instance is accessible publicly from any IP address.

Please run the following command in your Ubuntu instance:

cd /etc/postgresql/<postgres_version_number>/main/
# for me the version number is 14 so it was cd /etc/postgresql/14/main/ for me
ls

You will find the following files in your main folder

Using the Vim editor, add the following line to the pg_hba.conf file.

Run sudo vim pg_hba.conf and add the following line to the pg_hba.conf.

host       all        all              0.0.0.0/0          md5

Once you've added the above line, proceed to open the postgresql.conf file from the main folder using Vim. Locate the line listen_addresses='localhost'.

Uncomment this line as demonstrated below and substitute localhost with *.

Now, cd into ~ and restart the Postgres by running the following command:

sudo service postgresql restart

This concludes our initial setup of the PostgreSQL server on the EC2 instance. You can now utilize the public IP address of the instance to establish a direct connection to the PostgreSQL server that we have just installed.

Next, let's proceed with the process of setting up automated backups on S3 using the pg_dump.

Install pg_dump on the EC2 instance

Run the following command inside your EC2 instance to install pg_dump

sudo apt install postgresql-client postgresql-client-common libpq-dev

Once done, check the version of the pg_dump which is installed

pg_dump --version
# pg_dump (PostgreSQL) 12.14 (Ubuntu 12.14-0ubuntu0.20.04.1)

Create a .pgpass file

The file .pgpass in a user's home directory or the file referenced by PGPASSFILE can contain passwords to be used if the connection requires a password without manually entering it.

The file should contain a line in the following format:

hostname:port:database:username:password

To do so, make sure you are in your home directory or run cd ~.

Then create a .pgpass file by running touch .pgpass. This will create a new file in the home directory.

Now, let's add the required information in the given format.

Run sudo vim .pgpass. This will open an empty Vim editor. Enter the following line.

<ec2_instance_public_ip>:5432:postgres:postgres:<password_you_set>

Once done, click ESC and type :wq to save the changes.

Next, set the appropriate permissions for the .pgpass file by executing the following command.

chmod 600 ~/.pgpass

Install AWS CLI

Now, in order to enable automated backups to the S3 bucket, we need to execute certain commands that require the installation of the aws cli on the machine.

To proceed, execute the following commands:

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

sudo apt install unzip

unzip awscliv2.zip

sudo ./aws/install

Setup an S3 bucket for backups

In the Amazon S3 console, we will first create the bucket that will host the backup files.

in this case, I will go with the bucket named postgres-backup-bucket. Note the ARN of the bucket that is created as we will need it soon enough.

NOTE: Make sure you do not enable public access to this bucket!

Create an IAM Policy to control access to the S3 bucket

• Open the IAM console in AWS, then under Policies click Create New.

• In the resulting screen, click on {} JSON and paste the following (replacing <arn of S3 bucket> with the ARN of the bucket created in the previous step):

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "VisualEditor0",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:GetObject",
        "s3:ListBucket",
        "s3:DeleteObject"
      ],
      "Resource": [
        "<arn of S3 bucket>", 
        "<arn of S3 bucket>/*"
    ]
    }
  ]
}

• Name the policy GrantAccessToBackupBucket.

This bucket does exactly what the name suggests, it allows whichever IAM principal this policy is attached to have read/write access to the S3 bucket setup to receive the backups.

Create an IAM Role that is attached to the GrantAccessToBackupBucket Policy

• Return to the IAM console, open up the Roles page and click Create Role.

• On the resulting screen, select EC2 as the Service, then click Next.

• On the permission screen search for the policy named GrantAccessToBackupBucket and attach it.

• Next, we give our new IAM role a name PostgresSQL-EC2-S3-CRUD-Role

What we’ve done in this step is create an IAM role that can be attached to an EC2 instance.

This IAM role will enable the EC2 instance to transparently read/write to the S3 buckets for our backups without requiring us to do any configuration inside of the machine itself.

Attach the IAM Role to the EC2 instance

• Open the EC2 console, identify the Ec2 instance hosting the database, click on it and then under Actions -> Security, select Modify IAM role.

• On the resulting page search for and select the IAM role named,
  PostgresSQL-EC2-S3-CRUD-Role.

• Click Save.

At this point, we’ve now set up our EC2 instance to have read/write access to the S3 bucket being used for backups.

Note: up until this point the instructions I’ve laid out are pretty generic and have nothing to do with database backups, you can follow these steps if you are building an app and want your backend code to be able to read/write to an S3 bucket.

Create a backup script on the EC2 machine

• SSH into your EC2 machine.

• Create a new file named backup-db.sh

• Grant execute permissions on the script by executing: chmod +x backup-db.sh

• Open up the file and paste the following:

    # Create the backup file
    TIME=$(date --utc "+%Y%m%d_%H%M%SZ")
  
    # Use the timestamp to construct a descriptive file name
    BACKUP_FILE="backup-pg-${TIME}.pgdump"
    DATABASE_NAME="postgres"
    HOST="<ec2_public_ip>"
    PORT=5432
    USERNAME="postgres"
    pg_dump $DATABASE_NAME -h $HOST -p $PORT -U $USERNAME -w --format=custom > $BACKUP_FILE
  
    # -h host
    # -p port
    # -U username
    # -w this avoids a password prompt and refers .pgpass file for password
  
    # Second, copy file to AWS S3
    S3_BUCKET=s3://<backup_bucket_bame>
    S3_TARGET=$S3_BUCKET/$BACKUP_FILE
    echo "Copying $BACKUP_FILE to $S3_TARGET"
    aws s3 cp $BACKUP_FILE $S3_TARGET
  
    # verify the backup was uploaded correctly
    echo "Backup completed for $DATABASE_NAME"
    BACKUP_RESULT=$(aws s3 ls $S3_BUCKET | tail -n 1)
    echo "Latest S3 backup: $BACKUP_RESULT"
  
    # clean up and delete the local backup file
    rm $BACKUP_FILE
  

At this point, manually execute the backup-db.sh file and watch the console log output.

Run ./backup-db.sh and check the console.

It should be pretty clear whether or not the backup and upload succeeded or not. If the process is successful, proceed to verify whether your S3 bucket contains a database snapshot generated by the pg_dump command.

Automate the execution of the backup with cronjob

• Open the crontab by typing crontab -e in your EC2 instance

• In the resulting editor window, we add the following line:

0 0  * ~/backup-db.sh &>> ~/backup-db.log

Note the above cron expression runs the backup script once per day at midnight.

NOTE: If you want to run this at different frequencies then use this handy cron expression generator which will help you in generating the right cron syntax to match your desired frequency.

Test your backup!

In the image above, you can observe my automated backup, which was generated at 5:30 in the morning. Therefore, congratulations are in order as you now possess a secure and dependable automated backup mechanism.

Conclusion

• In conclusion, this blog has explored the cost-effective approach of hosting a PostgreSQL database on an EC2 instance, shedding light on the practical steps to implement automated daily backups seamlessly. By harnessing the power of EC2's hosting capabilities and integrating automated backups, you've unlocked a robust solution that ensures the safety and availability of your valuable data.

• Looking ahead, I'm excited to share a forthcoming article that will delve into the intricate process of restoring data from an S3 backup file generated by the automated backup mechanism. Stay tuned for this informative guide, where we'll navigate through the steps to seamlessly retrieve and reinstate your data, ensuring business continuity and data integrity.

Make sure to subscribe to our newsletter at https://blog.wajeshubham.in/ and never miss any upcoming articles.

I hope this post will help you in your journey. Keep learning!

My Website, connect with me on LinkedIn and GitHub

The purpose of this article is to demonstrate how TypeScript generics can be applied to functions, types, classes, and interfaces to make them dynamic and reusable.

WHAT EXACTLY IS GENERIC?

In languages like TypeScript, C#, and Java, one of the main tools in the toolbox for creating reusable components is generics, that is, being able to create a component that can work over a variety of types rather than a single one. This allows users to consume these components and use their types.

Generics is a tool in TypeScript that allows users to create reusable structures by passing types as parameters to functions, types, classes, and interfaces. This structure can work with a variety of data types rather than just one. It ensures long-term scalability as well as flexibility for the program.

SETUP A PROJECT:

To run the following code snippets, you need to have typescript installed globally. If you don't have typescript installed, run npm install -g typescript in your terminal and check out my blog on Introduction to TypeScript to set up a typescript project required for this article.

INTRODUCTION TO GENERICS:

Whenever you create a generic structure, you must use <> to wrap the parameters that the generic structure accepts.

The following is the syntax for creating a generic structure:

SYNTAX:

function example<T>(arg: T): T {
  return arg;
}

For the moment, we have declared a generic function (we will delve into generic functions in upcoming topics in this article).

To the example function, we have added the type variable T. The T allows us to capture the type that the user provides as an argument (e.g. number) for later use. (T stands for Type, and is commonly used as the first type variable name when defining generics, but it can be replaced with any valid name.)

This function's return type and argument type are dependent on what we pass in while calling it.

Check out the following code to see how we can pass generic-type arguments:

const returnedValue = example<string>('hello');

string was passed as a TYPE argument to the generic example function.

Let's hover over the returnedValue variable and look at the return type:

The return type is a string, which we passed as a type argument.

ADDS STRICT TYPE CHECKING:

Generics have strict type-checking. Our code above passes a string as a type argument, so we must pass a string in the function argument as well.

In the case of any other type, we will encounter the following compilation error:

This is the beauty of generics in typescript because they are dynamic, yet strictly typed at the same time.

ACCEPTS ANY VALID TYPE:

As opposed to passing string as a type argument in the above example, we can also pass any valid type or interface as follows:

interface Person {
  name: string;
  age: number;
}

function example<T>(arg: T): T {
  return arg;
}

// return type will be Person
const returnedValue = example<Person>({
  name: "Max",
  age: 30,
});

As you can see, we have a Person interface which is a valid type in TypeScript.

It is passed as a type argument to the example function, meaning the function argument must be of type Person.

If we attempt to do anything outside the rules, we will get a compilation error:

BUILT-IN GENERICS:

In addition to creating our own generics, TypeScript has some built-in generics that can be used.

The following are some generics that TypeScript offers:

Array<T> TYPE:

My previous articles have discussed this Array type and referred to it as a generic type.

It is probably one of the most commonly used generics in TypeScript.

Here's how to declare a variable's type using the Array keyword:

const names: Array<string> = ["John", "Jane", "Mary"];

Here, we have a variable called names, and we have declared it as an Array<string> (array of strings). In other words, it's the equivalent of string[], which we have used in the past.

What happens if we don't pass string as a type argument to the Array type?

It says Generic type 'Array<T>' requires 1 type argument(s). This means we need to pass a type argument to the Array keyword.

What happens if we pass a different type of value in an array of type Array<string>?

Similar to our example function, this compiles with an error if we pass a different type value in a generic structure.

Promise<T> TYPE:

Promise is another built-in generic type. It expects only one type argument.

If you want to learn more about promises, check out my detailed article on Promises in JavaScript.

Let's take an example to better understand the Promise type. Look at the following code.

const _promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
  }, 2000);
});

_promise.then((data) => {
  console.log(data);
});

The above code creates a _promise variable, which is a Promise that returns a string when it is resolved.

Our promise is then triggered with a .then() block and the resolved value is captured in the data variable.

Let's hover over the _promise variable and see what type is inferred:

The type shown is Promise<unknown>, which is not beneficial since we know that it will resolve to a string.

Therefore, to make it happen, we can use Promise type and pass string as a type argument to it as follows:

const _promise: Promise<string> = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
  }, 2000);
});

_promise.then((data) => {
  // type of data is string
  console.log(data);
});

Now, if we add . in front of data in the .then() block, we will get autosuggestions of all string methods available:

We will see how we can use Promise and Axios to write scalable API functions in the next part of this article.

Readonly<T> TYPE:

Readonly is a generic, built-in type that allows us to throw errors whenever a method that alters or mutates the original structure is used.

It constructs a type with all properties of T set to readonly. See for yourself:

let x: Readonly<number[]> = [1, 2, 3];

x.push(4); // error
x.length = 0; // error
x[0] = 12; // error

x.map((v) => v); // without error
x.filter((v) => v > 1); // without error

let y: Readonly<{
  name: string;
  age: number;
}> = {
  name: "John",
  age: 30,
};

y.age = 20; // error!
y.name = "John"; // error!

When you want an array/object that never changes, this is useful.

Partial<T> TYPE:

It constructs a type with all properties of T set to optional.

Take a look at the following example:

interface Course {
  title: string;
  price: number;
  description: string;
  rating: number;
}

// same as { title?: string; price?: number; description?: string; rating?: number; }
let course: Partial<Course> = {};

Partial will make all the properties of the Course interface optional.

NonNullable<T> TYPE:

NonNullable<T> prevents you from passing null or undefined to your structure. This complements the strictNullChecks compiler flag in the tsconfig.json file, so make sure you activate it (ignore it if you have strict flag set to true):

Let's use NonNullable in our example function code.

function example<T>(arg: T): T {
  return arg;
}

let a = example<string | null>(null); // runs without error

Now the type argument is a string | null union type. The code above executes without error.

We'll see what happens with NonNullable:

function example<T>(arg: NonNullable<T>): T {
  return arg;
}

let a = example<string | null>(null); // throws error

Even though a null could be passed to our generic example function as a function argument, the NonNullable type internally discards it.

GENERIC FUNCTIONS:

We looked at how we can accept type as a parameter in the first topic of this article by using the example function.

Here are some more complex examples of generic functions.

FUNCTION TO MERGE TWO OBJECTS:

Suppose we want to create a merge function that takes two arguments, both are objects and returns the merged object.

function mergeObjects(obj1: object, obj2: object) {
  return { ...obj1, ...obj2 };
}

const mergedObj = mergeObjects({ name: "Max" }, { age: 30 });

We have the mergeObjects function here, which merges the obj1 and obj2 of type object and returns the merged object.

Then we call the function with some arguments and store the returned data in the mergedObj variable.

Let's hover over the mergedObj variable and see what the inferred type is.

We have {} (an object), which is not beneficial, because when we access the age property on the mergedObj variable, we will receive a compilation error as follows:

But as a developer, we know that if we merge { name: "Max" } and { age: 30 }, we should get { name: "Max", age: 30 } in return.

To accomplish this, let's convert this function into a generic function.

CONVERT IT TO A GENERIC FUNCTION:

function mergeObjects<T, U>(obj1: T, obj2: U) {
  return { ...obj1, ...obj2 };
}

const mergedObj = mergeObjects({ name: "Max" }, { age: 30 });

The mergeObjects method accepts two type parameters T and U. These type parameters are assigned to obj1 and obj2 respectively.

Now, if we call the mergeObjects function with the same function arguments. T and U will automatically become the type inferred from the passed arguments. (We don't have to specify the type for T and U, TypeScript automatically manages that for us)

Thus, T will be assigned as {name: string} and U will be assigned as {age: number}.

If we hover over the mergedObj variable we will see the following inferred type:

The mergedObj variable got inferred as an intersection type including {name: string} and {age: number}. (To learn more about intersection types, click here)

Now if we try to access the age property on the mergedObj variable, we will get autosuggestions from the IDE and will not get compilation errors, as follows:

IT IS DYNAMIC:

A generic function is useful because now you can pass literally any key in the object, and the function will automatically detect which keys are available in the merged objects.

Here's an example containing more keys in one of the arguments of the mergeObjects function.

function mergeObjects<T, U>(obj1: T, obj2: U) {
  return { ...obj1, ...obj2 };
}

const mergedObj = mergeObjects(
  { name: "Max", skills: ["typescript", "javascript"], salary:"5000" },
  { age: 30 }
);

Let's see what the autosuggestions have to offer:

Generic functions are great for this.

GENERIC CONSTRAINTS:

There is a problem with the above mergeObjects function. The compiler will not throw an error if we pass any type of value as an argument.

Look at the following image:

This is a problem because only and only objects should be allowed as arguments to the mergeObjects function to avoid unexpected results.

To do so, we can use generic constraints to add more type-checking.

extends KEYWORD:

So our logic is that we want to make mergeObjects generic, but we can only accept arguments of type object.

To accomplish that, we can do the following:

function mergeObjects<T extends object, U extends object>(obj1: T, obj2: U) {
  return { ...obj1, ...obj2 };
}

const mergedObj = mergeObjects({ name: "Max", age: 20 }, 30); // throws error

console.log(mergedObj);

By using the extends keyword, we tell TypeScript that the mergeObjects function can accept any type of argument, but it must be of type object.

Now if we try to pass number as an argument, we get a compilation error:

keyof KEYWORD:

Let's use an example to understand the use case for the keyof keyword:

function getValueFromObj<T extends object, U>(obj: T, key: U) {
  return obj[key];
}

getValueFromObj({ name: "John" }, "name");

In the above function, we are accepting two parameters obj and key. obj is of T type which extends the object type, and key is of U type. Next, we are returning the value from the obj object by using the key parameter.

There is a compilation error here since TypeScript has no idea whether that key is present in the obj or not.

For the above code to be valid, we can use the keyof keyword to only accept the key which exists inside an obj object.

function getValueFromObj<T extends object, U extends keyof T>(obj: T, key: U) {
  return obj[key];
}

getValueFromObj({ name: "John" }, "name");

We are adding code here to make U only accept keys that are contained within the obj object.

Passing a key that does not exist in a passed object will cause a compilation error as follows:

GENERIC CLASSES:

Generic classes have a generic type parameter list in angle brackets (<>) following the name of the class as follows:

class ClassName<T> {}

MyStorage CLASS EXAMPLE:

Let's create a class that stores an array of data and performs operations on that data.

Check out the following code:

class MyStorage {
  private storedData: any[] = [];

  public setItem(value: any) {
    this.storedData.push(value);
  }

  public removeItem(index: number) {
    this.storedData.splice(index, 1);
  }

  public getItems() {
    return this.storedData;
  }
}

In the previous blogs, we learned that we should never use any keyword unless there are no other options, and no type definitions are available for the piece of code you're working on.

The above MyStorage class can be converted to a generic class to make it more strongly typed and dynamic.

MAKE MyStorage CLASS GENERIC:

Check out the following code.

class MyStorage<T> {
  private storedData: T[] = [];

  public setItem(value: T) {
    this.storedData.push(value);
  }

  public removeItem(index: number) {
    this.storedData.splice(index, 1);
  }

  public getItems() {
    return this.storedData;
  }
}

We have a MyStorage class that is generic, accepting a type parameter T, and has storedData property that is of type T[] (an array of the type T).

Additionally, it has setItem, removeItem, and getItems methods.

Let's create an instance of it.

class MyStorage<T> {
  private storedData: T[] = [];

  public setItem(value: T) {
    this.storedData.push(value);
  }

  public removeItem(index: number) {
    this.storedData.splice(index, 1);
  }

  public getItems() {
    return this.storedData;
  }
}

const stringStorage = new MyStorage<string>();

For stringStorage, the T will be a string. Therefore, the storedData property of the MyStorage class will be of type string[].

Let's add some items to our storage now.

const stringStorage = new MyStorage<string>();

stringStorage.setItem("Hello");
stringStorage.setItem("World");
stringStorage.removeItem(1);
console.log(stringStorage.getItems()); // ["Hello"]

Everything works fine!

IDE SUPPORT:

Similarly, we can create storage for complex types using the MyStorage class.

interface Employee {
    name: string;
    age: number;
}

const employeeStorage = new MyStorage<Employee>();

employeeStorage.setItem({ name: 'John', age: 30 });
employeeStorage.setItem({ name: 'Alex', age: 29 });

let employees = employeeStorage.getItems();
console.log(employees); // prints [{name: 'John', age: 30}, {name: 'Alex', age: 29}]

If we try to operate on the employees variable, we will receive the following autosuggestions from the IDE:

STRICTLY TYPED AND FLEXIBLE:

Once you specify what type of data the MyStorage class preserves, you cannot pass different types of arguments to its methods. If you do so, you will receive an error such as the following:

This is the beauty of a generic class. It is flexible and strictly typed at the same time.

GENERIC INTERFACES:

We can implement generic interfaces in a similar way to generic classes. It almost works the same way.

To understand the syntax, let's look at an example:

interface KeyPair<T, U> {
  key: T;
  value: U;
}

let kp1: KeyPair<number, string> = { key:1, value:"Steve" }; 
let kp2: KeyPair<number, number> = { key:1, value:12345 };

As you can see in the above example, by using the generic interface as type, we can specify the data type of key and value.

In a similar way to classes, we can pass dynamic types to the interface. So, let's see how we can use generics in a real-world project to make the most of it.

GENERICS WITH Axios AND React:

Axios is a simple promise-based HTTP client for the browser and node.js. It provides a simple-to-use library in a small package with a very extensible interface.

Most commonly, it is used when working with React applications. Let's see how generics can be used to make the most of API calls.

SETUP A React AND TypeScript PROJECT:

Run the following command in your terminal to set up a React TypeScript project:

npx create-react-app react-axios-typescript --template typescript --use-npm

• By using the --template typescript flag, a react project with preinstalled typescript and tsconfig.json configuration will be generated.

• The --use-npm flag is optional. If you're using yarn and npm at the same time. And you want to tell create-react-app to use npm instead of yarn to generate the project.

Open the generated project in VS Code.

INSTALL & CONFIGURE axios:

Use the following command to install axios (because axios comes with built-in type declarations, so we don't have to install @types/axios separately)

npm install axios

Now, create the api/index.ts file inside the src folder. The folder structure should look like this:

Let's configure our axios client and create the ApiService class to write API calls.

In your api/index.ts file, add the following code:

import axios from "axios";

const axiosClient = axios.create({
  // url which is prefixed to all the requests made using this instance
  baseURL: "https://jsonware.com/api/v1/json"
});

class ApiService {
  static async getCourseById(id: string) {
    return axiosClient.get(`/${id}`);
  }
}

export default ApiService;

In the code above, we have created an axios instance axiosClient with baseURL (baseURL is the URL that will get prefixed to all requests sent via axiosClient. Whenever building a large-scale application, this is a good practice to create multiple instances).

Furthermore, we created a class ApiService which will hold all the static methods for API calls. (To learn more about static methods/properties in typescript, click here)

getCourseById is an asynchronous method that uses axiosClient for an API call.

As you hover your cursor over the getCourseById method, you will see its return type is as follows:

It is Promise<AxiosResponse<any, any>>.

Now, let's break this!

I have explained that the Promise is a generic type in one of the previous topics in this article.

In other words, this method returns a Promise that, when resolved, will return a response of the type AxiosResponse<any, any>.

AXIOS BUILT-IN GENERIC INTERFACE FOR RESPONSE:

Let's now look at what AxiosResponse<any, any> is.

It is a built-in interface provided by the Axios library. Let's look at its declaration and see how it's structured.

As you can see in the image above. AxiosResponse is a generic interface that expects two type parameters, T and D, which are by default assigned to be of any type.

T is assigned to the data key and D is assigned to the config key. Let's ignore the config key declaration for now since we generally don't modify it.

When we receive a response from the backend, it is generally accessible through the data key.

Therefore, we can create a custom interface for the data key and pass it as the first type argument to AxiosResponse.

Let's declare an interface that represents the response we receive from the back end.

To do that, create the file type/interface.ts in the src folder as follows:

Add the following code to type/interface.ts:

export interface ServerResponse {
  status: number;
  errorMessage: string;
  success: boolean;
  message: string;
  result: any;
}

The above interface shows the structure of a server response (which is set by the backend developers). As developers, we know that we will receive the following keys with the success response from the backend: (There might be different keys for different backends, it depends on how the backend response is structured)

• status of type number.

• errorMessage of type string.

• success of type boolean.

• message of type string.

• result of type any because multiple responses may have different data types for the result key so it makes sense to use any here.

Now let's pass the above interface to AxiosResponse as the first type argument as follows:

...
class ApiService {
  static async getCourseById(
    id: string
  ): Promise<AxiosResponse<ServerResponse, any>> { // additional code
    return axiosClient.get(`/${id}`);
  }
}
...

RESPONSE AUTOSUGGESTIONS:

Let's try this method out in the App.tsx file and see what its benefits are.

Add the following code to the App.tsx file:

import React, { useEffect } from "react";
import "./App.css";
import ApiService from "./api";

function App() {
  const fetchCourseById = async () => {
    try {
      const response = await ApiService.getCourseById(
        "90794953-d58f-4cde-b2ce-9e0a6643c658"
      );
      console.log(response);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchCourseById();
  }, []);

  return (
    <div className="App">
      <h1>Learn typescript</h1>
    </div>
  );
}

export default App;

Let's see what the console displays.

If you look closely, you can see that the response structure is exactly the same as that of the AxiosResponse interface.

Let's see if we get suggestions for the data key for this AxiosResponse in the fetchCourseById function.

Yes, we got the autosuggestions because the data key in AxiosResponse is of type ServerResponse, which is our interface.

You can type your axios response this way if you have a common response structure coming from the backend. So that you can eliminate errors caused by accessing a key that does not exist or is incorrect from the server response.

CONCLUSION:

• In this tutorial, you explore generics as they apply to functions, interfaces, classes, and custom types. You also used generics constraints for additional type checking.

• Each of these makes generics a powerful tool you have at your disposal when using TypeScript. Using them correctly will save you from repeating code over and over again, and will make the types you have written more flexible.

• This is especially true if you are a library author and are planning to make your code legible for a wide audience.

Make sure to subscribe to our newsletter on https://blog.wajeshubham.in/ and never miss any upcoming articles related to TypeScript and programming just like this one.

I hope this post will help you in your journey. Keep learning!

My Website, connect with me on LinkedIn and GitHub

The goal of this article is to explore the more complex and advanced types and concepts used in TypeScript applications. We'll discuss intersection types, type guards, discriminated unions, typecasting, index properties, function overloading, optional chaining, and nullish coalescing.

INTERSECTION TYPE:

DEFINITION & EXAMPLE:

An intersection allows us to combine multiple types and interfaces into one single type (not interface). To create an intersection type, use the & operator as follows:

type Name = {
  name: string;
};

type Age = {
  age: number;
};

type Person = Name & Age;

In the same way, let's create a new type by combining two interfaces:

interface Name {
  name: string;
}

interface Age {
  age: number;
}

type Person = Name & Age;

let p: Person = {
  name: "John",
  age: 18,
};

According to the above code, the Person type must contain mandatory properties of both the Name and Age interfaces.

If you miss any of the interface mandatory properties, you'll get a compilation error.

An interface CANNOT be created by intersecting two or more types or interfaces.

DIFFERENCE BETWEEN UNION & INTERSECTION TYPES:

• In Typescript, unions and intersections are defined in the Advanced Types section.

• The main difference between the two is that an intersection type combines multiple types into one. Whereas, a union type refers to a value that can be one of the multiple types.

• The & symbol represents an intersection, while the | symbol represents a union.

• Those who have a background in programming may notice that these symbols are usually associated with logical expressions. The intersection (&) can be considered as an AND whereas the union (|) can be considered as an OR.

To better understand the difference, let's look at an example:

interface FlyingAnimal {
  flyingSpeed: number;
}

interface SwimmingAnimal {
  swimmingSpeed: number;
}

function getSmallPet(): FlyingAnimal | SwimmingAnimal {
  return {
    flyingSpeed: 1,
  };
}

function getFlyingFish(): FlyingAnimal & SwimmingAnimal {
  return {
    flyingSpeed: 1,
    swimmingSpeed: 1,
  };
}

In this example, we have two interfaces: FlyingAnimal and SwimmingAnimal. Furthermore, we have two functions getSmallPet with a return type of FlyingAnimal | SwimmingAnimal (union type) and getFlyingFish with a return type of FlyingAnimal & SwimmingAnimal.

Since the getSmallPet return type is union, you should return all the mandatory properties of at least one of the types/interfaces included in the union.

Thus, we returned { flyingSpeed: 1 }, which is a property of the FlyingAnimal interface.

On the other hand, in intersection type, you need to return all the mandatory properties of every type/interface included in the intersection.

Therefore, we have returned { flyingSpeed: 1, swimmingSpeed: 1 }, if we miss any of the mandatory properties in getFlyingFish, we will receive the following compilation error:

WHEN TO USE IT?

Instead of using intersections, we can just combine all the properties of the two types/interfaces that we want to intersect.

However, we may have two interfaces that are used separately as types somewhere in the program. To create a new type composed of the properties of these interfaces, we will intersect them rather than rewrite their properties.

let's take an example to understand this:

interface I1 {
  a: number;
}

interface I2 {
  b: number;
}

let i1: I1 = {
  a: 1,
};

let i2: I2 = {
  b: 2,
};

let combinedI: I1 & I2 = {
  a: 1,
  b: 2,
};

There are two interfaces I1 and I2 that are used independently in variables i1 and i2.

Additionally, we have the combinedI variable, which has an intersection type of both I1 and I2.

So instead of creating a new type/interface for the combinedI with properties a and b, we just intersect the available interfaces I1 and I2.

TYPE GUARDS:

• A Type Guard reduces the type of an object in a conditional block. Basically, it is an additional piece of code we write to prevent errors at runtime

• Some of the most famous Type Guards are typeof, in, and instanceof.

typeof OPERATOR:

In our previous blog Everyday Types in TypeScript, we looked at how type guards could be used to add type-checking to avoid compilation errors.

To understand it better, let's look at some more examples:

type alphanumeric = string | number;

function add(a: alphanumeric, b: alphanumeric) {
  if (typeof a === "number" && typeof b === "number") {
    return a + b;
  }

  if (typeof a === "string" && typeof b === "string") {
    return a.concat(b);
  }

  throw new Error("Invalid parameters"); // return when a and b are not of the same type
}

In this example, we have a union-type alphanumeric, which can be either string or number. Also, we have a simple add function that has two parameters a and b of the type alphanumeric.

In it, we add a type guard for checking whether both parameters have the same types, and then we perform some operations.

if (typeof a === "number" && typeof b === "number") {
    return a + b;
  }

This block checks whether parameters a and b are number types. If they are, we will add them.

 if (typeof a === "string" && typeof b === "string") {
    return a.concat(b);
  }

This block checks whether parameters a and b are string types. If they are, we will concatenate them.

instanceof OPERATOR:

As discussed in our previous blog on Classes in TypeScript, the class can be used as a valid TypeScript type.

The instanceof operator can be used to check whether a variable is an instance of a class.

Here's an example to help you understand:

class Car {
  drive() {
    console.log("Driving a car...");
  }
}

class Truck {
  drive() {
    console.log("Driving a truck...");
  }
  loadCargo() {
    console.log("Loading cargo on truck...");
  }
}

type Vehicle = Car | Truck;

function useVehicle(v: Vehicle) {
  v.drive();
  v.loadCargo(); // we get compilation error here
}

We have two classes in the above code: Car and Truck. Both classes have a common method called drive(), while class Truck has an additional method called loadCargo().

Then we are creating a new type called Vehicle, which is a union of Car and Truck.

Hence, the Vehicle type may or may not have all the properties of both Car and Truck.

Furthermore, we have a function useVehicle which accepts a parameter v of type Vehicle, and inside it, we access the methods drive() and loadCargo().

However, we are unable to access the loadCardo() method due to a compilation error. Take a look at the following picture:

This is because the drive() method is available in both Car and Truck classes, but the loadCargo() method is only available in the Truck class. Since the Vehicle is a union type, there is a chance that you could pass a parameter of type Car that does not have the loadCargo() method.

To avoid this error, we can create a type guard by using the instanceof keyword:

function useVehicle(v: Vehicle) {
  v.drive();
  if (v instanceof Truck) { // type guard
    v.loadCargo(); // runs without error
  }
}

This means that only if v is an instance of the class Truck, execute the next line of code.

in OPERATOR:

The in operator performs a safety check on the existence of a property in an object. This can also be used as a type guard. For instance:

interface Developer {
  developmentTools: string[];
}

interface Tester {
  testingTools: string[];
}

type Employee = Developer | Tester;

function getToolsUsed(employee: Employee) {
  console.log(employee.developmentTools); // compilation errors
  console.log(employee.testingTools); // compilation errors
}

let developer: Employee = {
  developmentTools: ["typescript", "react"],
};

We have two interfaces, Developer and Tester, with both having the developmentTools and testingTools properties of type string[] respectively.

After that, we declare a new type Employee that is a union type.

We also have a function getToolsUsed that accepts a parameter employee of type Employee.

We thus encounter a compilation error when we try to access a developmentTools or a testingTools through the employee parameter because that object may or may not have those properties.

We can prevent this by adding a type guard using the in operator, as follows:

function getToolsUsed(employee: Developer | Tester) {
  if ("developmentTools" in employee) {
    // only works if the employee has the property developmentTools
    console.log(employee.developmentTools); // runs without error
  }
  if ("testingTools" in employee) {
    // only works if the employee has the property testingTools
    console.log(employee.testingTools); // runs without error
  }
}

DISCRIMINATED UNION:

Discriminated union type guard is a design pattern you use to ensure a runtime error won't occur because the property that doesn't exist is accessed.

As an example, let's replace in in the above example with a discriminated union-type guard.

interface Developer {
  role: "developer";
  developmentTools: string[];
}

interface Tester {
  role: "tester";
  testingTools: string[];
}

let Employee: Developer | Tester;

function getToolsUsed(employee: Developer | Tester) {
  switch (employee.role) {
    case "developer":
      console.log(employee.developmentTools); // valid code
      break;
    case "tester":
      console.log(employee.testingTools); // valid code
      break;
  }
}

To all of the interfaces that are included while creating a union type, we are assigning a role property - a literal type (click here for more information about literal types).

Lastly, we used the role property as a differentiator in switch-case statements.

INDEX PROPERTIES:

Index signatures look similar to property signatures, but with one difference. Instead of writing the property name, you simply place the type of key within square brackets.

SYNTAX AND DECLARATION:

Take a look at the following code:

interface StringObject {
  [key: string]: string;
}

const strings: StringObject = {
  en_US: "Hello, World!",
  fr_FR: "Bonjour, le monde!",
  es_ES: "¡Hola, mundo!",
  de_DE: "Hallo, Welt!",
};

Here we have a StringObject interface with a string key and string value structure. We will receive the following compilation error if we break the rules:

USE CASE OF INDEX SIGNATURE:

The purpose of index signatures is to type objects of unknown structure when only key and value types are known.

To understand this, let's look at an example.

interface SalaryStructure {
  [key: string]: number;
}

let developerSalary: SalaryStructure = {
  baseSalary: 10000,
  bonus: 100,
  incentive: 50,
  appreciationBonus: 10,
};

const getTotalSalary = (salaryObject: SalaryStructure): number => {
  let total = 0;
  for (const name in salaryObject) {
    total += salaryObject[name];
  }
  return total;
};

console.log(getTotalSalary(developerSalary)); // prints: 10160 rupees

Above we have an interface SalaryStructure that is declared with an index signature. This demonstrates that the SalaryStructure interface will have keys of type string and values of type number.

Next, we declare a variable developerSalary which is of type SalaryStructure. Furthermore, we are creating a function getTotalSalary that accepts a salary object of type SalaryStructure.

As we know that salaryObject will be an object with a string key and a number value, we can use the for loop to loop through the salaryObject to calculate the total salary.

DISADVANTAGE:

This syntax has the drawback of not having auto-suggestions supported by the IDE. Because IDE doesn't know the exact key that an object holds, it only knows the type of key it holds.

In addition, it doesn't raise a compilation error when we try to access a key that doesn't exist in the object, as you can see in the following image.

TYPECASTING:

• In typecasting, a variable is transformed from one type to another.

• JavaScript does not have a concept of type casting since variables have dynamic types.

• By typecasting, you can tell TypeScript that a particular value is of a specific type, which would otherwise be impossible for TypeScript to detect by itself.

ACCESSING A DOM ELEMENT:

TypeScript warns you when properties/methods are called on DOM elements.

Here's an example to help you understand:

To run the following code snippets, you need to have typescript installed globally. If you don't have typescript installed, run npm install -g typescript in your terminal or check out my blog on Introduction to TypeScript to get started.

In the root folder, create the index.html and index.ts files.

In index.html, add the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typescript</title>
  </head>
  <body>
    <input type="text" id="my-inp" />
    <script src="./index.js"></script>
  </body>
</html>

In index.ts, add the following code:

let myInput = document.getElementById("my-inp");

console.log(myInput.value) // throws error

In the above code, we are trying to get a DOM element by its id. The problem is that TypeScript does not know what type of element we are attempting to access.

So it infers it to be an element with type HTMLElement | null, as seen in the following image:

As a developer, we know that the myInput can't be null since index.html has an input tag with the id="my-inp".

To inform TypeScript that the element with the id="my-inp" exists we can use ! at the end of the value that might be null, as follows:

const myInput = document.getElementById("my-inp")!;

Now, if you hover over myInput you will see the type as HTMLElement.

However, all DOM elements that are HTMLElement does not have a property called value. Yet, as a developer, we are aware that we are trying to access an input element that has a value property.

Therefore, to tell TypeScript that this element is of type HTMLInputElement, we shall use Type Casting.

For type casing, there are two different syntaxes to choose from:

TYPECAST USING <> OPERATOR:

The syntax we use to typecast the above code snippet uses the <> operator is as follows:

const myInput = <HTMLInputElement>document.getElementById("my-inp")! ;

console.log(myInput.value) // runs without error

It is not a recommended way of doing typecasting because it is similar to JSX.

TYPECAST USING as KEYWORD:

The syntax we use to typecast the above code snippet uses the as keyword is as follows:

const myInput = document.getElementById("my-inp")! as HTMLInputElement;

console.log(myInput.value); // runs without error

FUNCTION OVERLOADING:

TypeScript supports the concept of function overloading. Multiple functions can share the same name, but have different parameter types and return types. However, the number of parameters must be the same.

Let's take an example to understand this concept.

type Param = string | number;

function add(a: Param, b: Param) {
  if (typeof a === "string" || typeof b === "string") {
    // even if any of the value in `number` we are converting to string
    return a.toString() + b.toString();
  }
  return a + b;
}

let result = add("John ", "Doe");

In the code above, we have a custom type called Param that is a union type. Furthermore, we have an add function that accepts two parameters a and b, both of type Param.

Let's see what inferred type the result variable has if we run the add function with both parameters of the type string.

As you can see in the above image, it appears to be a string | number variable, which is correct to a certain extent, but it would cause a problem if we attempted to access any string method on the result variable.

Since we are passing two strings, the return type must also be a string.

To fix this, we are going to implement function overloading as follows:

type Param = string | number;

function add(a: string, b: string): string;
function add(a: string, b: number): string;
function add(a: number, b: string): string;
function add(a: number, b: number): number;
function add(a: Param, b: Param) {
  if (typeof a === "string" || typeof b === "string") {
    // even if any of the value in `number` we are converting to string
    return a.toString() + b.toString();
  }
  return a + b;
}

let result = add("John ", "Doe");
result.split(" "); // ["John", "Doe"] runs without an error

Here we are overloading a function add by specifying all possible combinations of parameter types and expected return types. Therefore, now if we attempt to determine the inferred type of the result variable, we will get a string.

OPTIONAL CHAINING:

Consider a situation where you are making an API call and you don't know what data you will receive in the response.

In that case, you must use additional logic before accessing the nested object within the response data.

Let's take an example to understand this:

let getCourse = async () => {
  // following api call will return {"id":1,"name":"typescript","description":"this is the description"}
  await fetch(
    "https://jsonware.com/api/v1/json/7ece5b94-268b-4b86-a3cd-aa0eb2f9b62b",
    {
      method: "GET",
    }
  )
    .then((res) => res.json())
    .then((data) => {
      console.log(data); // data is the response from the API which is uncertain
    });
};

getCourse();

Our async function getCourse calls an API, and once the request is successful, we return the resultant object as data.

For instance, let's say a data object has an id, name, and description keys, but we accidentally accessed the price key, which doesn't exist.

Since the data has been inferred to be of any type, TypeScript will not throw an error instead it will ignore it.

Let's check out what happens when we access the price key.

Here is what we see in the console.

It will throw a runtime error that states Cannot read properties of undefined (reading 'toFixed').

In this case, we can use Optional Chaining by adding ? after the key name that might be null or undefined as follows:

// ...
 .then((data) => {
      console.log(data.price?.toFixed(2)); // this will fail silently
 });
// ...

Here is what we see in the console.

It prints undefined without throwing a runtime error.

NULLISH COALESCING:

Nullish coalescing is a loosely related concept to optional chaining, which is used to deal with undefined or null values.

Let's take an example to help you understand:

let inputValue = null;

let ignoreNullAndUndefined = inputValue || 'default';

console.log(ignoreNullAndUndefined); // prints 'default'

We have a variable called inputValue with the value null, as well as a variable called ignoreNullAndUndefined that accepts values other than null and undefined.

Therefore, we used the || (OR) operator to ensure ignoreNullAndUndefined does not receive null or undefined values.

The problem occurs when we declare inputValue as "" (empty string). Because the || (OR) operator treats it as a falsey value, which we don't want.

Only null and undefined should be discarded.

Therefore, we can use the nullish coalescing operator ?? to only avoid null and undefined as follows:

let inputValue1 = 0;
let inputValue2 = "";
let inputValue3 = false;
let inputValue4 = null;

let ignoreNullAndUndefined1 = inputValue1 ?? "default";
let ignoreNullAndUndefined2 = inputValue2 ?? "default";
let ignoreNullAndUndefined3 = inputValue3 ?? "default";
let ignoreNullAndUndefined4 = inputValue4 ?? "default";

console.log(ignoreNullAndUndefined1); // prints 0
console.log(ignoreNullAndUndefined2); // prints ""
console.log(ignoreNullAndUndefined3); // prints false
console.log(ignoreNullAndUndefined4); // prints "default"

?? will only and only discard null and undefined and accept any other value, regardless of its truthiness or falsity.

CONCLUSION:

• Despite TypeScript being very simple to grasp when performing basic tasks, knowing how its type system works is crucial to unlocking its advanced capabilities.

• Once we understand how TypeScript works, we can use this knowledge to write cleaner, well-organized code.

• Hopefully, this article has helped to demystify parts of the TypeScript type system and give you some ideas about how you can exploit its advanced features to improve your TypeScript application structure.

Make sure to subscribe to our newsletter on https://blog.wajeshubham.in/ and never miss any upcoming articles related to TypeScript and programming just like this one.

I hope this post will help you in your journey. Keep learning!

My Website, connect with me on LinkedIn and GitHub

In this article, we’ll create interfaces, learn how to use them, explore the differences between normal types and interfaces, and learn about declaration and merging.

WHAT IS AN INTERFACE?

An Interface is a structure that acts as a contract/doc in our application. It defines the syntax for classes/objects to follow, which means a class/object which implements an interface is bound to implement all its members (except for optional properties/methods).

The interface contains only the declaration of the methods and fields, but not the implementation. It is a shape of an object.

SYNTAX & DECLARATION:

CREATE AN INTERFACE:

Interfaces in TypeScript are created by using the interface keyword followed by the name of the interface, and then a {} block with the body of the interface. For example, here is a Course interface:

interface Course {
  name: string;
  price: number;
  isFree: boolean;
  onPurchase: (userId: string) => void;
}

Similar to creating a normal type using the type declaration, you specify the fields/properties of the interface, and their types, in the {}:

The above Course interface represents an object that has four properties which are name of type string, price of type number, isFree of type boolean, and onPurchase which is a function that accepts a single parameter userId of type string and returns void.

USE THE INTERFACE AS A VALID TYPE:

Now the Course interface is a valid TypeScript type. It can be used like any other type. An example of creating an object literal that matches the Course interface is as follows:

let course: Course = {
  name: "Angular",
  price: 100,
  isFree: true,
  onPurchase: (userId: string) => {
    console.log(`User with id ${userId} has purchased ${course.name}`);
  },
};

Variables using the Course interface as their type must have the same members as those specified in the Course interface declaration.

If you miss any one of the members you will get a compilation error as follows:

OPTIONAL PROPERTIES:

If you want to resolve the above error, you must include the property or make the particular property optional by adding ? ahead of : as follows:

interface Course {
  name: string;
  price: number;
  isFree: boolean;
  onPurchase?: (userId: string) => void; // this is an optional property
}

// No compilation error
let course: Course = {
  name: "Angular",
  price: 100,
  isFree: true,
};

However, when you make any property optional, TypeScript automatically infers that property to be of type <your given type> | undefined.

If you hover over the onPurchase property, you'll see that TypeScript has inferred the type as ((userId: string) => void) | undefined.

To avoid compile-time errors when working with such properties, type guards must be used. Type guards are nothing more than extra type-checking.

We will discuss Type guards in depth in future blogs.

READONLY PROPERTIES:

You can add read-only properties to an interface using the readonly keyword. This is similar to the last time we discussed how to create read-only properties inside a class with the readonly modifier.

Whenever we want to declare a property as read-only, we put the readonly keyword before the name of the property inside an interface, as shown below:

interface Course {
  name: string;
  readonly price: number; // readonly property
  isFree: boolean;
  onPurchase?: (userId: string) => void; // this is an optional property
}

// No compilation error
let course: Course = {
  name: "Angular",
  price: 100,
  isFree: true,
};

course.name = "Angular updated name"
course.price = 150; // throws compilation error

price is a readonly property in the above code, so you can only provide a value while declaring a variable, you can't modify it afterward. Doing so will result in the following compilation error:

NOTE: In an interface, you can only use the readonly modifier. You CAN NOT use other modifiers like private, public, or protected inside an interface.

IS INTERFACE A THING IN JAVASCRIPT?

• In JavaScript, the interface is not a thing. They are used to define a type of object or implement it in a class, but only in TypeScript.

• TypeScript Interface has zero JavaScript code which means it is only available in TypeScript and does not produce any code in compiled JavaScript files. This is also known as "duck typing" or "structural subtyping".

To understand the second point let's take an example:

In our first blog, we learned that whenever our typescript is compiled, it's converted into JavaScript. Therefore, let us create an interface and write some logic to see what the equivalent code looks like in JavaScript.

Take a look at the following code:

For this, you need a basic project setup. Check out my blog on Introduction to Typescript which includes detailed instructions on how to compile TS files into JS files including the tools and libraries necessary.

Create an index.ts file and add the following code to it:

interface Course {
  name: string;
  price: number;
  isFree: boolean;
}

let course: Course = {
  name: "Angular",
  price: 100,
  isFree: true,
};

console.log("Created course: ", course);

Then, run the following command to compile the index.ts into JavaScript:

tsc index.ts

This will generate an index.js file that contains equivalent JavaScript code. If you open that file, you will see that there is no trace of an interface. Instead, you will see only a variable declaration and a console log statement. Here is an example of what that would look like:

The reason is that JavaScript cannot understand interfaces. An interface is a development feature only found in TypeScript. It aims to improve code quality by adding type checks, preventing compilation errors, and ensuring bug-free code.

Some libraries help create interfaces in JavaScript, such as implement.js, but if you want them, why not use TypeScript instead?

USING INTERFACES WITH FUNCTIONS:

The use of interfaces in functions generally refers to assigning types to the parameters and explicitly indicating the type of the return value.

INTERFACE FOR FUNCTION PARAMETERS:

To avoid repeating complex types for multiple variables/parameters, we can create an interface for the parameter of the function and use the interface as a type.

Take a look at the following code:

interface Course {
  name: string;
  price: number;
  isFree: boolean;
}

let courses: Course[] = [];

const addCourse = (course: Course): void => {
  courses.push(course);
};

addCourse({
  name: "Angular",
  price: 100,
  isFree: true,
});

console.log(courses); // prints [{name: "Angular", price: 100, isFree: true}]

Like our previous examples, we have a Course interface with some properties. Additionally, we have an addCourse function that expects a parameter of type Course. Using addCourse we append the course parameter to courses, a variable that has a type of Course[] (An array of elements with the type Course).

When we use interface as a type for the parameter, we avoid writing the same and lengthy type structure over and over again as well as getting autocompletion when we make any operation on the parameter, as shown below:

INTERFACE FOR FUNCTION RETURN TYPE:

The interface can also be used as a function return type, as follows:

interface Course {
  name: string;
  price: number;
  isFree: boolean;
}

let courses: Course[] = [];

const addCourse = (course: Course): void => {
  course.name = course.name.toUpperCase();
  courses.push(course);
};

// function with return type Course[] (Array of Course)
const getCourses = (): Course[] => {
  return courses;
};

addCourse({
  name: "Angular",
  price: 100,
  isFree: true,
});

let coursesArray = getCourses();

A new function called getCourses is added here to return the courses array, which is of type Course[]. This can be specified as a return type.

If you don't explicitly specify the return type of getCourses, TypeScript will infer it as a Course[] as follows:

USING INTERFACES WITH CLASSES:

In our last blog, Classes in typescript, we took a deep dive into class concepts.

We will now look at how we can make classes more powerful by using interfaces.

CLASS IMPLEMENTING INTERFACE:

In TypeScript, a class can implement interfaces to enforce particular contracts (similar to languages such as Java and C#).

To implement an interface inside a class, we use the implements (with s) keyword after the class name and then specify the interface name. Check out the following code:

interface CourseInterface {
  name: string;
  price: number;
  onPurchase: () => void;
}

class Course implements CourseInterface {
  name: string;
  price: number;

  constructor(name: string, price: number) {
    this.name = name;
    this.price = price;
  }

  onPurchase() {
    console.log(`You have purchased ${this.name}`);
  }
}

As you can see, there is an interface named CourseInterface that has three properties, which are name of type string, price of type number, and onPurchase, a function that accepts no parameters and returns void.

There is also a class named Course that implements CourseInterface. Thus, it is necessary for a Course class to implement the same mandatory properties and methods that the CourseInterface possesses. If we miss any one of these mandatory properties, we will receive the following compilation error:

The error reads, Property 'onPurchase' is missing in type 'Course', but it is required in type 'CourseInterface'. Therefore, we must either add the onPurchase method or make that property optional.

The interface is somewhat similar to the abstract class, but there are some differences. We'll discuss the difference between an abstract class and an interface in an upcoming post here.

IMPLEMENTING MULTIPLE INTERFACES:

Classes can implement multiple interfaces at once.

Let's take an example to understand this:

interface Shape {
  getArea(): number;
}

interface Color {
  color: string;
  getColor(): string;
}

class Circle implements Shape, Color {
  private radius: number;
  color: string;

  constructor(rad: number, clr: string) {
    this.radius = rad;
    this.color = clr;
  }

  getArea(): number {
    return Math.PI * this.radius * this.radius;
  }

  getColor(): string {
    return this.color;
  }
}

const circle = new Circle(5, "red");
console.log(circle.getArea()); // prints 78.5398
console.log(circle.getColor()); // prints red

The example above shows two interfaces named Shape and Color, each of which has certain properties with their types. Additionally, we have a class called Circle which implements these two interfaces.

If any one of the mandatory properties of any one of the interfaces is missing, we will get the following compilation error:

These interfaces can also be used to implement other classes as follows:

interface Shape {
  getArea(): number;
}

interface Color {
  color: string;
  getColor(): string;
}

class Rectangle implements Shape, Color {
  private length: number;
  private width: number;
  color: string;

  constructor(l: number, w: number, clr: string) {
    this.length = l;
    this.width = w;
    this.color = clr;
  }

  getArea(): number {
    return this.length * this.width;
  }

  getColor(): string {
    return this.color;
  }
}

const rect = new Rectangle(10, 20, "green");
console.log(rect.getArea()); // prints 200
console.log(rect.getColor()); // prints green

This allows us to add strict type checks and provide documentation in our code, which makes the development process more convenient and reliable.

INTERFACE - INTERFACE INHERITANCE:

Extending an interface essentially means inheriting it from another interface. Similar to class inheritance we can use the extends keyword to inherit an interface.

EXTENDING AN INTERFACE:

Take a look at the following code:

interface Animal {
  name: string;
  age: number;
  eat: () => void;
}

interface Dog extends Animal {
  breed: string;
  bark: () => void;
}

The above code contains an interface called Animal and an interface called Dog which inherits Animal.

As a result, you can use an interface Dog to implement a class that must implement Dog as well as the mandatory properties/methods of the Animal interface.

Take a look at the following code:

// example for interface inheritance

interface Animal {
  name: string;
  age: number;
  eat: () => void;
}

interface Dog extends Animal {
  breed: string;
  bark: () => void;
}

class Labrador implements Dog {
  name: string;
  age: number;
  breed: string;

  constructor(name: string, age: number, breed: string) {
    this.name = name;
    this.age = age;
    this.breed = breed;
  }
  bark() {
    console.log("Woof! Woof!");
  }
  eat() {
    console.log("Yum yum");
  }
}

const labrador = new Labrador("Max", 3, "Labrador");

You will get a compilation error if you miss any of the Animal or Dog properties as follows:

In this case, we are missing the eat property, which is of type () => void in the Animal interface.

Also, Animal can still be used as a valid interface independently if required.

EXTENDING MULTIPLE INTERFACES:

It is possible to extend more than one interface while inheriting. Here is an example:

interface Species {
  family: string;
  genus: string;
}

interface Animal {
  name: string;
  age: number;
  eat: () => void;
}

interface Dog extends Animal, Species {
  breed: string;
  bark: () => void;
}

In this case, we have another interface called Species that is inherited by the Dog interface. In any class that implements a Dog interface, we now need to add all the mandatory properties of Species, Animal, and Dog.

DIFFERENCE BETWEEN A TYPE AND AN INTERFACE:

USE CASE:

interfaces are a way to describe data shapes, such as objects. The type attribute defines the type of data, for example, union, primitive, intersection, tuple, any, or even object.

EXTENDS & IMPLEMENTS:

As we saw earlier in this blog, we can easily extend and implement interfaces with TypeScript. However, this is not possible with types. (Except that the type is representing an object)

For example,

**The following code snippets are valid: **

The following code snippets are invalid:

The error above occurs because ABC is a union type, not an object type

MERGING

When you create multiple interfaces with the same name and some common and some unique properties, TypeScript will merge all the properties and will NOT generate a compilation error as follows:

interface Int1 {
  a: number;
  b: number;
  c: number;
}

interface Int1 {
  a: number;
  b: number;
  d: number;
}

// int1 should include a, b, c and d properties
// if you miss any mandatory property, you will get an error
const int1: Int1 = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
};

// Compiles without an error

However, with types, TypeScript will throw a compilation error because declaring two types with the same name is not allowed. Refer to the following image:

DIFFERENCE BETWEEN AN ABSTRACT CLASS AND AN INTERFACE:

Interfaces:

• Promote loose coupling (class is dependent on an interface rather than a class for the implementation)

• We can implement more than one interface in a class.

• Set up a contract between different classes (the syntax/structure for classes to follow)

• Serve as a “gatekeeper” to a function (function can enforce the contract)

• Work best when we have very different objects that we want to work with together.

Abstract classes:

• Strongly couple classes together (class is dependent on another class)

• We can't inherit more than one abstract class.

• Set up a contract between different classes (the syntax/structure for classes to follow)

• Work best when we are trying to build up the definition/blueprint of an object.

CONCLUSION:

• In this article, we have written multiple TypeScript interfaces to represent various data structures, discovered how we can use different interfaces together as building blocks to create powerful types, and learned about the differences between normal type declarations and interfaces.

• When should we use classes and interfaces? If you want to create and pass a type-checked class object, you should use TypeScript classes. If you need to work without creating an object, an interface is best for you.

• In the last two articles, we opened two useful approaches: blueprints (classes) and contracts (interfaces). You can use both of them together or just one. It is up to you.

• You can now start writing interfaces for data structures in your codebase, allowing you to have type-safe code as well as documentation.

Make sure to subscribe to our newsletter on https://blog.wajeshubham.in/ and never miss any upcoming articles related to TypeScript and programming just like this one.

I hope this post will help you in your journey. Keep learning!

My Website, connect with me on LinkedIn and GitHub

In this article, we will discuss the syntax of creating classes, the different features available, how classes are treated during compile-time type-check, access modifiers, shorthand initialization, how Getters and Setters work, static properties/methods, abstract class, and Singleton pattern.

WHAT IS A CLASS?

Classes are a common abstraction used in object-oriented programming (OOP) languages to describe data structures known as objects. These objects may contain an initial state and implement behaviors bound to that particular object instance.

WHAT TYPESCRIPT ADDS?

In 2015, ECMAScript 6 introduced a new syntax to JavaScript to create classes that internally use the prototype features of the language.

TypeScript has full support for that syntax and also adds features on top of it, like member visibility, abstract classes, generic classes, arrow function methods, access modifiers, and a few others.

SYNTAX, DECLARATION & INSTANCE CREATION:

The syntax is mostly the same used to create classes with JavaScript. But there are some distinguishing features available in TypeScript.

CREATE A CLASS:

You can create a class declaration by using the class keyword, followed by the class name and then a {} pair block, as shown in the following code:

class Course {

}

CREATE AN INSTANCE USING new KEYWORD:

The following snippet creates a new class named Course. You can then create a new instance of the Course class using the new keyword followed by the name of your class and an empty parameter list, as shown below:

class Course {

}

const courseInstance = new Course();

You can think of the Course class as a blueprint for creating objects and the courseInstance as one of those objects.

TYPE OF THE CREATED INSTANCE:

As you hover over the courseInstance variable, which is an instance of the class Course, you will see that TypeScript has inferred the type of the variable as Course.:

So, the class can also be considered as a type in TypeScript.

constructor FUNCTION & CLASS PROPERTIES:

Most of the time, when working with classes, you will need to create a constructor function. A constructor is a method that runs every time a new instance of a class is created (Not when you declare a class). It can be used to initialize values/fields in the class.

A class can hold variables called properties which can be initialized inside a constructor function as follows:

class Course {
  title: string;

  constructor(n: string) {
    this.title = n;
  }
}

Here, we are declaring a title variable/property of type string and initialize it within the constructor function.

When the constructor accepts a parameter, we need to pass it when creating an instance. The compilation error we will receive if we don't pass is as follows:

The Course class is accepting a variable of type string which is mandatory. Hence, it must be passed when creating an instance as follows:

class Course {
  title: string;

  constructor(n: string) {
    this.title = n;
  }
}

const courseInstance = new Course("Typescript");

Now that courseInstance represents an instance of the class Course, you can access fields, methods, and properties of the class Course via this variable as follows:

class Course {
  title: string;

  constructor(n: string) {
    this.title = n;
  }
}

const courseInstance = new Course("Typescript");

console.log(courseInstance.title); // This will print Typescript

CLASS METHODS & this KEYWORD:

Similar to properties, the class also can hold methods that are nothing but functions declared inside a class.

Let's take an example to understand the method:

class Course {
  title: string;

  constructor(n: string) {
    this.title = n;
  }

  describe() {
    console.log(`This is a ${this.title} course`);
  }
}

In the above code snippet, we are declaring a describe method inside our Course class which is not accepting any parameters.

Inside it, we are printing a string This is a ${this.title} course. Here, the this keyword refers to the concrete instance of Course (courseInstance). If you only specified title then it will throw a compilation error as follows:

Thus, if you want to access any property or method of the Course class, you have to use the this keyword.

Now, let's call describe and see what we get in the console.

class Course {
  title: string;

  constructor(n: string) {
    this.title = n;
  }

  describe() {
    console.log(`This is a ${this.title} course`);
  }
}

const courseInstance = new Course("TypeScript");

courseInstance.describe();

INHERITANCE:

WHAT IS INHERITANCE?

• Inheritance is an aspect of OOPs languages, which provides the ability of a program to create a new class from an existing class. It is a mechanism that acquires the properties and behaviors of a class from another class.

• The class whose members are inherited is called the base class, and the class that inherits those members is called the child class.

extends KEYWORD:

To implement inheritance we have to use the extends keyword as follows:

class Animal {

}

class Dog extends Animal {

}

In the above code snippet, we are declaring a parent class Animal and a child class Dog. Using the extends keyword we are inheriting properties and methods of an Animal class inside a Dog class.

super KEYWORD:

When you inherit any class, you must call the super method inside the constructor of the child class. super invokes the parent constructor and its values/parameters.

Let's take an example to understand this:

class Animal {
  name: string;

  constructor(n: string) {
    this.name = n;
  }
}

class Dog extends Animal {
  constructor(dogName: string) {
    super(dogName);
  }
}

const dog = new Dog("Tuffy");

A parent class Animal has a name property and its constructor also expects a parameter named n of type string.

Since the Dog class inherits the parent class Animal, whenever we create an instance of this class we must call the parent class constructor function. This is done by calling super(dogName), which invokes the constructor of the Animal class with dogName as a parameter that the constructor of the Animal class expects.

A compilation error will occur if we do not pass any value inside super() because the Animal class expects a mandatory parameter n of type string.

In addition, since the Animal class expects a string type, we must pass string only if we pass a number we will get the following compilation error.

In short, whenever you inherit any class you have to call super to invoke its constructor.

ENCAPSULATION & ACCESS MODIFIERS:

WHAT IS ENCAPSULATION?

• Encapsulation enables you to perform what’s called “data hiding”. It’s necessary to hide certain data so that it’s not changed accidentally or purposefully by other components or code in the program.

• To achieve encapsulation, use the proper access modifiers combined with the proper member types to limit or expose the scope of data.

• Access modifiers are markers on code that designate where that code can be used, and are as follows:

public MODIFIER:

public fields do not encapsulate since any calling code can modify the data at any time. If you declare a property/method without an access modifier, it is a public property/method.

Basically, public members are accessible everywhere without restrictions.

Let's take an example to understand more:

class Course {
  public title: string; 

  constructor(n: string) {
    this.title = n;
  }
}

const course = new Course('Angular');

console.log(course.title); // Prints: Angular

All TypeScript members (properties and methods) are public by default, so you don't need to prefix them with the public keyword.

You can also modify the values of the public properties. Look at the following code:

class Course {
  public title: string; 

  constructor(n: string) {
    this.title = n;
  }
}

const Course1 = new Course("Angular");

Course1.title = "TypeScript";

console.log(Course1.title); // Prints: TypeScript

private MODIFIER:

A private property/method cannot be accessed outside of its containing class. private properties and methods can only be accessed within the class.

Let's take an example to understand more:

class Course {
  private title: string; 

  constructor(n: string) {
    this.title = n;
  }
}

const course = new Course('Angular');

console.log(course.title); // Throws compilation error

The above code has a title property which is a private property of the class Course.

Accessing it outside of the Course class will result in the following compilation error:

The child class does not even have access to private properties. Consider the following code:

class Course {
  private title: string;

  constructor(n: string) {
    this.title = n;
  }
}

class PaidCourse extends Course {
  constructor() {
    super("Paid Course");
    console.log(this.title);
  }
}

In the above code, we have a Course class as a parent and a PaidCourse class as a child. We learned earlier that properties can be inherited from the parent class to the child class except for private properties. So the above code will result in the following compilation error:

protected MODIFIER:

A protected member cannot be accessed outside of its containing class. Members that are protected can only be accessed within the class and its child classes.

In the above code, if we change the title property of the Course class from private to protected, the compilation error will be resolved. Check out the following image:

You will, however, receive a compilation error if you try to access the protected title property through an instance of the Course class. See the following code:

class Course {
  protected title: string; // only accessible within the class and child classes

  constructor(n: string) {
    this.title = n;
  }
}

class PaidCourse extends Course {
  constructor() {
    super("Paid Course");
    console.log(this.title); // prints "Paid Course" (valid line)
  }
}

const course = new Course("Another course"); 

console.log(course.title); // throws error

Because the title is a protected property, we cannot access it through the instance. We will receive the following compilation error:

readonly MODIFIER:

TypeScript supports readonly modifiers on the property level by using the readonly keyword. The readonly properties must be initialized at their declaration or in the constructor.

Take a look at the following code to understand this:

class Course {
  readonly price: number;
  constructor(p: number) {
    this.price = p;
  }

  changePrice(p: number) {
    this.price = p; // throws error because price is readonly
  }
}

const Course1 = new Course(10);

Course1.changePrice(20);

We have a readonly price property in the above code, which can only be assigned once, inside the constructor function.

You will get a compilation error as follows if you try to change it anywhere else:

SHORTHAND INITIALIZATION:

In previous examples, we declared properties first and then initialized them inside the constructor as follows:

class Course {
  title: string;
  price: number;
  ratings: number;

  constructor(title: string, price: number, ratings: number) {
    this.title = title;
    this.price = price;
    this.ratings = ratings;
  }
}

The above code first declares three properties and sets/assigns them inside a constructor function.

It is possible to write less and more readable code by simplifying and using a shortcut, as follows:

class Course {
  constructor(
    public title: string,
    public price: number,
    public ratings: number
  ) {}
}

In this case, Typescript will automatically generate those properties. Based on your requirements, you can use any other access modifier instead of public.

Unless you use access modifiers, TypeScript will just consider it as a parameter and not generate a property.

For example, in the above code, if we use public only for title and amount, and pass ratings without any access modifier, it will throw an error if you attempt to access ratings the following way:

So you have to use an access modifier to make shorthand initialization valid.

GETTERS & SETTERS:

Getters and Setters are nothing more than methods that provide access to an object's properties.

They allow us to hide implementation details from instance objects. Thus, we can do some operations inside getters and setters that are completely encapsulated.

• getter: Use this method when you want to access any property of an object. A getter is also called an accessor.

• setter: Use this method when you want to change any property of an object. A setter is also known as a mutator.

A getter method starts with the keyword get and a setter method starts with the keyword set.

Let's look at Getters and Setters one by one with examples:

GETTER METHODS:

To understand the syntax and basic concept, let's take an example:

class Person {
  firstName: string;
  lastName: string;
  constructor(f_name: string, l_name: string) {
    this.firstName = f_name;
    this.lastName = l_name;
  }

  getFullName() {
    return this.firstName + " " + this.lastName;
  }
}

const person = new Person("John", "Doe");
console.log(person.getFullName()); // prints "John Doe"

In the above example, we have a class called Person that accepts f_name and l_name parameters and has firstName and lastName properties.

It also has a method called getFullName() that combines firstName and lastName to return a full name.

Instead of using the getFullName method, we can use getter as follows:

class Person {
  firstName: string;
  lastName: string;
  constructor(f_name: string, l_name: string) {
    this.firstName = f_name;
    this.lastName = l_name;
  }

  get fullName() {
    return this.firstName + " " + this.lastName;
  }
}

const person = new Person("John", "Doe");

// we dont execute getters
console.log(person.fullName); // prints "John Doe"

Using the get keyword, we declare a getter method. Notice that we don't execute or use () after person.fullName as TypeScript infers it as a readonly property. Hence, you cannot modify it. In doing so, you will receive the following error:

In the first example, the method getFullName does the same thing as the getter method. However, the getter method is slightly simpler and it is easier to identify its purpose at a glance with its syntax.

SETTER METHODS:

A setter method is used to mutate the value of a class member.

In our previous example, there was no way to replace a person's name other than to create a new object.

This provides us with class safety, but what if we need to change the firstName.

The setter method in TypeScript allows us to change the value of a property. (even if the value is private or protected)

To write a setter method, we use the keyword set before the method name.

class Person {
  private firstName: string;
  private lastName: string;
  constructor(f_name: string, l_name: string) {
    this.firstName = f_name;
    this.lastName = l_name;
  }

  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  set setFirstName(f_name: string) {
    this.firstName = f_name;
  }
}

const person = new Person("John", "Doe");

// Whatever value we assign to the setter, it will be passed to the setter as a parameter.
person.setFirstName = "Rohan"; // Setting the firstName property

console.log(person.fullName); // prints "Rohan Doe"

We have a class called Person with two private properties called firstName and lastName. Additionally, there is a getter method to retrieve a person's full name and a setter method to change the firstName.

IMPORTANT: Setter functions can take only one parameter. You will receive a compilation error if you try to pass more than one.

STATIC PROPERTIES & METHODS:

• Static members can be accessed without having the class instantiated. Of course, it depends on which access modifier you are using.

• So public static members can be accessed directly from outside the class.

• private static members can only be used within the class, and

• protected members can be accessed by the class in which the member is defined as well as by its child classes.

HOW TO ACCESS INSIDE A CLASS:

When working with the static properties/methods you have to use the class itself and not the instance of the class.

Check out the following code to see how to access them inside a class:

class Mathematics {
  static PI = 3.14159; // static property

  calculateCircumference(diameter: number): number {
    return this.PI * diameter; // this.PI is not accessible here because it is a static property
  }
}

Here, PI is a static property and calculateCircumference is a normal method in the Mathematics class.

Therefore, if you try to access it inside of a class method by using the this keyword, you will receive an error because PI is NOT a class property. Rather, it is a static property.

To remove the error, we need to access the static property using the class name:

class Mathematics {
  static PI = 3.14159; // static property

  calculateCircumference(diameter: number): number {
    return Mathematics.PI * diameter;
  }
}

NOTE: You can only use the this keyword inside a static method if you want to access the static property. Therefore, if you make calculateCircumference a static method then this.PI would be valid:

HOW TO ACCESS OUTSIDE A CLASS:

Check out the following code to see how to access them outside a class:

class Mathematics {
  static PI = 3.14159; // static property

  // static method
  static calculateCircumference(diameter: number): number {
    return Mathematics.PI * diameter;
  }
}

let newMath = new Mathematics();

console.log(newMath.PI); // This will throw an error
console.log(newMath.calculateCircumference(10)); // This will throw an error

console.log(Mathematics.PI); // returns 3.14159
console.log(Mathematics.calculateCircumference(10)); // returns 31.4159

If you try to access static property PI or static method calculateCircumference using newMath in the above code, you will get the following compilation error:

In addition, TypeScript also detects that the PI and calculateCircumference are static properties and methods respectively and asks "Did you mean to access the static member 'Mathematics.calculateCircumference' instead?".

INBUILT Math CLASS:

• TypeScript's Math class provides no. of properties and methods for performing mathematical operations.

• Math is not a constructor and all the properties and methods of Math are static.

function mathTest(num: number): void {
  var squareRoot = Math.sqrt(num); // sqrt is a static method of Math
  console.log("Random Number:  " + num); // logs random number
  console.log("Square root:  " + squareRoot); // logs Square root of random number
  console.log("PI value: ", Math.PI); // PI is a static property of Math
}
var randomNum: number = Math.random(); // random is a static method of Math
mathTest(randomNum);

ABSTRACTION & ABSTRACT CLASS:

• Abstract classes can have implementation details for their members. To declare an abstract class, we can use the abstract keyword. We can also use the abstract keyword for methods to declare abstract methods, which are implemented by classes that derive from an abstract class.

• In short abstract classes are classes that have a partial implementation of a class from which other classes can be derived. It's a blueprint for classes.

• They can’t be instantiated directly.

SYNTAX AND ABSTRACT METHODS:

Let's take an example to understand the syntax and implementation:

abstract class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  abstract getName(): string;
  abstract getAge(): number;
}

In the above code, we have declared a Person class prefixed with the abstract keyword which means it is an abstract class.

We have name and age as properties for the Person class. It also has the abstract methods getName and getAge. But if you see these methods don't have implementations in them we have just declared them with their return type.

Because abstract methods don’t contain implementations of the method. It’s up to the child classes that inherit the abstract class to implement the method listed. They may also, optionally, include access modifiers.

INHERIT ABSTRACT CLASS:

Let's inherit the above class:

abstract class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  abstract getName(): string;
  abstract getAge(): number;
}


class Employee extends Person{
  constructor(name: string, age: number) {
    super(name, age);
  }
  getName() {
    return this.name;
  }
  getAge() {
    return this.age;
  }
}

As we can see, in the Person class the abstract methods only have signatures in them. The actual implementation of the methods is in the Employee class, which extends the Person class.

If you miss any one of the abstract methods inside an Employee class you will get a compilation error as follows:

TypeScript checks the method declaration and the return type of the method in the abstract class, so we must be implementing the abstract methods as it’s declared in the abstract class.

This means that in the example above, the getName method must take no parameters and must return a string. If you try to break those type checks you will get an error:

Likewise, the getAge method must take no parameters and must return a number.

After the abstract methods have been implemented, we can call them normally like any other method as follows:

let employee = new Employee("Jane", 20);
console.log(employee.getName()); // returns "Jane"
console.log(employee.getAge()); // returns 20

SINGLETON PATTERN:

• Singleton is a creational design pattern, which ensures that only one object of its kind exists and provides a single point of access to it for any other code.

• It is a way to structure your code so that you can’t have more than one instance of your logic, ever.

SINGLETON CLASS IN TYPESCRIPT:

We can use access modifiers on TypeScript constructors, so we can now create singletons as we do in other languages.

A singleton class's constructor is private, which means it cannot be used outside of the class. Therefore, we can't create an instance of that class with the new keyword.

To understand this let's create a singleton class:

class SingletonClass {
  private constructor() {
    console.log("SingletonClass created");
  }
}

const singletonClass = new SingletonClass(); // throws error

In the above code, we have a class called SingletonClass, which has a private constructor. So, when we try creating an instance from that class, we receive the following error:

The above error indicates that we can only access the constructor within the class itself.

To make it a singleton class, we need to create an instance within the class as follows:

class SingletonClass {
  private static instance: SingletonClass;

  // only accessible within the class
  private constructor() {
    console.log("SingletonClass created");
  }


  static getInstance() {
    if (SingletonClass.instance) {
      return SingletonClass.instance;
    }
    SingletonClass.instance = new SingletonClass();
    return SingletonClass.instance;
  }
}

const singletonClass = SingletonClass.getInstance(); // creates a new instance

The above code declares a private and static property named instance that is of type SingletonClass.

We have declared a static method getInstance that first checks if an instance of the class SingletonClass already exists or not. Upon success, it will return the same instance otherwise a new instance will be created.

Therefore, if you call getInstance multiple times, the constructor function will only be executed once, as shown in the following image:

USE CASES:

• The purpose of the singleton class is to control object creation, limiting the number of objects to only one.

• The singleton allows only one entry point to create a new instance of the class.

• The use of singletons is often useful when we need to control resources, such as database connections or sockets.

CONCLUSION:

• TypeScript classes are even more powerful than JavaScript classes because they have access to the type system and new features such as member visibility, access modifiers, abstract classes, and much more.

• In this way, you can deliver code that is type-safe, more reliable, and more representative of your business model.

Make sure to subscribe to our newsletter on https://blog.wajeshubham.in/ and never miss any upcoming articles related to TypeScript and programming just like this one.

I hope this post will help you in your journey. Keep learning!

My Website, connect with me on LinkedIn and GitHub.

In this article, we’ll learn in-depth about some of the most common types in TypeScript. They include object, Array, Union types, enums, tuples, any type, Literal types, and Type Aliases.

object TYPE:

DEFINITION:

An object is a type of all non-primitive values (primitive values are undefined, null, booleans, numbers, and strings).

To define an object type, we simply list its properties and their types. To understand this, take a look at the following examples mentioned below:

IMPLICIT TYPE:

Firstly, open VS Code and create an index.ts file with the following code:

const course = {
  name: "Learn typescript",
  price: 20,
};

console.log(course);

As you hover over the course variable, you will see TypeScript has inferred the type of that variable.

Even though we haven't explicitly stated that the course variable will have name and price keys, the TypeScript type inference system handles writing these types.

Visually, it looks like a JavaScript object. However, if you notice it has ; at the end of the key-value pair, and the value of the key is nothing but a type of that particular key. The name key is of type string and the price key is of type number.

You will see autosuggestions from your IDE if you add a . after the course variable since the IDE is aware of the keys the course variable possesses.

The Compilation error with a descriptive message will appear if you attempt to access the key that does not exist in the course object. This is unlike JavaScript, which ignores the error without warning.

EXPLICIT TYPE:

Instead of having TypeScript infer the type for us, let's explicitly specify what type the course variable must have.

const course: {
  name: string;
  price: number;
  isPublished: boolean;
} = {
  name: "Learn typescript",
  price: 20,
};

console.log(course.name);

We have assigned a boolean type with the key name isPublished to the course variable. Since we explicitly stated that the course variable must have name, price, and isPublished properties, TypeScript detects this as a compilation error since we are only passing the name and price.

Let's say you want to keep the isPublished property optional. In that case, you can add a ? before : to make that property optional as follows:

Furthermore, if you hover over the isPublished key, you will see that TypeScript has inferred its type as boolean | undefined. The reason is that isPublished is optional, and you may not pass any value to it. When that happens, you will receive an undefined value, and for that TypeScript warns you that the value of isPublished maybe undefined.

isPublished is called an optional property in the above example. In contrast, boolean| undefined is a union type which we will be exploring at great length in this blog.

NESTED object types:

JavaScript also supports nested objects, which means objects can be nested within objects. Let's take a look at how we assign a type when dealing with such nested objects:

const course: {
  name: string;
  price: number;
  isPublished?: boolean;
  student: {
    name: string;
    age: number;
  };
} = {
  name: "Learn typescript",
  price: 20,
  student: {
    name: "John",
    age: 30,
  },
};

console.log(course);

In the above example, we have course which is an object, inside which we have the student key, which itself is another object with the name and age keys.

So now, if you try to access student, you will also get autosuggestions for the student object which is nested inside the course object.

Also, typescript knows the type of values that we are getting in all the keys of the course variable so it can also suggest possible methods for a particular type of values:

Array TYPE:

DEFINITION:

Array refers to a special type of data type that can store multiple values of different types sequentially using a special syntax.

SHORTHAND SYNTAX type[]:

Take a look at the following code:

const course = {
  name: "Learn typescript",
  price: 20,
  tags: ["typescript", "javascript"],
};

console.log(course);

Now, when you hover over tags, you will see that it says string[]

It is a shorthand and widely used syntax when assigning a type to an array. A string[] notation implies that the array contains only string elements.

Since "typescript" and "javascript" are strings, it infers tags key as a string[] (array of strings).

GENERIC SYNTAX Array<type>:

Another way to specify a type for an array is to use generic syntax, such as:

const course: {
  name: string;
  price: number;
  tags: Array<string>; // this is generic syntax Array<type_of_elements>
} = {
  name: "Learn typescript",
  price: 20,
  tags: ["typescript", "javascript"],
};

console.log(course);

Here, we specify that tags is an Array that contains only string type elements.

The <> indicates that this is a Generic type, and we must specify the type of elements to include in this array. (We will study Generic types in depth in future blogs)

The following error will occur if the element type is not provided:

TypeScript generally infers the type of an array with shorthand syntax

Array WITH MIXED TYPES:

What if the array has elements of different types? For instance,

const course = {
  name: "Learn typescript",
  price: 20,
  tags: ["typescript", "javascript", 20, 10],
};

Hovering over tags reveals its type as (string | number)[] (Again, string | number is a union type, which means the array includes elements which can be of type string or number).

We need something called type guards for handling union types. This is a bit advanced, so we will cover it in a later blog post.

Array OF object:

The types of objects that should be included in an array can be explicitly specified. This allows us to avoid runtime errors and speed up development.

To understand how to define a type for an array of specific objects, let's take an example:

const course1 = {
  name: "Learn typescript",
  price: 20,
  tags: ["typescript", 20, 10],
};

const course2 = {
  name: "Learn javascript",
  price: 20,
  tags: ["javascript", 10],
};

const courses: {
  name: string;
  price: number;
  tags: (string | number)[];
}[] = [course1, course2];

console.log(courses);

We have two objects here, course1 and course2, whose type is { name: string; price: number; tags: (string | number)[]; }.

Then we have another variable courses that contains a list of these two courses, so let's create an array with each element being of a type { name: string; price: number; tags: (string | number)[]; }

The type is now known, and we know that courses should be Array of type { name: string; price: number; tags: (string | number)[]; }

Therefore, we assigned { name: string; price: number; tags: (string | number)[]; }[] as the type of courses variable.

As shown below, TypeScript will automatically infer the type for you if you don't explicitly mention it:

Because TypeScript knows what type of element the courses array has, you will get autosuggestions not only for courses but also for each element in the courses array when you perform any operation on it.

tuple TYPE:

DEFINITION:

A tuple type is a type of Array that knows how many elements it contains, as well as the type of elements contained at specific positions.

Here is how we can declare a variable as a tuple:

let course: [number, string] = [1, "Typescript"];

Here, we are saying that the course is an array of fixed length and must have the first element of type number and the second element of the type string.

If you try to replace the element at the index 0 which is of type number with a string, you will get a compilation error because we explicitly specified that the element at the index 0 must be a number.

EXCEPTION IN tuple:

A tuple should indeed be immutable, but it is still possible to push an element in it because TypeScript doesn't throw a compilation error when you call the .push() method.

However, if you attempt to reassign the variable with a different structure, you will receive the following compilation error:

When reassigning, you need to follow the same structure as when assigning.

POSSIBLE USE CASE OF tuple:

If you need exactly x amount of values in an array, and you know the type of each element at a specific index, then you may want to consider using tuple type instead of an Array type, for more strictness.

enum TYPE:

DEFINITION:

Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.

By using enums, we can create sets of constants with names. You can create cases and documentation more easily by using enums.

NUMERIC ENUMS:

An enum can be defined using the enum keyword. Take a look at the following code:

enum Role {
  ADMIN = 1,
  READ_ONLY,
  AUTHOR,
}

const user: {
  name: string;
  age: number;
  role: Role;
} = {
  name: "Max",
  age: 30,
  role: Role.ADMIN,
};

We have a numeric enum where ADMIN is initialized with 1. From that point forward, all of the following members will be auto-incremented. Thus, Role.ADMIN has the value 1, READ_ONLY has 2, and AUTHOR has 3.

Once we define an enum type, in the above case its Role, we don't need to remember what the value of any particular role is, we can simply access enum variables with their names such as Role.ADMIN or Role.READ_ONLY or Role.AUTHOR.

You will also get autosuggestions from your IDE to do so as follows:

In addition, if you want to change values for the enum variable, you can do it in your enum type Role. You don't have to make that change everywhere in the code.

STRING ENUMS:

In the same way as numeric enums, enums can have strings as values. Here's an example:

enum Role {
  ADMIN = "admin",
  READ_ONLY = "read_only",
  AUTHOR = "author",
}

As the logic remains the same, but in numeric enums you will get 1 in return from Role.ADMIN, as in string enums you will get "admin".

It is up to you what you want to assign to each enum.

HETEROGENEOUS ENUMS:

Similarly, you can assign mixed types of values to enums as follows:

enum Role {
  ADMIN = 1
  READ_ONLY = "read_only",
  AUTHOR = 3,
}

You get the point!

any TYPE:

DEFINITION:

When a value is of type any, you can access any property of it, call it like a function, assign it to a value of any type, or pretty much anything else as long as it's syntactically legal.

WHY NOT USE any:

While any type is flexible, it loses all the advantages that TypeScript offers. As a result, it provides the same experience as vanilla JavaScript, thus eliminating the need for TypeScript.

Take a look at the following code:

let person: any = {
  name: "John",
  age: 30,
};

console.log(person.canWalk())

In the above example, we are calling the canWalk() function, which does not exist in the person variable. However, TypeScript is simply ignoring everything about that particular variable, so we aren't getting any compilation errors.

There is no autocompletion for this variable, which is another downside.

This is a disadvantage of using any type and you should avoid using any unless you don't know the type of the variable or parameter.

USE CASE OF any:

• When there are no other options, and no type definitions are available for the piece of code you're working on, choose the any type.

• any has some practical use cases. For example, if you are getting a response from an API call and you don't know the structure of the response, then you can use any to disable the type-checking for the response object.

• However, if you know the type, be explicit about it.

UNION TYPES:

DEFINITION:

TypeScript’s type system allows you to build new types out of existing ones using a large variety of operators. We can create new custom types by combining some of the core types.

SYNTAX:

The | operator enables us to combine different types and create a new one. In the previous topics, we used this concept:

let strOrNumArray: (string | number)[] = [];

In the above example, we are saying that the strOrNumArray could contain elements of type either string or number

So, you won't get a compilation error if you insert elements of type 'number' or 'string'. However, adding a boolean type will result in the compilation error as follows:

The above code can be made valid by adding another type boolean after string and number to make an array that has the possibility of string, number, and boolean, as follows:

HANDLE COMPILATION ERRORS USING TYPE GUARDS:

When you use union types, you will get a compilation error if the operation is only valid for one of the types you specified.

Let's see an example to understand this. take a look at the following code:

const combineStrOrNum = (param1: string | number, param2: string | number) => {
  let result = param1 + param2; // compilation error here
  return result;
};

In the above example, by stating that the param1 and param2 are both of type string | number, we mean that there may be cases when you pass param1 as number and param2 as string, and as we saw in our blog on Introduction to TypeScript, using + between types string and number can lead to unexpected behavior.

So, typescript complains that this expression can yield unexpected value.

We can handle this with type guards, which are available in JavaScript as well. Look at the following code:

const combineStrOrNum = (param1: string | number, param2: string | number) => {
  if (typeof param1 === "number" && typeof param2 === "number") {
    console.log(param1 + param2); // return sum of 2 numbers
  } else if (typeof param1 === "string" && typeof param2 === "string") {
    console.log(param1 + " " + param2); // return concatenation of 2 strings
  } else {
    console.log("Mixed types can not be added"); // return error message
  }
};

combineStrOrNum("Hello", "World"); // Hello World
combineStrOrNum(1, 2); // 3
combineStrOrNum("Hello", 2); // "Mixed types can not be added" (unexpected behavior)

Here, the typeof keyword indicates the type of a particular variable value.

When the type of param1 and param2 is string, then only we want to concatenate them with a space.

And if param1 and param2 are both numerical, we want to add both of them.

Shortly, we are adding some kind of type guard to prevent unexpected behavior.

In future blogs, we'll explore in-depth concepts about type guards and other type guards beside typeof.

LITERAL TYPES:

DEFINITION:

A literal type is a more concrete sub-type of a union type. The difference is that in union types, we specify the types of variables we are expecting, but in Literal types, we specify the exact value we are expecting.

Let's look at the example to understand this:

SYNTAX

let readOnly: "readonly" = "readonly";

Specifically, we are declaring that you can only assign the "readonly" string to the readOnly variable. A string other than "readonly" cannot be assigned to this variable. If you do so, you will get a compilation error as follows:

USECASE AND IDE SUPPORT:

If you want to accept only predefined values, you can assign a literal type. For example:

let button: {
  label: string;
  severity: "primary" | "secondary" | "danger" | "warning";
  isSubmit: boolean;
} = {
  label: "Submit",
  severity: "primary",
  isSubmit: true,
};

Using the example above, we are creating a button variable that has label - string, isSubmit - boolean, and severity - "primary" | "secondary" | "danger" | "warning".

You will get the following compilation error if you try to assign a different string to the severity key, even if it is of type string.

A benefit of the Literal type is that you get autosuggestions for that particular key with all the possible values.

Take a look at the following image:

This is useful in large applications when you don't know which value a given variable can have.

TYPE ALIASES:

WHAT IS IT?:

We might need to use longer types when working with union types or literal types. If we want to add another component apart from the button, let's say an alertBar that is also having the severity of "primary" | "secondary" | "danger" | "warning", it's a bit cumbersome to write it again and again. We can avoid this by using type aliases.

WHY AND HOW TO USE IT?:

Creating dynamic and reusable code is crucial. Don't-Repeat-Yourself (DRY) is an important principle to follow when writing TypeScript code. You can accomplish this using TypeScript aliases.

A custom type can be created by using the type keyword followed by the type's name. Let's look at the example below:

type SeverityType = "primary" | "secondary" | "danger" | "warning";

let button: {
  label: string;
  severity: SeverityType;
  isSubmit: boolean;
} = {
  label: "Submit",
  severity: "primary",
  isSubmit: true,
};

let alertBar: {
  message: string;
  severity: SeverityType;
  duration: number;
} = {
  message: "This is an error message",
  severity: "danger",
  duration: 2000,
};

By creating a type, you can now use SeverityType anywhere in your code as if it were a number, string, boolean, or any of the primitive or reference types. It's a valid type for TypeScript.

TYPE OF AN OBJECT:

type can also represent the structure of an object, such as what fields it should contain.

Creating a custom type for an object is as easy as using the type keyword followed by the type's name and specifying the fields of the type, as well as their types, in the {}.

In the above example, we can create the following custom types for button and alertBar:

type SeverityType = "primary" | "secondary" | "danger" | "warning";

type Button = {
  label: string;
  severity: SeverityType;
  isSubmit: boolean;
};

type AlertBar = {
  message: string;
  severity: SeverityType;
  duration: number;
};

let button: Button = {
  label: "Submit",
  severity: "primary",
  isSubmit: true,
};

let alertBar: AlertBar = {
  message: "This is an error message",
  severity: "danger",
  duration: 2000,
};

We've created two new types in the above code: Button and AlertBar, which are type aliases for button and alertBar, respectively. Now, we can use those types anywhere in our code without having to rewrite them each time.

We will use interfaces instead of types to describe an object's structure in future blogs.

CONCLUSION:

• In this blog, we've covered some of the most common types of values you’ll find in TypeScript code.

• Types can also be found in many places other than just type annotations. We reviewed the most basic and common types you might encounter when writing TypeScript code. These are the core building blocks of more complex types, which will be discussed in future blogs.

Make sure to subscribe to our newsletter on https://blog.wajeshubham.in/ and never miss any upcoming articles related to TypeScript and programming just like this one.

I hope this post will help you in your journey. Keep learning!

My Website, connect with me on LinkedIn and GitHub.

WHAT ARE FUNCTIONS?

Functions are the fundamental building blocks of any application in JavaScript. They’re how you build up layers of abstraction, mimicking classes, information hiding, and modules.

In TypeScript, while there are classes, namespaces, and modules, functions still play a key role in describing how to do things.

WHAT TYPESCRIPT ADDS?

Functions are the primary means of passing data around in JavaScript. TypeScript allows you to specify the types of both the input and output values of functions.

TypeScript also adds some new capabilities to the standard JavaScript functions to make them easier to work with.

SYNTAX AND STRUCTURE:

In TypeScript, function definition consists of a function name, its parameters with types, and its return type (which can be inferred by TypeScript).

DECLARE AN ARROW FUNCTION:

Following is the syntax to declare a function in TypeScript:

const functionName = (param1: string): string => {
  // ...
  return param1;
};

// functionName = Name of the function
// param1 = Name of the parameter (optional)
// (...): string = Return type of the function

In the above code, the syntax (param1: string): string => means a function with one parameter, named param1, of type string, that has a return value of type string.

If you don't specify the return type, TypeScript automatically infers the return type for you as shown below:

Here, const functionName: (param1: string) => string means, a function with a name functionName with one parameter named param1 of type string that has a return value of type string.

DECLARE A FUNCTION WITH function KEYWORD:

Declaring a function with the function keyword is almost similar to an arrow function.

Take a look at the following code:

function functionName(param1: string): string {
  // ...
  return param1;
}
// functionName = Name of the function
// param1 = Name of the parameter (optional)
// (...): string = Return type of the function

TYPE ANNOTATIONS:

When you declare a function, you can add type annotations after each parameter to declare what type of parameters the function accepts. You can add return type annotations to the function as well.

Parameter type annotations go after the parameter name. Return type annotations appear after the parameter list.

PARAMETER TYPE ANNOTATIONS:

Take a look at the following code:

const add = (a: number, b: number) => {
  return a + b;
};

console.log(add(1, 2));

In the above code, we declare an add function that accepts parameters a and b that is of type number.

So, if you try to break the rule and pass string instead of the number, you will get a compilation error as follows:

Also, if you try to add parameters more than what a function is accepting, you will get a compilation error, unlike JavaScript.

RETURN TYPE ANNOTATIONS:

Although we usually don’t need a return type annotation because TypeScript will infer the function’s return type based on its return statement. In some cases, you have to explicitly specify a return type for documentation purposes to prevent accidental changes or just for personal preference.

const returnANumber = (): number => {
  return 1;
};

Here, we are specifying that the returnANumber will return a value with a type number.

Now, if you specify the return type but don't return a value with valid type, TypeScript will throw a compilation error as follows:

IDE SUPPORT FOR RETURN TYPE:

The advantage of knowing the return type of a function is you get great IDE support if you want to do more operations on the value that is being returned.

For example,

let parseRange = (
  range: string
): {
  start: number;
  end: number;
} => {
  let [start, end] = range.split("-");
  return {
    start: parseInt(start),
    end: parseInt(end),
  };
};

let parsedData = parseRange("1-5");

In the above example, we have explicitly mentioned the return type of the parseRange function. However, even if we don't specify the return type, TypeScript will infer the return type for us.

If we try to access the start or end keys on the parsedDate variable, we will get autosuggestion from an IDE because TypeScript knows the return type of the parseRange function.

void RETURN TYPE:

Similar to languages like Java, void is used when there is no data. For example, if a function does not return any value then you can specify void as a return type or let TypeScript infer the return type as void.

const helloWorld = () => {
  console.log("Hello World");
};

let sayHello = helloWorld();

console.log(sayHello); // this will print undefined

You will get a compilation error if you attempt to return any value other than void after specifying void as a return type for that function:

You can only return undefined if you specify void as the return type. The following image shows valid and invalid return statements for a function with the return type of void.

Remember the Rule: "void is the return type of a function/method that doesn’t explicitly return anything".

When no return statement is provided and no explicit return type is specified in the function or method, it infers a void return type automatically.

FUNCTION AS A TYPE:

It is possible to assign a type to a variable that we want to use as a function with a specific parameter and return type. Here's how to declare one:

let add: (a: number, b: number) => number;

add = (a: number, b: number) => {
  return a + b;
};

In the above code, we are declaring a variable add and have assigned a type (a: number, b: number) => number (This is not an arrow function or a function declaration. Here, the left side of the => are the parameters that the function expects and the right side of the => is the return type of that function)

Using the add the variable we declared earlier, we can assign a function to it as a value.

TypeScript will throw an error stating that this variable only allows two parameters if we try to add another.

PASS Function AS A PARAMETER:

Take a look at the following code:

const sendMessage = (cb: (a: string) => void) => {
  cb("Hello, World");
};

sendMessage((str)=>{
  console.log(str);
});

Here, the sendMessage function has a parameter named cb (callback function) with one parameter named a, of type string, that has no return value, since the function has been declared to have a return type of void.

Even if you return anything inside a callback, TypeScript won't throw a compilation error, instead, it will ignore it.

DECLARE Function TYPE INSIDE AN object:

Earlier, we discussed the concept of an object type, which can hold a collection of different types. You can assign a function type to any of its keys.

GENERAL SYNTAX:

Take a look at the following code:

const person: {
  name: string;
  age: number;
  sayHi(): void;
} = {
  name: "Max",
  age: 30,
  sayHi: () => {
    console.log("Hi");
  },
};

In the above code, we have a person object with a key named say, and it is a function that returns nothing.

The following is a general way of defining a function type. The other way to declare a function in an object is with the property syntax.

PROPERTY SYNTAX:

The sayHi key in the above example can be declared in property syntax, which is more commonly used and readable.

const person: {
  name: string;
  age: number;
  sayHi: () => void;
} = {
  name: "Max",
  age: 30,
  sayHi: () => {
    console.log("Hi");
  },
};

The logic remains the same but this is a more readable and preferred format of assigning a function type.

unknown TYPE:

unknown is not commonly used but it can be helpful to be aware of it.

WHY USE unknown INSTEAD OF any:

unknown and any are similar to some extent but unknown is a bit more restrictive than any. To understand this take a look at the following code:

let userInput: unknown;
let userName: string;

userInput = 5;
userInput = "John";

In the above code, we are having userInput which is having types as unknown and userName with type string

Now, you can assign any value to the variable with the type unknown. So you won't get any compilation errors for assigning 5 and "John" to variable userInput.

But what happens if you try to assign userInput to userName?

let userInput: unknown;
let userName: string;

userInput = 5;
userInput = "Max";

userName = userInput; // This line will throw an error

It says Type 'unknown' is not assignable to type 'string even though string has already been assigned one line before.

Since the unknown type can only be assigned to any type and the unknown type itself, it can never be assigned to another type.

USE TYPE GUARDS TO AVOID ERRORS:

Adding type guards to the above code will allow it to work, as we saw in previous blogs.

let userInput: unknown;
let userName: string;

userInput = 5;
userInput = "Max";

if (typeof userInput === "string") {
  userName = userInput;
}

In the above code, we are only assigning userInput to userName only if userInput has a string type value.

DIFFERENCE BETWEEN unknown AND any:

What happens when you change the type of userInput from unknown to any?

let userInput: any;
let userName: string;

userInput = 5;
userInput = "Max";

userName = userInput; // compile without an error

The main difference between unknown and any is that unknown is much less permissive. We must perform some form of checking before performing most operations on values of type unknown, but we do not have to perform any checks before performing operations on values of type any.

never TYPE:

As the type name suggests, never refers to a function that will never return a value, not even an undefined or a null value.

DIFFERENCE BETWEEN never AND void:

• The main difference between never and void is that void simply returns undefined if you try to access the return value from a function with void return type.

• However, the function that returns never will cause the code to crash, and the code would not be executed further.

EXAMPLE 1 - FUNCTION THAT THROWS AN ERROR:

Generally, when we throw an error from any function, its return type is inferred to be never. Let's take a look at the following function:

const generateError = (message: string, code: number): never => {
  throw {
    message,
    code,
  };
};

const returnedValue = generateError("Something went wrong!", 500);
console.log(returnedValue);

We are throwing an error whenever we call the above function. This is what we see in the console:

We got the error we threw, but we didn't get any output from console.log(returnedValue), not even undefined. It indicates that a function with a return type never caused the script to crash.

EXAMPLE 2 - INFINITE LOOP:

Another type of function that returns never is the one with an infinite while loop.

const infiniteLoop = () => {
  while (true) {}
};

const returnedValue = infiniteLoop();
console.log(returnedValue);

In the above function, the infiniteLoop the function runs continuously, which breaks the script. If you hover over the infiniteLoop function, you'll see that TypeScript has inferred the return type as never.

CONCLUSION:

• In TypeScript, functions are the building blocks of applications. In this article, we learned how to build type-safe functions using TypeScript, different types of annotations, how to use functions as types, and the concept of unknown and never types.

• Having this knowledge will allow for more type-safe and easy-to-maintain functions throughout your code.

Make sure to subscribe to our newsletter on https://blog.wajeshubham.in and never miss any upcoming articles related to TypeScript and programming just like this one.

I hope this post will help you in your journey. Keep learning!

My Website, connect with me on LinkedIn and GitHub.

WHAT IS TYPESCRIPT?

TypeScript is an open-source Object Oriented Programming language developed and maintained by Microsoft.

TypeScript is a strongly typed language. It is a superset of JavaScript, which means anything that is implemented in JavaScript can be implemented using TypeScript along with the enhanced features provided by TypeScript.

As TypeScript code is converted to JavaScript code which makes it easier to integrate into JavaScript projects. It is designed mainly for large-scale projects.

TypeScript is a primary language for the Angular framework. Angular is an open-source web application framework maintained by the Angular Team at Google.

Why do we use TypeScript?

1. Static type checking: Like other high-level programming languages like JAVA, TypeScript does provide static type checking which requires some extra code but it has its advantages.

2. Classes and Interfaces: TypeScript supports Classes that provide the ability to use object-oriented programming in our applications. It also provides encapsulation, inheritance, and access modifiers that JavaScript can't offer (In 2015 with ECMA script 6 classes have been introduced but we can't use access modifiers in them unlike TypeScript).

3. Better developer experience: TypeScript code is documentation in itself. Because modern IDEs support TypeScript autosuggestions which is a great tool to develop apps at a faster pace and with fewer bugs.

4. Runs everywhere: TypeScript is technically just JavaScript with enhanced tools. Thus, if you are writing code using TypeScript, it will be converted to JavaScript. It can be used for both front-end development (React, Angular) and back-end development (Node.js).

DIFFERENCE BETWEEN TYPESCRIPT AND JAVASCRIPT

• TypeScript is known as an Object-oriented programming language whereas JavaScript is a scripting language.

• TypeScript has a feature known as Static typing but JavaScript does not have this feature.

• TypeScript has an Interface but JavaScript does not have an Interface.

• TypeScript provides compile-time safety (You will get possible errors while writing code) but JavaScript does not provide compile-time safety (JavaScript throws runtime errors which we can prevent using TypeScript).

REQUIRED TOOLS:

Here is a list of recommended tools that will assist you in getting the most out of TypeScript:

1. VS Code (Install VS Code from https://code.visualstudio.com/) (Since Microsoft maintains TypeScript and VS Code, I believe there is no IDE that provides better support for TypeScript than VS Code.)

2. Node.JS (Install node from https://nodejs.org)

3. NPM

INSTALLATION:

Run the following command in your terminal (make sure to run it as an administrator) to install TypeScript globally

npm install -g typescript

Once done run the following command to check if TypeScript is installed on your machine

npx tsc

As long as you are getting the version number and some common commands you are good to go!

LET'S SET UP A PROJECT:

Open a folder in VS code and create index.html and index.ts files in it.

Now run the following command to initialize a project.

npm init
# it will ask some questions just hit enter with default options

It will create a package.json file in your root folder

EXTENSION FOR VS CODE USERS:

If you're using VS Code, you can use an extension called live server (published by Ritwick Dey) to have the browser automatically refresh when you save your changes.

Select Extensions > Search for "live server" and then install the first extension written by Ritwick Dey.

PACKAGE FOR NON VS CODE USERS

Run the following command to install a required package:

npm install --save-dev lite-server

This will install live-server as a dev dependency (we only need this for development)

Add a start script to start the project. In package.json inside scripts add the following line:

...
 "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
...

If you do not use the live server extension, you have to start the lite-server using the following command:

npm start

FIRST TYPESCRIPT CODE:

Add the following code to your index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Typescript intro</title>
  </head>
  <body>
    <div id="root">
        <p>Hello...</p>
    </div>
    <script src="./index.js"></script> 
  </body>
</html>

Add the following code to the index.ts file to check if our setup is working:

console.log("Hello world!")

To run the live server go to index.html > right-click and select Open with the live server option. It will start a local server that will serve our index.html file.

For lite-server users run npm start and you are good to go.

Please run the following command to compile our index.ts into index.js since, as I mentioned earlier, our browser only knows JavaScript, so we must compile our TypeScript code into JavaScript.

tsc index.ts -w

tsc is a high-level compiler that outputs a JavaScript file, .js, from a TypeScript file, .ts. As a result of the above command, an index.js file is created in the root directory, which is linked in the index.html file using the script tag.

-w flag in the above command indicates watch mode. The above command will automatically compile the .ts file whenever you make any changes and save the file.

Open the browser and you should see Hello World printed in your browser console.

To confirm it's working, change the index.ts file, and write console.log(Hello World...) in it, and save the file.

Open the browser, and you should see Hello World... printed in your browser console without reloading.

CORE BASIC TYPES IN TYPESCRIPT:

TypeScript has some basic and core types that JavaScript understands as well. These includes:

- number // 1, 2, 3
- string // "Hello", "World"
- object // {name: "John", age: 30}
- boolean // true, false

TypeScript also has a type called Array. However, it is a generic type and is a bit of an advanced topic that we will discuss more in-depth in future blogs.

TYPESCRIPT SYNTAX AND SOME EXAMPLES:

number, string and boolean TYPES IN TYPESCRIPT:

Let's write some code to understand the above types.

const a: number = 5; 
const b: string = "hello world";
const c: boolean = true;

Here's how we declare a variable in TypeScript. Here, a is the name of the variable, number is the type of that variable, and 5 is its value.

TYPE INFERENCE:

In the above example, you can omit the : number, : string, or : boolean part since TypeScript automatically infers the type of that variable based on the value you are assigning. That's called Type inference.**

Take a look at the following function, it adds two numbers and returns a sum:

// num1 is a type of number and :number before => mark is the return type of that number
// but typescript detects return type of function automatically most of the time
const add = (num1: number, num2: number):number => {
  return num1 + num2;
};

console.log("ANSWER: ", add(1, 2));

Save the file. Ensure that your tsc index.ts -w command is running. You should now see ANSWER: 3 in the console in your browser.

Now in the above add function 1st argument num1 is inferred to type number same for num2. We are adding two numbers, and everything is working fine.

Here, in the add function, the first argument num1 is inferred to be of type number, and the same for num2. We are adding two numbers, and everything is working fine.

Let's see what happens if we pass a string in the add function.

We get a compilation error from TypeScript. You can see this in the above image. In JavaScript, you won't get that error. Instead, you will get strange behavior, and it will print ANSWER: HELLO2 in the console. Because JavaScript converts num2 to a string and concatenates it with HELLO which is unwanted behavior.

TypeScript throws a compilation error. This can be seen in the image above. JavaScript will not throw this error. In this case, you will see abnormal behavior and it will display ANSWER: HELLO2 in the console because JavaScript converts num2 to a string and concatenates that string with HELLO, which is unintended.

It could happen when you are getting value from user input from which you are expecting a number but it's returning a value in string format so if you pass "2" and "3" to the above add function in JavaScript it will return 23.

You may encounter this issue when you receive input from the user and expect a number but it's returning a value in string format. For example, if you pass "2" and "3" to the above add function in JavaScript, it will return 23.

Let's write a function to understand more.

const concatenateAndConvertToUppercase = (a: string, b: string) => {
    let uppercaseA = a.toUpperCase();
    let uppercaseB = b.toUpperCase();
    return uppercaseA + uppercaseB;
};

console.log(concatenateAndConvertToUppercase('hello', 'world'));

In addition, when you assign a type to a variable or argument, your IDE shows related methods for that type.

The example above shows that the variables a and b have been assigned the type string. The IDE picks it up and displays all the methods a string can have as follows:

This is why type assignments are important as they prevent runtime errors, and unpredictable behavior, and speed up the development process.

CONFIGURE TYPESCRIPT:

In a real-world project, when you are using TypeScript with something like React or Angular, you will have a tsconfig.json file that you can use to set up TypeScript compilation rules.

tsconfig.json file is an indicator that the directory is the root of the TypeScript project.

Run the following command to initialize a tsconfog.json file:

tsc --init

It will create a tsconfig.json file in the root directory with some default options.

If you remember we were running tsc index.ts -w to compile our index.ts into index.js, which means we can only compile one file at a time, which is not feasible.

Therefore, once you have added tsconfig.json you can run the following command, which will compile all the .ts files into equivalent .js files.

tsc -w

To test this, add the app.ts file in the root folder and add the following code:

console.log("This is app.ts file");

Now, run tsc -w it will generate two files index.js and app.js.

UNDERSTANDING tsconfig.json:

What makes this new tsconfig.json stand out is how well-documented all the options are. All the options are quite self-explanatory. Despite this, you may not have to use all of these options for most projects.

Let's take a look at the most important and widely used options:

target: This tells TypeScript the version of JavaScript it should compile into. By default, it is set to JS version ES2016, which means that TypeScript code will be compiled into JS version ES2016.

lib: It provides libraries that we want to make available to TypeScript globally. It is commented by default and contains some default values. DOM, ES2016, DOM.Iterable, and ScriptHost are the default libraries. When you uncomment that and check out index.ts, it will throw an error Cannot find the name 'console' since the DOM is not included in the library.

jsx: This is related to ReactJs. Controls how JSX constructs are emitted in JavaScript files.

experimentalDecorators: This will allow the use of decorators in your TypeScript file. We will take a look into what decorators are and how to use them in future blogs.

sourceMap: It helps us in debugging because it creates a .js.map file. It is a bridge by which you can debug your TypeScript files in the browser's dev tools.

allowJs: If you enable this the JavaScript files will also get compiled along with TypeScript files.

rootDir: As the name suggests, it shows the path to your root folder or where your TypeScript files are located.

outDir: It shows where you want to keep your compiled JavaScript files. Currently, after compilation, our .ts and .js files are getting stored in the root directory. Let's configure outDir to understand the concept.

Uncomment outDir from tsconfig.json:

...
"outDir": "./dist", 
...

Now delete index.js and app.js files from the root directory and run the following command:

tsc -w

The dist folder will be created in the root directory. This folder will contain all of your .js files as you can see in the following image.

To get the output on the browser, we need to update index.html to match the new location of .js files. Change the index.html file as follows:

...
 <body>
    <div id="root">Hello....</div>
    <script src="./dist/index.js"></script>
  </body>
...

• removeComments: This will remove all the comments from compiled .js files that you have added in .ts files

• noEmit: It will restrict the generation of compiled .js files.

• noEmitOnError: This will avoid generating compiled .js files if your .ts file has an error in it.

• strict: It enables all strict type-checking options. If you set this to false you will lose all the powers of TypeScript.

• noImplicitAny: This shows an error when we don't give a type to unassigned parameters. Let's see an example:

Take a look at the following image:

There is no type assigned to the data parameter in the above code, which could result in unexpected behavior if the code is complex.

• strictNullChecks: It tells TypeScript that shows a warning when any value which possibly is null. Let's take an example:

In index.html add button tag with id my-btn:

...
 <body>
    <div id="root">
      <button id="my-btn">Click me</button>
    </div>
    <script src="./dist/index.js"></script>
  </body>
...

Now, let's access this button in the index.ts file:

let btn = document.getElementById('my-btn');

btn.addEventListener('click', () => {
  console.log('Clicked');
});

If you notice TypeScript will throw an error for Object is possibly null, which means the btn variable might be null, and you could receive a runtime error saying Cannot read property addEventListener of "null".

We know as a developer that button with id my-btn exists. To make the above code work, you have to do the following:

let btn = document.getElementById("my-btn")! as HTMLButtonElement;

btn.addEventListener("click", () => {
  console.log("Clicked");
});

In this case, we are telling TypeScript that you will get a button with the id my-btn. Consider this variable as an HTMLButtonElement. As we will discover in future blogs, this is called "type casting".

• noUnusedLocals: This option will show a warning if any unused variables are declared but never used.

• noUnusedParameters: This option will show a warning if any unused function parameters are declared but never used.

• noImplicitReturns: TypeScript will throw an error if your function has a conditional return. Take a look at the following code:

If you are returning anything, you must return a value after the conditional return statement. Therefore, you need to add a return outside the if block as follows:

Other options are a bit on the advanced side and need more knowledge about TypeScript. We will cover those in future blogs.

CONCLUSION:

• TypeScript brings a lot of benefits to our productivity and developer experience. It is not unique to Angular, other powerful frontend frameworks such as React and Vue are starting to be used with TypeScript to allow developer teams to create applications that are reliable, sustainable, and scalable.

• JavaScript and TypeScript are continually evolving but not competing against each other. Typescript was created to complement and enhance JavaScript - not to replace it. The future may see them becoming very similar in features but with TypeScript remaining the statically-typed alternative.

• With this TypeScript introduction, we’ve just scratched the surface of all the amazing things that we can do with TypeScript.

Also, Make sure to subscribe to our newsletter on https://blog.wajeshubham.in and never miss any upcoming articles related to TypeScript and programming just like this one.

I hope this post will help you in your journey. Keep learning!

My Website, connect with me on LinkedIn and GitHub.