TypeScript: Playground Example

Function Chaining

함수 체이닝 API는 JavaScript에서 흔한 패턴으로, JavaScript 의 중첩 특성으로 인해 중간값을 줄이고 가독성을 높혀 코드를 집중시킬 수 있습니다. 체이닝으로 동작하는 흔한 API는 jQuery입니다. DefinitelyTyped의 타입과 함께 사용한 jQuery 예시입니다.:

import $ from "jquery";

// jQuery API 사용 예시:

$("#navigation").css("background", "red").height(300).fadeIn(200);

// 위 라인에 점을 추가해보면, 긴 함수 리스트를 보게 될 것입니다. 이 패턴은 JavaScript에서 쉽게 재현할 수 있습니다. 핵심은 반드시 항상 같은 오브젝트를 반환하는 것입니다. 여기 체이닝 API를 만드는 API 예시가 있습니다. 핵심은 내부 상태를 파악하고 있는 외부 함수와 항상 자신을 반환하는 API를 노출하는 오브젝트를 갖는 것입니다.

const addTwoNumbers = (start = 1) => {
  let n = start;

  const api = {
    // API에 있는 각 함수를 실행하세요
    add(inc: number = 1) {
      n += inc;
      return api;
    },

    print() {
      console.log(n);
      return api;
    },
  };
  return api;
};

// jQuery에서 본 것처럼 같은 스타일의 API를 허용:

addTwoNumbers(1).add(3).add().print().add(1);

// 클래스를 사용하는 비슷한 예시:

class AddNumbers {
  private n: number;

  constructor(start = 0) {
    this.n = start;
  }

  public add(inc = 1) {
    this.n = this.n + inc;
    return this;
  }

  public print() {
    console.log(this.n);
    return this;
  }
}

// 여기에서 동작:

new AddNumbers(2).add(3).add().print().add(1);

// 이 예시는 JavaScript 패턴에 도구를 제공하는 방법을 제공하기 위해서 TypeScript 타입 추론을 사용했습니다. 더 많은 예시: - example:code-flow