Slides from AmsterdamJS meetup talk on December 12, 2019

1. SOLID
PRINCIPLES
WITH
TYPESCRIPT
EXAMPLES

2. ANDREW NESTER
Software Engineer

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

4. BUT WHY?

5. MORE UNDERSTANDABLE CODE DESIGNS

6. EASIER TO MAINTAIN

7. EASIER TO EXTEND

8. SINGLE RESPONSIBILITY
DO ONE AND ONLY ONE THING
BUT DO IT WELL

9. 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() {/* ... */}
}

10. DIFFICULT TO MAINTAIN

11. LOTS OF REASONS TO CHANGE

12. CASCADE CHANGES

13. 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(){}
}

14. OPEN - CLOSED
FEEL FREE TO EXTEND BUT
DO NOT MODIFY

15. 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 {}
}

16. DIFFICULT TO EXTEND

17. DIFFICULT TO REUSE

18. NEED TO CHANGE
ORDERCALCULATOR
IF NEW TYPE OF ORDERS APPEAR

19. 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 {}
}

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

21. 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);
}
}
}

22. ACTUALLY NOTHING IS WRONG WITH IT

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

24. FREEORDER BREAKS ORDERCOLLECTOR

25. FREEORDER IS NOT “REAL” SUBCLASS

26. INHERITANCE SHOULD BE DEFINED BASED
ON BEHAVIOUR

27. BETTER CODE
abstract class ItemList {
protected items: Item[] = [];
public getItems() {
return this.items;
}
}
class Order extends ItemList {
public addItem(item: Item) {
this.items.push(item);
}
}
class FreeOrder extends ItemList {
public addItem(item: FreeItem) {
this.items.push(item);
}
}

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

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

30. DIFFICULT TO REUSE

31. INTERFACE IS TOO BIG TO IMPLEMENT

32. POTENTIAL VIOLATION OF
SINGLE RESPONSIBILITY
AND
LISKOV SUBSTITUTION
PRINCIPLES.

33. 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);
}

34. DEPENDENCY INVERSION
DEPEND ON ABSTRACTION NOT
IMPLEMENTATION

35. 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?

36. LESS FLEXIBLE

37. DIFFICULT TO WRITE UNIT TESTS

38. YOUR TEAMMATES WILL NOT
APPROVE THIS CODE

39. 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){/*...*/}
}

40. AFTERWORD

41. SOLID
is not panacea

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

43. Focus on code complexity management,
do not overcomplicate your code

44. THANKS!