SOLID : Interface Segregation
Tags: programming, typescript, architecture
Published: 2022-09-13 15:31:12

Interface Segregation defines like this

> Clients should not be forced to implement any methods they don't use

In other word, it's like client(child) says

> 😩😩 For what I need to implement this one??? I don't need it

We have to prevent this client's(child's) complaint asap !!

## 👎 Bad code
set **Animal Interface**
then create **Dog class** and **Fish class** 

```typescript
interface IAnimal {
  fly: () => void
  run: () => void
  swim: () => void
}

class Dog implements IAnimal {
  // 😩😩😩 For what I need to implement it....
  fly() {
    null
  }
  run() {
    console.log('running!!!!')
  }
  swim() {
    console.log('swim!!! not so fast though')
  }
}

class Fish implements IAnimal {
  fly() {
    console.log('fly... a little?')
  }
  // 😩😩😩 For what I need to implement it....
  run() {
    null
  }
  swim() {
    console.log('swim!! soooooooo fast!!!!!!!!!!')
  }
}

```

As you can see in this code, classes complains **For what I need to implement it...**
because **dog doesn't fly**, **fish doesn't run** !!

## 👍 Good code
```typescript
// ⭐ divide interface !
interface IAnimalFly {
  fly: () => void
}

interface IAnimalRun {
  run: () => void
}

interface IAnimalSwim {
  swim: () => void
}

class Dog implements IAnimalRun, IAnimalSwim{
  run() {
    console.log('dos runs !!')
  }
  swim() {
    console.log('dos swims, not so fast though')
  }
  // ⭐ Dog doesn't need to implement fly()
}

class Fish implements IAnimalFly, IAnimalSwim {
  fly() {
    console.log('fish fies... a little?')
  }
  swim() {
    console.log('fish swims so fast !!!!!')
  }
  // Fish doesn't need to implement run()
}
```

Thanks for dividing interface, Dog and Fish finally don't complain at all ↓

> For what I need to implement this one??? I don't need it

Btw in article **Liskof substitute** is also **dividing interface** was important key.
Architecture of interface would be important in SOLID principle, I think

## 💎 For frontend engineer
I found good sample about interface segregation for frontend engineer, so Im gonna show it as well

## 👎 Bad code
There is Diary app, at first set `type Diary`, then make `updateDiaryTitle` function
```typescript
export type Diary = {
  id: string;
  title: string;
  content: string;
  createdAt: Date;
  updatedAt: Date;
};

const updateDiaryTitle = async (
  // ⭐ here get Diary object
  diary: Diary,
  updateTitle: (props: {id: string, title: string}) => Promise<void>
): Promise<void> => {
  // fetch data from server
  await updateTitle({ id: task.id, title: task.title });
};
```

There is a problem now, if someone change `Diary type` like this

```typescript
type Diary = {
  id: string;
  diaryInfo: {
    // ⭐ title is inside diaryInfo now !!
    title: string;
    details: string;
  },
  createdAt: Date;
  updatedAt: Date;
};
```

get a error because of it

```typescript
const updateDiaryTitle = async (
  diary: Diary,
  updateTitle: (props: {id: string, title: string}) => Promise<void>
): Promise<void> => {
  await updateTitle({ id: task.id, title: task.title });
  // => 🔥🔥🔥 Property 'title' does not exist on type 'Diary'.
};
```

We need to modify `updateDiaryTitle`, but it shouldn't depend on `Diary` type. So good code would be like this

## 👍 Good code
```typescript
const updateDiaryTitle = async (
  // ⭐⭐⭐ get "id" and "title" directly
  diary: {id: string, title: string},
  updateTitle: (props: {id: string, title: string}) => Promise<void>
): Promise<void> => {
  await updateTitle({ id: diary.id, title: diary.title });
};
```
get `id` and `diary` directly, then you clearly know which property should you use in `updateDiaryTitle` function

then when you implement or modify `updateDiaryTitle`, you don't need to care about `Diary` type at all.

Absolutely you have seen and will see all the time when you pass props to child in **React.js** or **Vue.js** 😀 I hope you are going to use this principle effectively someday 👍

---

ref
https://kanoe.dev/blog/interface-segregation-principle/
https://www.youtube.com/watch?v=JVWZR23B_iE
[japanese blog](https://www.membersedge.co.jp/blog/typescript-solid-interface-segregation-principle/#:~:text=%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9%E5%88%86%E9%9B%A2%E3%81%AE%E5%8E%9F%E5%89%87%E3%81%A8%E3%81%AF%E3%80%81%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%EF%BC%88%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9,%E3%81%A7%E3%81%82%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E5%8E%9F%E5%89%87%E3%81%A7%E3%81%99%E3%80%82)