SOLID principles with Typescript examples

SOLID
PRINCIPLES
WITH
TYPESCRIPT
EXAMPLES

ANDREW NESTER
Software Engineer

WHAT IS SOLID?
SINGLE RESPONSIBILITY
OPEN - CLOSED
LISKOV SUBSTITUTION
INTERFACE SEGREGATION
DEPENDENCY INVERSION

MORE UNDERSTANDABLE CODE DESIGNS

DO ONE AND ONLY ONE THING
BUT DO IT WELL

WHAT IS WRONG?
class Order {
public calculateTotalSum() {/* ... */ }
public getItems() {/* ... */ }
public getItemCount() {/* ... */ }
public addItem(item: Item) {/* ... */ }
public removeItem(item: Item) {/* ... */ }
public printOrder() {/* ... */ }
public showOrder() {/* ... */ }
public load() {/* ... */ }
public save() {/* ... */ }
public update() {/* ... */ }
public delete() {/* ... */}
}

BETTER CODE
class Order
{
public calculateTotalSum() {/*...*/}
public getItems() {/*...*/}
public getItemCount() {/*...*/}
public addItem(item: Item) {/*...*/}
public deleteItem(item: Item) {/*...*/}
}
class OrderRepository
{
public load(){}
public save(){}
public update(){}
public delete(){}
}
class OrderViewer
{
public printOrder(){}
public showOrder(){}
}

OPEN - CLOSED
FEEL FREE TO EXTEND BUT
DO NOT MODIFY

WHAT IS WRONG?
class OrderCalculator
{
public calculate(orders): number {
let sum = 0;
for (let order of orders) {
if (order instanceof SingleOrder) {
sum += this.calculateSingle(order);
}
if (order instanceof MultiOrder) {
sum += this.calculateMulti(order);
}
}
return sum;
}
private calculateSingle(order: SingleOrder): number {}
private calculateMulti(order: MultiOrder): number {}
}

NEED TO CHANGE
ORDERCALCULATOR
IF NEW TYPE OF ORDERS APPEAR

BETTER CODE
class OrderCalculator {
public calculate(orders: OrderInterface[]){
let sum = 0;
for (let order of orders) {
sum += order.calculate();
}
return sum;
}
}
interface OrderInterface {
calculate(): number;
}
class SingleOrder implements OrderInterface {
calculate(): number {}
}
class MultiOrder implements OrderInterface {
calculate(): number {}
}

LISKOV SUBSTITUTION
IF YOU USE BASE TYPE
YOU SHOULD BE ABLE TO USE SUBTYPES
AND DO NOT BREAK ANYTHING

WHAT IS WRONG?
class Order {
protected items: Item[] = [];
public addItem(item: Item) {
this.items.push(item);
}
public getItems() {
return this.items;
}
}
class OrderCollector {
public collect(order: Order, items: Item[]) {
for (let item of items) {
order.addItem(item);
}
}
}

ACTUALLY NOTHING IS WRONG WITH IT

WHAT IS WRONG?
class Order {
}
public getItems() {
return this.items;
}
}
class FreeOrder extends Order {
if (item.price() !== 0) {
throw new Error();
}
}
}
class OrderCollector {
public collect(order: Order, items: Item[]) {
for (let item of items) {
order.addItem(item);
}
}
}

FREEORDER BREAKS ORDERCOLLECTOR

FREEORDER IS NOT “REAL” SUBCLASS

INHERITANCE SHOULD BE DEFINED BASED
ON BEHAVIOUR

BETTER CODE
abstract class ItemList {
public getItems() {
return this.items;
}
}
class Order extends ItemList {
}
}
class FreeOrder extends ItemList {
public addItem(item: FreeItem) {
}
}

INTERFACE SEGREGATION
SEVERAL SPECIALISED
INTERFACES ARE BETTER THAN
1 ALL-PURPOSE ONE

WHAT IS WRONG?
interface ItemInterface
{
applyDiscount(discount: number);
applyPromocode(promocode: string);
setColor(color: string);
setSize(size: Size);
setCondition(condition: Condition);
setPrice(price: number);
}

INTERFACE IS TOO BIG TO IMPLEMENT

POTENTIAL VIOLATION OF
AND
LISKOV SUBSTITUTION
PRINCIPLES.

BETTER CODE
interface ItemInterface
{
setCondition(condition: Condition);
setPrice(price: number);
}
interface ClothesInterface
{
setColor(color: string);
setSize(size: Size);
setMaterial(material: string);
}
interface DiscountableInterface
{
applyDiscount(discount: number);
applyPromocode(promocode: string);
}

DEPENDENCY INVERSION
DEPEND ON ABSTRACTION NOT
IMPLEMENTATION

class Customer {
private currentOrder: Order = null;
public buyItems() {
if (!this.currentOrder) {
return false;
}
const processor = new OrderProcessor();
return processor.checkout(this.currentOrder);
}
}
class OrderProcessor {
public function checkout(order: Order){/*...*/}
}
WHAT IS WRONG?

YOUR TEAMMATES WILL NOT
APPROVE THIS CODE

BETTER CODE
class Customer {
private currentOrder: Order = null;
public buyItems(processor: OrderProcessorInterface) {
if(!this.currentOrder) {
return false;
}
return processor.checkout(this.currentOrder);
}
}
interface OrderProcessorInterface {
checkout(order: Order);
}
class OrderProcessor implements OrderProcessorInterface {
public checkout(order: Order){/*...*/}
}

“All problems in computer science
can be solved by another level of
indirection except for the problem of
too many layers of indirection”

Focus on code complexity management,
do not overcomplicate your code

SOLID principles with Typescript examples

More Related Content

What's hot

Similar to SOLID principles with Typescript examples

Recently uploaded

SOLID principles with Typescript examples