Functional Programming Concepts - Curry、Compose、Pipe

探討函數式編程中的 Curry、Compose、Pipe 的實作與應用

Loading comments...

函數式編程（Functional Programming, FP）中，高階函數是核心概念之一。本文將探討三個重要的函數轉換技巧：Curry、Compose、Pipe，並著重分析它們在現代前端開發中的應用。

概念比較

概念	主要用途	執行順序	實際應用
Curry	參數部分應用	依序傳入參數	API 請求配置
Compose	函數組合	從右到左	數學運算、資料轉換
Pipe	資料流處理	從左到右	表單處理、API 資料流

實作與範例

Curry (柯里化)

type Curry<T extends (...args: any[]) => any> =
  T extends (arg: infer A, ...args: infer R) => infer O
    ? R extends []
      ? T
      : (arg: A) => Curry<(...args: R) => O>
    : never;

// 實際應用：API 請求配置
const fetchFromAPI = curry((baseURL: string, endpoint: string, id: string) =>
  fetch(`${baseURL}${endpoint}/${id}`)
);

const fetchFromMyAPI = fetchFromAPI('https://api.example.com');
const fetchUser = fetchFromMyAPI('/users');

Compose 與 Pipe

特性	Compose	Pipe
執行順序	從右到左 (f(g(x)))	從左到右 (x → g → f)
數學概念	符合數學函數組合	符合資料流處理
可讀性	需要從內到外閱讀	符合直覺閱讀順序
適用場景	數學運算、純函數組合	資料處理流程、事件處理

// Compose 示例
const processData = compose(
  formatOutput, // 3. 格式化
  validateData, // 2. 驗證
  normalizeInput // 1. 標準化
);

// Pipe 示例
const processData = pipe(
  normalizeInput, // 1. 標準化
  validateData, // 2. 驗證
  formatOutput // 3. 格式化
);

工具結合

與 RxJS 的結合

// 搜尋功能實作
const searchInput$ = fromEvent<InputEvent>(searchInput, 'input').pipe(
  map(event => (event.target as HTMLInputElement).value),
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(async (term) => {
    const response = await fetch(`/api/search?q=${term}`);
    return response.json();
  })
);

常見應用場景

場景	推薦方案	原因
表單處理	Pipe + RxJS	清晰的資料流、方便的異步處理
API 資料處理	Pipe	直觀的轉換流程
配置管理	Curry	靈活的參數應用
數學計算	Compose	符合數學直覺

選擇方向

考量面向	建議選擇	說明
團隊經驗	Pipe	最直觀、容易理解
資料處理	Pipe + RxJS	強大的資料流處理能力
函數組合	Compose	符合 functional programming 的特性
配置管理	Curry	靈活的參數管理

總結

在日常開發中：

Pipe 因爲比較直觀所以比較常見一些
結合 RxJS 能夠處理複雜的非同步資料流
Curry 和 Compose 在特定場景下也是有幫助，但需要謹慎使用，建議盡可能跟團隊有共識，避免過度使用，導致程式碼難以閱讀

Loading comments...

Grid Template：最直覺的 CMS Layout 解決方案

使用 Grid Template Areas 打造直覺且易維護的 CMS 版面配置

Array.prototype.filter Implementation

Implement a Custom Array Filter Method

On This Page

概念比較
實作與範例
- Curry (柯里化)
- Compose 與 Pipe
工具結合
- 與 RxJS 的結合
- 常見應用場景
選擇方向
總結