在設計功能的時候，有時候要注意這個功能到底適不適合在這個元件擁有，以下就來看看簡單的範例。

定義

簡單來說就是，把不同功能的功能從介面中分離出來。

範例

這裡有一個形狀的介面：

1
2
3
4
interface Shape {
  area(): number;
  radius(): number;
}

眼尖的你有沒有發現radius放在Shape是一件很奇怪的事情呢？
為什麼形狀會有半徑？頂多只有邊長才對，半徑的特性應該是圓才對。
所以這邊必須要抽離出來：

1
2
3
4
5
6
7
8
interface Shape {
  render(): void;
  area(): number;
}

interface Circle extends Shape {
  radius(): number;
}

結束了，沒錯，就是這樣而已，很簡單吧！

應用於前端

不管在開發網頁時，是使用OOP或是FP，其實都可以適用這個概念在建構網頁容器。
你只需要保持注意，某些資訊是否是屬於這個元件，不該放的就不要放在這裡，抽離到其他元件去額外使用即可。