函數式程式設計在網頁前端開發的入門應用 講稿

這個議程會使用 TypeScript 介紹 functional programming 中的常見概念與在 web front-end 中的應用。選用 TypeScript 是因為它的 type system 雖然不夠好，但已經足夠讓我們以 type 為出發點思考問題。同時它也有 JavaScript 的靈活性。

Sum Type 和 Product Type

在像 Haskell 或是 OCaml 這種 ML 系的 FP 語言中，常會看到由 sum type 和 product type 組合而成的 algebraic data type ，例如：

data List a = Nil | Cons a (List a)

在 JS 裡我們沒有 sum type 和 product type ，但我們可以模擬一下，並用 TypeScript 描述它們：

interface Nil {
  type: 'nil'
}

interface Cons<T> {
  type: 'cons'
  head: T
  tail: List<T>
}

type List<T> = Nil | Cons<T>

此時我們用 TypeScript 的 discriminated union 來替代 sum type ，當用到這種資料時，可以把 switch 當成陽春版的 pattern matching 用。同時以 object 替代 product type 。

有了陽春版的 sum type 和 product type ，現在我們可以開始建立抽象層。

靠抽象層切割問題

如果大家有看過 SICP 影片的話，可以注意到在構造有理數時，課程慢慢變得有趣了起來。

We're going to solve that problem by using this incredbly powerful design strategy that you already seen us use over and over.

And that's the strategy of wishful thinking.

— Harold Abelson

export type Rat = [number, number]

export declare makeRat = (numer, denom) => Rat

export declare numer = (rat: Rat) => number

export declare denom = (rat: Rat) => number

因為 JS 現在有了 module system ，我們也可以把同樣的技巧用在 JS 上。

ToDoItem

今天我們的目標是做一個 ToDo app ，從最底部開始思考，我們的 ToDo item 該長什麼樣子呢？

export interface ToDoItem {
  id: string
  title: string
  done: boolean
}

接下來我們要能創造、存取、更新這個 ToDo ：

export const create = (id: string, title: string, done: boolean): ToDoItem =>
  ({ id, title, done })

export const id = (item: ToDoItem): string => item.id

export const title = (item: ToDoItem): string => item.title

export const done = (item: ToDoItem): boolean => item.done

export const update = (done: boolean) => (item: ToDoItem) => ({
  id: item.id,
  title: item.title,
  done,
})

注意在這裡我手動 curry 了 update 函數，這樣做會讓在保持每個 ToDo 不可變的同時簡化我們的程式碼。

根據 SICP 的說法，只要 module 的介面沒變，我們完全可以用另外一種方式實現 ToDoItem ：

export type ToDoItem = [string, string, boolean]

export const create = (id: string, title: string, done: boolean): ToDoItem =>
  [id, title, done]

export const id = ([id]: ToDoItem): string => id

export const title = ([, title]: ToDoItem): string => title

export const done = ([,, done]: ToDoItem): boolean => done

export const update = (done: boolean) => ([id, title]: ToDoItem) =>
  [id, title, done]

同時也會發現，我們能把 tuple 當成 product type 用。

ToDoList

做完 ToDoItem ，再用一樣的思路做 ToDoList ：

import * as TDI from './ToDoItem'

export interface ToDoList {
  key: number
  todos: TDI.ToDoItem[]
}

export const create = (): ToDoList => ({
  key: 0,
  todos: []
})

export const append = (title: string) => (list: ToDoList): ToDoList => {
  const { key: prev, todos } = list
  const key = prev + 1
  const item = TDI.create(`${key}`, title, false)
  return {
    key,
    todos: [...todos, item]
  }
}

export const updateById = (id: string, done: boolean) => (list: ToDoList): ToDoList => {
  const { key, todos } = list
  const i = todos.findIndex((item) => item.id === id)
  if (i === -1) return list
  return {
    key,
    todos: [
      ...todos.slice(0, i),
      TDI.update(done)(todos[i]),
      ...todos.slice(i + 1)
    ]
  }
}

export const removeById = (id: string) => (list: ToDoList): ToDoList => {
  const { key, todos } = list
  const i = todos.findIndex((item) => item.id === id)
  if (i === -1) return list
  return {
    key,
    todos: [
      ...todos.slice(0, i),
      ...todos.slice(i + 1)
    ]
  }
}

在不同的語境中工作

和 OOP 合作

如果不喜歡一直傳遞最新的物件，我們也可以把這種風格的 ToDoList 包裝成一個 OOP class ：

import * as TDL from './ToDoList'

export default class ToDoList {
  private _toDoList: TDL.ToDoList

  constructor() {
    this._toDoList = TDL.create()
  }

  append(title: string) {
    this._toDoList = TDL.append(title)(this._toDoList)
  }

  updateById(id: string, done: boolean) {
    this._toDoList = TDL.updateById(id, done)(this._toDoList)
  }
}

但為什麼那麼堅持要手動 curry ，並把要修改的物件，放在最後一個參數呢？

因為這樣做的話，要是哪一天 ToDoList 被放到 Promise 中，我們還是可以這樣操作它：

Promise.resolve(toDoList)
  .then(TDL.append('foobar'))
  .then(TDL.updateById('0', true))

要是我們把 ToDoList 放在 React state 裡面，也可以直接操作它：

const Comp = () => {
  const [toDoList, setToDoList] = useState(TDL.create())

  const handleToDoUpdate = (id: string, done: boolean) => {
    setToDoList(TDL.updateById(id, done))
  }
}

這讓我本來很期待 |> pipeline operator ：

toDoList
  |> TDL.append('foobar')
  |> TDL.updateById('0', true)

那時候還是所謂的 F# style pipeline operator （為什麼不叫 OCaml style 啊，兒子比老子有名，這樣對嗎？）。但現在的 Hack style pipeline operator 寫起來就比較囉唆了：

toDoList
  |> TDL.append('foobar')(%)
  |> TDL.updateById('0', true)(%)

我不喜歡 Hack pipeline ，但是 proposal 裡提到：

Both Hack pipes and F# pipes respectively impose a small syntax tax on different expressions:
Hack pipes slightly tax only unary function calls, and
F# pipes slightly tax all expressions except unary function calls.

可見 JS 為了過去的舊設計，選擇了痛苦比較少的道路。

But with F# pipes, value |> someFunction + 1 is still valid syntax – it’ll just fail late at runtime, because someFunction + 1 isn’t callable

但 proposal 內才剛說完要考慮到未來會有 operator overloading ，就舉例子說 someFunction + 1 不會是個函數還滿怪的。在 FP 的世界，你當然可以讓兩個函數被 + 起來，而且結果是個新的函數。

反而後面提到 F# style pipeline 會帶來實作上的困難還比較有說服力。

大家可以自己讀一下 tc39/proposal-pipeline-operator ，看看你喜歡哪一種 pipeline ？

Redux

Redux action 大概長這樣：

interface Action<T> {
  type: 'redux/someAction'
  payload: T
}

這怎麼看都是個 sum type 吧？事實上因為 Redux 一開始是「借鑑」 Elm 的， action 長得像 ML 語言的 sum type 也是情理之中。既然是個 sum type ，我們沒道理只在 payload 裡面放 primitive types 。

我們做個裝著 action 的 action ！

interface RequestAsyncAction<C> {
  type: 'async/request'
  context: C
}

interface SuccessAsyncAction<C, T> {
  type: 'async/success'
  context: C
  payload: T
}

interface FailureAsyncAction<C> {
  type: 'async/failure'
  context: C
  error: Error
}

export type AsyncAction<C, T> =
  | RequestAsyncAction<C>
  | SuccessAsyncAction<C, T>
  | FailureAsyncAction<C>

export const request = <C>(context: C): RequestAsyncAction<C> => ({
  type: 'async/request',
  context,
})

export const success = <C, T>(context: C, payload: T): SuccessAsyncAction<C, T> => ({
  type: 'async/success',
  context,
  payload
})

export const failure = <C>(context: C, error: Error): FailureAsyncAction<C> => ({
  type: 'async/failure',
  context,
  error
})

於是使用 redux-thunk 時，就能這樣合成我們的 thunk actions ：

import { Dispatch } from 'redux'

import { ToDoService } from '../services'

import * as ToDoListAction from './ToDoListAction'
import * as AsyncAction from './AsyncAction'

type AppendDispatch = Dispatch<AsyncAction.AsyncAction<string, ToDoListAction.Action>>

export const append = (title: string) => async (dispatch: AppendDispatch) => {
  dispatch(AsyncAction.request(title))
  try {
    const item = await ToDoService.create(title)
    dispatch(AsyncAction.success(title, ToDoListAction.append(item)))
  } catch (err: any) {
    dispatch(AsyncAction.failure(title, err))
  }
}

type UpdateDispatch = Dispatch<AsyncAction.AsyncAction<[string, boolean], ToDoListAction.Action>>

export const updateById = (id: string, done: boolean) => async (dispatch: UpdateDispatch) => {
  const context: [string, boolean] = [id, done]
  dispatch(AsyncAction.request(context))
  try {
    const item = await ToDoService.update(id, done)
    dispatch(AsyncAction.success(context, ToDoListAction.updateById(id, item)))
  } catch (err: any) {
    dispatch(AsyncAction.failure(context, err))
  }
}

type RemoveDispatch = Dispatch<AsyncAction.AsyncAction<string, ToDoListAction.Action>>

export const removeById = (id: string) => async (dispatch: RemoveDispatch) => {
  dispatch(AsyncAction.request(id))
  try {
    await ToDoService.remove(id)
    dispatch(AsyncAction.success(id, ToDoListAction.removeById(id)))
  } catch (err: any) {
    dispatch(AsyncAction.failure(id, err))
  }
}

這樣在 root reducer 中，我們可以先處理外層 action ，再把裡面的 action 交給其他 reducers ：

const reducer = (state = initialState, action: Action): State => {
  switch (action.type) {
    case 'async/request': {
      return {
        ...state,
        isLoading: true,
      }
    }
    case 'async/success': {
      const act = action.payload as ToDoListAction.Action
      return {
        isLoading: false,
        list: toDoListReducer(state.list, act)
      }
    }
    case 'async/failure': {
      return {
        ...state,
        isLoading: false,
      }
    }
    default:
      return state
  }
}

內層 reducer 現在只要更新收到的 todo 即可：

const reducer = (state = initialState, action: Action): TDL.ToDoList => {
  switch (action.type) {
    case 'todos/append': {
      return TDL.append(action.payload)(state)
    }
    case 'todos/updateById': {
      const [id, item] = action.payload
      return TDL.updateById(id, item)(state)
    }
    case 'todos/removeById': {
      return TDL.removeById(action.payload)(state)
    }
    default:
      return state
  }
}

這樣相當於手動 compose reducers 。

當然現在不用這樣搞， Redux Toolkit 用一種比較「好懂」的方式處理這件事， createAsyncThunk 會自動產生不同狀態的 action types ，像是 some/action/pending, some/action/fulfilled, some/action/rejected 。

網頁前端裡的 CPS 變換

在介紹 CPS 變換之前，要先講一下什麼是 CPS ，也就是 continuation-passing style 。在 FP 的世界， continuation-passing style 指的是你的函數不回傳東西，而是把計算結果交給下一個函數當參數。

例如一個相加兩數的函數：

function add(a: number, b: number): number {
  return a + b
}

console.log(add(1, 2))

變成：

function add(a: number, b: number, cb: (x: number) => void): void {
  cb(a + b)
}

add(1, 2, (c) => console.log(c))

常寫 JS 的人大概已經聞到了熟悉的味道，是的， Node.js API 那些需要傳 callback 的函數就是 CPS 。

這邊大家可以注意，一般的程式能很簡單地轉成 CPS 程式，但 CPS 程式就沒法很簡單地轉成一般的程式。畢竟你不知道 callback 函數什麼時候會被呼叫。為此先有人引入了 deferred 物件，後來又誕生的 Promise/A+ 標準。

於是我們可以把 add 寫成：

function add(a: number, b: number): Promise<number> {
  return Promise.resolve(a + b)
}

add(1, 2).then(console.log)

在這裡我們不關心 add 是直接幫我們算出 a + b ，還是呼叫躲在 AWS 上的 API 幫我們算 a + b ，只要知道我們等一下會拿到一個 number 就好了。

但這個「等一下」仍然是個麻煩，因為不知道會等多久，我們沒法把 Promise<number> 直接拆成 number 。

在 MSFT 對 JS 的大力貢獻下， JS 世界有了 C# 那樣的 async/await 語法糖，現在我們可以這樣用：

const c = await add(1, 2)
console.log(c)

從 add(1, 2).then(console.log) 到 const c = await add(1, 2) 就是一種 CPS 變換（ CPS transformation ）。

但 async/await 只能用在 Promise 上，卻不能用在其他類似的結構上。好在隨著 React 和 Vue 等前端 library/framework 決定他們「要搶著做程式語言該做的事」，我們現在有很多手段可以在不同的結構上做到 CPS 變換。

例如我們可以用 React Hooks 來 resolve Promise ：

import { useState, useEffect } from 'react';

function isThenable(p) {
  return p.then && typeof p.then === 'function';
}

function usePromise(promise) {
  // TODO: make inner isPending a counter
  const [[value, error, pending], setResult] = useState([
    undefined,
    undefined,
    0,
  ]);

  useEffect(() => {
    if (!promise) {
      setResult(([, , pending]) => [undefined, undefined, pending]);
      return;
    }
    if (!isThenable(promise)) {
      setResult(([, , pending]) => [promise, undefined, pending]);
      return;
    }

    setResult(([value, error, pending]) => [value, error, pending + 1]);
    promise.then(
      x => setResult(([, , pending]) => [x, undefined, pending - 1]),
      e => setResult(([, , pending]) => [undefined, e, pending - 1])
    );
  }, [promise]);

  return [value, error, pending > 0];
}

export default usePromise;

就能在 React 元件內這樣寫：

const Comp = () => {
  const p = useMemo(() => add(1, 2), [])
  const c = usePromise(p)

  return (
    <span>1 + 2 = {c}</span>
  )
}

我們甚至可以用 React Hooks 拆解 RxJS 的 Observable ：

import { useState, useMemo, useEffect } from 'react';
import { BehaviorSubject } from 'rxjs';

export default function useObservable(input$, initialState) {
  const [state, setState] = useState(initialState);
  const state$ = useMemo(() => new BehaviorSubject(initialState), []);

  useEffect(() => {
    const sub = state$.subscribe(x => setState(x));
    return sub.unsubscribe.bind(sub);
  }, [state$]);

  useEffect(() => {
    const sub = input$.subscribe(state$.next.bind(state$));
    return sub.unsubscribe.bind(sub);
  }, [input$]);

  return state;
}

但大概是因為 React Hooks 是個「半殘的抽象工具」，幾乎沒有人這樣實作 usePromise 和 useObservable 。倒是 Vue3 上有個 vue-compose-promise 提供了類似的介面：

<template>
  <div>
    <span> Is the promise still pending: {{ usersPromise.isPending }} </span>
    <span> Is the 200ms delay over: {{ usersPromise.isDelayOver }} </span>
    <span>
      Last successfully resolved data from the promise: {{ usersPromise.data }}
    </span>
    <span> Error if current promise failed: {{ usersPromise.error }} </span>
  </div>
</template>

<script>
import { createComponent } from '@vue/composition-api'
import { usePromise } from 'vue-compose-promise'

export default createComponent({
  setup() {
    const promised = usePromise({ pendingDelay: 200, promise: fetchUsers() })

    return {
      usersPromise: promised.state,

      fetchUsers() {
        promised.state.promise = fetchUsers()
      },
    }
  },
})
</script>

到這裡，如果你有注意到我在做什麼的話，那當我用 React Hooks 對 array 做 CPS 變換時，你也不會驚訝了：

import { useState, useEffect } from 'react';

export default function useArray(xs) {
  const [s, set] = useState(xs[0]);

  useEffect(() => {
    for (let v of xs) {
      setImmediate(set, v);
    }
  }, [xs]);

  return s;
}

網頁前端的 Lifting

本來這邊想講 Observable 的，但因為太麻煩了所以講個 Promise 就好。

假設我們今天想弄個晚一點才會開始跑的 promise ，就叫它 LazyPromise 好了。我們一樣想用 then 把它們串起來，可以這樣做：

export type LazyPromise<T> = () => Promise<T>

export const of = <T>(x: T) =>
  () => Promise.resolve(x)

export const then = <T, U>(f: (x: T) => LazyPromise<U>) => (lp: LazyPromise<T>): LazyPromise<U> =>
  () => lp().then((x: T) => f(x)())

配上 OCaml style pipeline operator ，我們可以這樣用：

import * as LP from './LazyPromise'

const one = LP.of(1)

const two = LP.of(2)

describe('LazyPromise', () => {
  it('should chain lazy promises', async () => {
    const run =
      one |> LP.then((x) =>
      two |> LP.then((y) =>
        LP.of(x + y)
      ))
    expect(await run()).toBe(3)
  })
})

大概就這樣。

further readings

• SICP
• Domain Modeling Made Functional
• Comprehending Monads
• How to make ad-hoc polymorphism less ad hoc
• fantasy-land
• fp-ts