In this tutorial, we will learn about TypeScript Interfaces.Properties and functions that an object must have are specified by an interface. For instance, all objects that implement this interface must have the two properties “make” and “name,” which are defined for the interface ICar.
Only properties and function signatures can be defined in the TypeScript interface. We do not provide any kind of implementation. An object which implements this interface has the responsibility for providing implementation.
Interface Syntax
interface interfaceName {
propName1: number;
propName2: string;
func1(): void;
func2(par1: number): string;
}A TypeScript interface is start with ‘interface’ keyword. In the above example, we have defined two properties and two functions in an interface.
TypeScript Interface Example
interface IEmployee {
id: number;
firstName: string;
lastName: string;
printName(): void;
}
class Employee implements IEmployee {
id: number;
firstName: string;
lastName: string;
printName = () => console.log(this.lastName + ", " + this.firstName);
}
var emp = new Employee();
emp.firstName = "Michael";
emp.lastName = "Yarbrough";
emp.printName(); //print 'Yarbrough, Michael'In above example, we have defined an interface IEmployee. This interface has three properties ‘id’, ‘firstName’, ‘lastName’ and one function named ‘printName’. Note the syntax of printName function, it has no implementation. We have defined only function name and return type.
We have implemented IEmployee interface in Employee class by using ‘implements’ keyword after class name. Employee class has all three properties of interface and with the same data types and one function printName with same signature and with implementation. If we try to differ the data types of properties or signature of method from IEmployee interface in Employee class, then TypeScript compiler will throw an error.
Interface Optional Properties
TypeScript interface provides a distinct feature to define optional properties. An object which implements this interface need not to define these properties. This feature differentiate TypeScript interface with other OOPS languages interfaces like C# in which all members must be implement by class.
Below is an example of optional properties in TypeScript interface.interface
interface IEmployee {
id: number;
firstName: string;
lastName: string;
age?: number;
address?: string;
}
class Employee implements IEmployee {
id: number;
firstName: string;
lastName: string;
}
class Manager implements IEmployee {
id: number;
firstName: string;
lastName: string;
age: number;
address: string;
}In above interface, we have defined age and address as optional properties by adding “?” after the property name. In class Employee we have not defined age and address properties. Manager class has defined both age and address optional properties.
ReadOnly Properties
ReadOnly properties are allowed for one time initialization and can only be modified during declaration time or in constructor. If we want to change these later, TypeScript compiler will throw an error.
Below is the example of TypeScript ReadOnly properties:
interface IShape {
readonly width: number;
readonly height: number;
}
class Rectangle implements IShape {
readonly width: number;
readonly height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
}
var rect: Rectangle = new Rectangle(40, 50);
rect.width = 99; //Error: (TS) Cannot assign to 'width' because it is a constant or a read-only property.In above example, we have declared an interface IShape with two readonly properties ‘width’ and ‘height’. Rectangle class implements this interface and declares these two properties as readonly. In second last line, we declared a rect variable and assign a new Rectangle with width and height properties value using constructor. In last line, we try to change the value of width property but TypeScript compile throw an error.
Optional Functions
Just line optional properties, we can also use optional functions in TypeScript interface. Syntax is same as optional properties. Below is the example:
interface IShape {
readonly width: number;
readonly height: number;
calculateArea?: () => number;
}
class Rectangle implements IShape {
readonly width: number;
readonly height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
}
class Square implements IShape {
readonly width: number;
readonly height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
calculateArea = ():number => (this.width * this.height);
}In line 5, we declared an interface with optional function named ‘calculateArea’. Rectangle class has not declared this optional function. Shape class has declared ‘calcuateArea’ function.
Interface Inheritance
A TypeScript interface can inherit from other interfaces. Derived interface inherits all properties and functions of base interface. All classes which implement this interface must declare all properties and function of base and derived interfaces.
interface IParent1 {
var1: number;
}
interface IParent2 extends IParent1 {
var2: string;
}
class DerivedClass implements IParent2 {
var1: number;
var2: string;
}Interface IParent2 inherits from IParent1 interface. For inheritance we used ‘extends’ keyword. In above example, DerivedClass implements both IParent1 and IParent2 properties.
Multiple Inheritance
A single interface can inherit from multiple interfaces. A derived class must implement derive interface and all base interfaces properties and functions. Below is the example:
interface IParent1 {
var1: number;
}
interface IParent2 extends IParent1 {
var2: string;
}
interface IParent3 extends IParent2, IParent1 {
var3: string;
}Summary
A TypeScript interface defines what members an object must have. All classes which implement interface must declare all members of the interface. An interface can specify optional, readonly properties and optional functions. An interface can inherit from multiple interfaces.