TypeScript로 다시 읽는 GoF 디자인 패턴 — 4편: 행위 패턴 Ⅱ

// 페이지 API를 순회하려면 커서 처리 방식을 알아야 한다
let cursor: string | undefined;
do {
  const page = await api.listUsers({ cursor, limit: 100 });
  for (const user of page.items) {
    await process(user);
  }
  cursor = page.nextCursor;
} while (cursor);
// 사용자, 주문, 로그 목록마다 이 루프가 복사된다

class Tree<T> {
  constructor(
    readonly value: T,
    readonly children: Tree<T>[] = [],
  ) {}
 
  // 깊이 우선 순회 — 사용하는 쪽은 트리 구조를 모른다
  *[Symbol.iterator](): Generator<T> {
    yield this.value;
    for (const child of this.children) {
      yield* child;
    }
  }
}
 
const tree = new Tree("root", [new Tree("a", [new Tree("a-1")]), new Tree("b")]);
 
for (const value of tree) console.log(value); // root, a, a-1, b
const all = [...tree];

async function* paginate<T>(
  fetchPage: (cursor?: string) => Promise<{ items: T[]; nextCursor?: string }>,
): AsyncGenerator<T> {
  let cursor: string | undefined;
  do {
    const page = await fetchPage(cursor);
    yield* page.items;
    cursor = page.nextCursor;
  } while (cursor);
}
 
// 사용하는 쪽은 페이지의 존재를 모른다
for await (const user of paginate((cursor) => api.listUsers({ cursor, limit: 100 }))) {
  await process(user);
  if (user.id === targetId) break; // 중단하면 이후 페이지는 요청하지 않는다
}

type FormState = {
  tripType: "oneWay" | "roundTrip";
  from: string;
  to: string;
  departDate: string;
  returnDate: string | null;
  adults: number;
  infants: number;
};
 
type Derived = {
  returnDateDisabled: boolean;
  returnDateMin: string;
  canSearch: boolean;
};
 
// 중재자 — 필드 간 규칙은 전부 여기에만 있다
class SearchFormMediator {
  #state: FormState;
  #listeners = new Set<(state: FormState, derived: Derived) => void>();
 
  constructor(initial: FormState) {
    this.#state = initial;
  }
 
  subscribe(listener: (state: FormState, derived: Derived) => void) {
    this.#listeners.add(listener);
    listener(this.#state, this.#derive());
    return () => this.#listeners.delete(listener);
  }
 
  // 각 컴포넌트는 "내 값이 바뀌었다"고만 알린다
  change<K extends keyof FormState>(field: K, value: FormState[K]) {
    const next = { ...this.#state, [field]: value };
 
    if (next.tripType === "oneWay") next.returnDate = null;
    if (next.returnDate && next.returnDate < next.departDate) next.returnDate = next.departDate;
    if (next.adults === 0) next.infants = 0;
 
    this.#state = next;
    const derived = this.#derive();
    this.#listeners.forEach((l) => l(this.#state, derived));
  }
 
  #derive(): Derived {
    const s = this.#state;
    return {
      returnDateDisabled: s.tripType === "oneWay",
      returnDateMin: s.departDate,
      canSearch: s.from !== "" && s.to !== "" && s.from !== s.to && s.adults > 0,
    };
  }
}

type Shape = { id: string; x: number; y: number; width: number; height: number };
 
// 메멘토 — 외부에서는 내용을 읽을 수 없는 불투명한 객체
class CanvasMemento {
  readonly #shapes: readonly Shape[];
  readonly createdAt = new Date();
 
  constructor(shapes: Shape[]) {
    this.#shapes = structuredClone(shapes);
  }
 
  // 원조자만 쓰도록 의도된 접근자
  restoreInto(target: { replaceAll(shapes: Shape[]): void }) {
    target.replaceAll(structuredClone(this.#shapes as Shape[]));
  }
}
 
// 원조자
class Canvas {
  #shapes: Shape[] = [];
 
  add(shape: Shape) { this.#shapes.push(shape); }
  autoArrange() { /* 복잡한 재배치 — 역연산을 정의하기 어렵다 */ }
 
  save(): CanvasMemento {
    return new CanvasMemento(this.#shapes);
  }
 
  restore(memento: CanvasMemento) {
    memento.restoreInto({ replaceAll: (shapes) => { this.#shapes = shapes; } });
  }
}
 
// 관리자 — 스냅샷을 보관만 한다
class History {
  #snapshots: CanvasMemento[] = [];
  constructor(private readonly limit = 50) {}
 
  push(m: CanvasMemento) {
    this.#snapshots.push(m);
    if (this.#snapshots.length > this.limit) this.#snapshots.shift(); // 오래된 것부터 버린다
  }
 
  pop() { return this.#snapshots.pop(); }
}
 
const canvas = new Canvas();
const history = new History();
 
history.push(canvas.save());
canvas.autoArrange();
 
const previous = history.pop();
if (previous) canvas.restore(previous); // 정렬 이전으로 복원

const past: Readonly<EditorState>[] = [];
let present: Readonly<EditorState> = initialState;
 
function update(recipe: (draft: EditorState) => void) {
  past.push(present);
  present = produce(present, recipe); // Immer — 바뀐 부분만 새로 만들고 나머지는 공유
}

class NumberNode {
  evaluate() { /* ... */ }
  print() { /* ... */ }
  collectVariables() { /* ... */ }
  typeCheck() { /* ... */ }
  optimize() { /* ... */ }
  // 연산이 추가될 때마다 모든 노드 클래스를 수정해야 한다
}

interface ExprVisitor<R> {
  visitNumber(node: NumberExpr): R;
  visitVariable(node: VariableExpr): R;
  visitBinary(node: BinaryExpr): R;
}
 
interface Expr {
  accept<R>(visitor: ExprVisitor<R>): R;
}
 
class NumberExpr implements Expr {
  constructor(readonly value: number) {}
  accept<R>(v: ExprVisitor<R>) { return v.visitNumber(this); }
}
 
class VariableExpr implements Expr {
  constructor(readonly name: string) {}
  accept<R>(v: ExprVisitor<R>) { return v.visitVariable(this); }
}
 
class BinaryExpr implements Expr {
  constructor(readonly op: "+" | "*", readonly left: Expr, readonly right: Expr) {}
  accept<R>(v: ExprVisitor<R>) { return v.visitBinary(this); }
}
 
// 연산 1 — 계산
class Evaluator implements ExprVisitor<number> {
  constructor(private readonly env: Record<string, number>) {}
  visitNumber(n: NumberExpr) { return n.value; }
  visitVariable(n: VariableExpr) {
    if (!(n.name in this.env)) throw new Error(`정의되지 않은 변수: ${n.name}`);
    return this.env[n.name];
  }
  visitBinary(n: BinaryExpr) {
    const l = n.left.accept(this);
    const r = n.right.accept(this);
    return n.op === "+" ? l + r : l * r;
  }
}
 
// 연산 2 — 출력. 노드 클래스는 전혀 수정하지 않았다
class Printer implements ExprVisitor<string> {
  visitNumber(n: NumberExpr) { return String(n.value); }
  visitVariable(n: VariableExpr) { return n.name; }
  visitBinary(n: BinaryExpr) {
    return `(${n.left.accept(this)} ${n.op} ${n.right.accept(this)})`;
  }
}
 
// (x + 2) * 3
const expr = new BinaryExpr("*", new BinaryExpr("+", new VariableExpr("x"), new NumberExpr(2)), new NumberExpr(3));
 
expr.accept(new Printer());               // "((x + 2) * 3)"
expr.accept(new Evaluator({ x: 4 }));     // 18

// ESLint 규칙의 형태 — 노드 타입별로 방문 함수를 정의한다
export default {
  create(context) {
    return {
      CallExpression(node) {
        if (node.callee.type === "Identifier" && node.callee.name === "eval") {
          context.report({ node, message: "eval은 사용할 수 없습니다" });
        }
      },
    };
  },
};

type Expr =
  | { kind: "number"; value: number }
  | { kind: "variable"; name: string }
  | { kind: "binary"; op: "+" | "*"; left: Expr; right: Expr };
 
function print(e: Expr): string {
  switch (e.kind) {
    case "number": return String(e.value);
    case "variable": return e.name;
    case "binary": return `(${print(e.left)} ${e.op} ${print(e.right)})`;
    default: {
      const unreachable: never = e; // 새 kind를 추가하면 여기서 컴파일 에러
      throw new Error(`처리하지 않은 노드: ${JSON.stringify(unreachable)}`);
    }
  }
}

temperature > 80 and (pressure > 5 or status == "error")

type Context = Record<string, number | string>;
 
interface Condition {
  interpret(ctx: Context): boolean;
}
 
// 끝 기호(terminal) — 비교식
class Compare implements Condition {
  constructor(
    private readonly field: string,
    private readonly op: ">" | "<" | "==",
    private readonly value: number | string,
  ) {}
 
  interpret(ctx: Context) {
    const actual = ctx[this.field];
    switch (this.op) {
      case ">": return typeof actual === "number" && actual > (this.value as number);
      case "<": return typeof actual === "number" && actual < (this.value as number);
      case "==": return actual === this.value;
    }
  }
}
 
// 비끝 기호(nonterminal) — 다른 식을 조합한다
class And implements Condition {
  constructor(private readonly left: Condition, private readonly right: Condition) {}
  interpret(ctx: Context) { return this.left.interpret(ctx) && this.right.interpret(ctx); }
}
 
class Or implements Condition {
  constructor(private readonly left: Condition, private readonly right: Condition) {}
  interpret(ctx: Context) { return this.left.interpret(ctx) || this.right.interpret(ctx); }
}
 
// temperature > 80 and (pressure > 5 or status == "error")
const rule = new And(
  new Compare("temperature", ">", 80),
  new Or(new Compare("pressure", ">", 5), new Compare("status", "==", "error")),
);
 
rule.interpret({ temperature: 85, pressure: 3, status: "error" }); // true