Interface tutorial of TypeScript

Like the other popular object-oriented programming languages interface is a collection of related properties, But the interface does not initialize the property or implemented the property.

if we want to use a variable and if there are a lot of variables to pass through a function then we have to define all the types to get the proper value.
Sometimes it became difficult to handle that and if not define the type of the veriables then it will not provide proper results if we need strongly typed variables.

Example:

let fullName = (firstName:string, lastName:string) => {
	console.log('Full name is: ' + firstName + ' ' + lastName);
}
fullName('Code', 'Mystery');

Note: if we have to pass the age, contact number, email address, address etc then it will be little dificult to handle the function with passing so much values with its proper type.To solve that We could use interface in TypeScript

There is some limitation to using an object instead of an interface if we defined a number of property and they must have strongly typed then while passing through a function we must have to define the type of the variable while passing through a function else it can not be found during compilation.

Suppose we have to measure the square value of a rectangle then we have to pass the height and width of the rectangle. and the height and width must have to number in type.

But in the case of the object if we defined that and passed through a function then we also have to define the type of the variable else it will take the string or some other value also than a number like the below example.

let squerVal = (length) =>{
	var rac_height = length.height;
	var rac_width = length.width;
	console.log('Area of the rectacgle is: ' + rac_height*rac_width);
}

squerVal({
	height: 10,
	width: 'abcd'
});

Note: Here you can see I can also send some string data while we must have to send strongly number type values to get the proper result.

Now if there are a lot of variables to pass through the function then it will become very difficult to handle that and to resolve the type of variable issue we can use an interface in the type script.

Example

let squerVal = (length: {height:number, width:number} ) =>{
	var rac_height = length.height;
	var rac_width = length.width;
	console.log('Area of the rectacgle is: ' + rac_height*rac_width);
}

squerVal({
	height: 10,
	width: 20
});

Note: Here you can see also if have to pass a huge number of variables then it will be very dificult to hande the function.

To solve all the above issues we can use an interface in typescript, Now we are going to define an interface and the procedure is described below.

Now to define an interface, first, we have to write the interface than the interface name after providing space, and the first latter must have capital in nature, it’s a good practice theoretically. Then surrounded by curly brasses write some variable name with the type separated by a colon. and the variable must have to separate by a coma-like the below example and then you can use the interface as you are using an object.

Example:

interface LengthVal{
	height:number,
	width:number
}

let squerVal = (length: LengthVal) =>{
	var rac_height = length.height;
	var rac_width = length.width;
	console.log('Area of the rectacgle is: ' + rac_height*rac_width);
}

squerVal({
	height: 10,
	width: 20
});

Now if you want some variable which have to optional then in the interface provide a question mark after the variable name like below example:

interface LengthVal{
	height:number,
	width:number,
	depth?:number
}

let squerVal = (length: LengthVal) =>{
	var rac_height = length.height;
	var rac_width = length.width;
	console.log('Area of the rectacgle is: ' + rac_height*rac_width);

	if(length.depth){
		var rac_depth = length.depth;
		console.log('3D of the rectacgle is: ' + rac_height*rac_width*rac_depth);
	}
}

squerVal({
	height: 10,
	width: 20
});

Note after assigning the value width you can provide a depth or also if you don’t wish to provide you may not assign a value there. But have to remember after compilation when it will run on the browser will throw an error so inside the function where you are using that you must use some conditional logic to handle that.

Union Type interface:

Now if you needed a multiple type value in an interface then you have to provide all the types you want separate by pipe like the below example.

interface EmployeeVal{
	name:string,
	age:number,
	contact:number|string
}

let empDetails = (details: EmployeeVal) =>{
	var nm = length.name;
	var ag = length.age;
	var phone = length.contact;
	console.log('Name: ' + nm + ' Age: ' + ag + 'Phone: ' + phone);
}

empDetails({
	name: 10,
	age: 3,
	contact: '+91 9876543210'
});

Note: the contact type variable may be number also and typescript will not throw any error during compilation time.

Array Type Interface:

Now if you have to use an array in an inheritance then you have to rap with a square bracket, the array index with its type separated by a colon then after the closing square bracket again have to provide a colon, and then the array element type.

Example:

interface EmployeeVal{
	[index:number]:string
}

let empDetails = (names: EmployeeVal) =>{
	console.log(names);
}

empDetails({
	data:['aaa','bbb','ccc','ddd']
});

Inheritance of interfaces.

An interface can be inherited in another interface, Now there are two types of inheritance 1. Single or simple inheritance and multiple inheritances.

Single or simple inheritance of interface:

for that, you declare an interface name and then have to provide the keyword extends and then the name of the other interface name which has previously been declared.

Example:

interface EmployeeVal{
	first_name:string,
	last_name:string
}

 
interface EmployeeDetailse extends EmployeeVal{
	age:number,
	contact:number|string
}

Multiple Inheritance:

To declare multiple inheritances you have to declare an interface and then have to provide the keyword extend and then multiple names of interface separated by a comma.

Example:

interface EmployeeVal{
	first_name:string,
	last_name:string,
	emp_id:number
}


interface EmployeeLog{
	attandance:number
}
 
interface EmployeeDetailse extends EmployeeVal,EmployeeLog{
	age:number,
	contact:number|string
}