This is NOT Liskov Substitution Principle!
"Subclasses should be substitutable for their superclasses." I am not sure of the meaning of the above sentence, but I think it is the other way around.
From wikipedia: https://en.wikipedia.org/wiki/Liskov_substitution_principle
"if S is a subtype of T, then objects of type T may be replaced with objects of type S "
This means that if an algorithm works with T, it should work properly with S, where S is a subtype of T.
From here: https://www.oodesign.com/liskov-s-substitution-principle.html
The below code is a violation of Liskov Substitution Principle:
class Square extends Rectangle
{
public void setWidth(int width){
m_width = width;
m_height = width;
}
public void setHeight(int height){
m_width = height;
m_height = height;
}
}
This is because this algorithm will output the wrong Area:
Rectangle r = new Square();
r.setWidth(5);
r.setHeight(10);
// user knows that r it's a rectangle.
// It assumes that he's able to set the width and height as for the base class
System.out.println(r.getArea());
// now he's surprised to see that the area is 100 instead of 50.
In your example contentToShow is not a subtype of ModalHodler.
Using your example, a violation would be creating a specific ModalHolder that doesn't work properly with a JSX.Element as input. For example one that ignores the input and do something like contentToShow = document.querySelector('#modable')
In simple words: when you create concrete implementation of a "contract" (interface in TypeScript), the implementation should not break the contract rules. Or, in other words, the concrete implementation should work fine with all the users of the contract.
