Interface Segregation Principle

Make fine grained interfaces that are client (component) specific. Clients should not be forced to implement interfaces they don’t use.
— Uncle Bob AKA Robert C. Martin

If all the properties of interface isn’t being used in a component then that large interface can be broken in smaller interfaces and those smaller interfaces can be used in another component if required. For example :-

interface config {
color?: string;
width?: number;
height?: number;
}

function createSquare(config: config): { color: string; area: number } {
let newSquare = { color: “white”, area: 100 };
if (config.color) {
newSquare.color = config.color;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}

function createRectangle(config: config): { color: string; area: number } {
let newRectangle = { color: “white”, area: 100 };
if (config.color) {
newRectangle.color = config.color;
}
if (config.width) {
newRectangle.area = config.width * config.height;
}

return newRectangle;
}

let mySquare = createSquare({ color: “black”, width:30 });
console.log(mySquare)

let myRectangle = createRectangle({ color: “black”, width:30, height:30 });
console.log(myRectangle)

Here as we can see, height property of config interface is not required in createSquare function. But config interface is being used in createSquare function. So, In that createSquare function height is unnecessary extra parameter. It’s manageable in here but just imagine this same scenario in huge codebase. It’s totally mess having a large chunk of unnecessary data. It it better to avoid such casee using Interface segregetion principle. It better to write same code like :-

interface config {
color?: string;
width?: number;
}

interface extraParameter{
height?:number;
}

function createSquare(config: config): { color: string; area: number } {
let newSquare = { color: “white”, area: 100 };
if (config.color) {
newSquare.color = config.color;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}

function createRectangle(config: config, extraParameter: extraParameter): { color: string; area: number } {
let newRectangle = { color: “white”, area: 100, };
if (config.color) {
newRectangle.color = config.color;
}
if (config.width) {
newRectangle.area = config.width * extraParameter.height;
}

return newRectangle;
}

let mySquare = createSquare({ color: “black”, width:30 });
console.log(mySquare)

let myRectangle = createRectangle({ color: “black”, width:30 }, { height:30 });
console.log(myRectangle)

Here in this code snippet, as we can see we moved height parameter in another extra interface and using that property with help of extraParameter interface in createRectangle method only. Where that property is required.

This concludes interface segragetion principle. ‘I’ in SOLID.