docs: Add docs about item12-14

limkhl · limkhl · commit 10eb35b9cac2 · 2022-04-21T01:33:55.000+09:00
diff --git a/chapter2/lado/item12-14.md b/chapter2/lado/item12-14.md
@@ -0,0 +1,384 @@
+# 이펙티브 타입스크립트 아이템 12~14
+
+## 아이템 12. 함수 표현식에 타입 적용하기
+
+- 타입스크립트에서는 함수 표현식을 사용하는 것이 좋다. 함수의 매개변수부터 반환값까지 전체를 함수 타입으로 선언하여 함수 표현식에 재사용할 수 있다는 장점이 있기 때문이다.
+
+  ```tsx
+  function rollDice(sides: number): number {
+    /* ... */
+  } // 문장
+  const rollDice2 = function (sides: number): numberg {
+    /* ... */
+  } // 표현식
+  const rollDice3 = (sides: number): number => {
+    /* ... */
+  } // 표현식
+
+  type DiceRollFn = (sides: number) => number
+  const rollDice: DiceRollFn = (sides) => {
+    /* ... */
+  }
+  ```
+
+- 함수 타입 선언의 장점
+
+  - 불필요한 코드의 반복을 줄인다.
+  - 함수 구현부가 분리되어 있어 로직이 보다 분명해진다.
+
+    ```tsx
+    function add(a: number, b: number) {
+      return a + b
+    }
+    function sub(a: number, b: number) {
+      return a - b
+    }
+    function mul(a: number, b: number) {
+      return a * b
+    }
+    function div(a: number, b: number) {
+      return a / b
+    }
+
+    type BinaryFn = (a: number, b: number) => number
+    const add: BinaryFn = (a, b) => a + b
+    const sub: BinaryFn = (a, b) => a - b
+    const mul: BinaryFn = (a, b) => a * b
+    const div: BinaryFn = (a, b) => a / b
+    ```
+
+- 시그니처가 일치하는 다른 함수가 있을 때도 함수 표현식에 타입을 적용하면 좋다.
+
+  ```tsx
+  const responseP = fetch('/quote?by=Mark+Twain') // 타입은 Promise<Response>
+
+  async function getQuote() {
+    const response = await fetch('/quote?by=Mark+Than')
+    const quote = await response.json()
+    return quote
+  }
+
+  // {
+  //      "quote": "If you tell the truth, you don't have to remember anything.",
+  //      "source": "notebook",
+  //      "date": "1984"
+  // }
+
+  // lib.dom.d.ts에 있는 fetch의 타입 선언
+  declare function fetch(input: RequestInfo, init?: RequestInit): Promise<Response>
+
+  async function checkedFetch1(input: RequestInfo, init?: RequestInit) {
+    const response = await fetch(input, init)
+    if (!response.ok) {
+      // 비동기 함수 내에서 거절된 프로미스로 변환합니다.
+      throw new Error('Request failed: ' + response.status)
+    }
+    return response
+  }
+
+  // typeof fn을 사용해 fetch 함수의 시그니처 참조
+  const checkedFetch2: typeof fetch = async (input, init) => {
+    const response = await fetch(input, init)
+    if (!response.ok) {
+      throw new Error('Request failed: ' + response.status)
+    }
+    return response
+  }
+
+  // throw를 return으로 잘못 기재했을 때 타입 오류를 잡아냄
+  const checkedFetch3: typeof fetch = async (input, init) => {
+    // Type '(input: RequestInfo, init: RequestInit | undefined) => Promise<Response | Error>' is not assignable to type '{ (input: RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: RequestInfo, init?: RequestInit | undefined): Promise<...>; }'.
+    // Type 'Promise<Response | Error>' is not assignable to type 'Promise<Response>'.
+    // Type 'Response | Error' is not assignable to type 'Response'.
+    // Type 'Error' is missing the following properties from type 'Response': headers, ok, redirected, status, and 11 more.
+    const response = await fetch(input, init)
+    if (!response.ok) {
+      return new Error('Request failed: ' + response.status)
+    }
+    return response
+  }
+  ```
+
+  <br />
+
+## 아이템 13. 타입과 인터페이스의 차이점 알기
+
+- 타입스크립트에서 명명된 타입을 정의하는 방법은 두가지가 있다. 대부분의 경우에는 타입을 사용해도 되고 인터페이스를 사용해도 된다.
+
+```tsx
+type TState = {
+  name: string
+  capital: string
+}
+
+interface IState {
+  name: string
+  capital: string
+}
+```
+
+- (cf) 인터페이스 접두사로 I를 붙이는 것은 C#에서 비롯된 관례로, 지양해야 할 스타일이다.
+- 인터페이스 선언과 타입 선언의 비슷한 점
+
+  - 추가 속성과 함께 할당한다면 동일한 오류가 발생한다.
+
+  ```tsx
+  const wyoming: TState = {
+    name: 'Wyoming',
+    capital: 'Cheyenne',
+    population: 500_000,
+    // Type '{ name: string; capital: string; population: number; }' is not assignable to type 'TState'.
+    // Object literal may only specify known properties, and 'population' does not exist in type 'TState'.
+  }
+  ```
+
+  - 인덱스 시그니처는 인터페이스와 타입에서 모두 사용할 수 있다.
+
+  ```tsx
+  type TDict = { [key: string]: string }
+  interface IDict {
+    [key: string]: string
+  }
+  ```
+
+  - 함수 타입도 인터페이스나 타입으로 정의할 수 있다.
+
+  ```tsx
+  // 함수 타입에 추가적인 속성이 있을 때
+  type TFnWithProperties = {
+    (x: number): number
+    prop: string
+  }
+
+  interface IFnWithProperties {
+    (x: number): number
+    prop: string
+  }
+  ```
+
+  - 제너릭이 가능하다.
+
+  ```tsx
+  type TPair<T> = {
+  	first: T;
+  	second: T;
+  }
+
+  interface IPair<T> = {
+  	first: T;
+  	second: T;
+  }
+  ```
+
+  - 클래스를 구현할 때, 타입과 인터페이스 둘 다 사용할 수 있다.
+
+  ```tsx
+  class StateT implements TState {
+    name: string = ''
+    capital: string = ''
+  }
+
+  class StateI implements IState {
+    name: string = ''
+    capital: string = ''
+  }
+  ```
+
+  - 인터페이스는 타입을 확장할 수 있으며, 타입은 인터페이스를 확장할 수 있다.
+
+  ```tsx
+  interface IStateWithPop extends TState {
+    population: number
+  }
+
+  type TStateWithPop = IState & { population: number }
+
+  // 인터페이스는 유니온 타입 같은 복잡한 타입을 확장하지는 못한다.
+  // 복잡한 타입을 확장하고 싶다면 타입과 &를 사용해야 한다.
+  ```
+
+- 인터페이스 선언과 타입 선언의 차이점
+
+  - 유니온 타입은 있지만 유니온 인터페이스라는 개념은 없다.
+  - 인터페이스는 타입을 확장할 수 있지만, 유니온은 할 수 없다.
+    - 유니온 타입을 확장하는 게 필요한 경우
+    ```tsx
+    type Input = {
+      /* ... */
+    }
+    type Output = {
+      /* ... */
+    }
+    interface VariableMap {
+      [name: string]: Input | Output
+    }
+    ```
+  - 유니온 타입에 name 속성을 붙인 타입도 만들 수 있다.
+
+  ```tsx
+  type NamedVariable = (Input | Output) & { name: string }
+  ```
+
+  - type 키워드는 유니온이 될 수도 있고, 매핑된 타입 또는 조건부 타입 같은 고급 기능에 활용되기도 한다.
+  - 튜플과 배열 타입도 type 키워드를 이용해 더 간결하게 표현할 수 있다.
+
+  ```tsx
+  type Pair = [number, number]
+  type StringList = string[]
+  type NamedNums = [string, ...number[]]
+
+  // 인터페이스로 튜플과 비슷하게 구현할 수 있다. 하지만 그러면 튜플에서 사용할 수 있는 concat과 같은 메서드를 사용할 수 없다.
+  interface Tuple {
+    0: number
+    1: number
+    length: 2
+  }
+  ```
+
+  - 인터페이스는 보강(augment)이 가능하다.
+    - 선언 병합은 주로 타입 선언 파일에서 사용된다. 따라서 타입 선언 파일을 작성할 때는 선언 병합을 지원하기 위해 반드시 인터페이스를 사용해야 하며 표준을 따라야 한다.
+
+  ```tsx
+  // 선언 병합: 속성을 확장하는 것
+  interface IState {
+    name: string
+    capital: string
+  }
+
+  interface IState {
+    population: number
+  }
+
+  const wyoming: IState = {
+    name: 'Wyoming',
+    capital: 'Cheyenne',
+    population: 500_000,
+  } // 정상
+  ```
+
+- 타입과 인터페이스 중 어느 것을 사용해야 할까?
+
+  - 복잡한 타입이라면 타입 별칭
+  - 타입과 인터페이스, 두 가지 방법으로 모두 표현할 수 있는 간단한 객체 타입이라면 일관성과 보강의 관점에서 고려해 봐야 한다.
+  - 향후에 보강의 가능성이 있을지 생각해보고, 어떤 API에 대한 타입 선언을 작성해야 한다면 인터페이스를 사용하는 게 좋다. API가 변경될 때 사용자가 인터페이스를 통해 새로운 필드를 병합할 수 있어 유용하기 때문이다. 그러나 프로젝트 내부적으로 사용되는 타입에 선언 병합이 발생하는 것은 잘못된 설계이다.
+
+  <br />
+
+## 아이템 14. 타입 연산과 제너릭 사용으로 반복 줄이기
+
+- 더 큰 집합을 인덱싱해서 속성의 타입에서 중복 제거하기
+
+```tsx
+type TopNavState = {
+  userId: State['userId']
+  pageTitle: State['pageTitle']
+  recentFiles: State['recentFiles']
+}
+```
+
+- ‘매핑된 타입’을 사용해 중복 제거
+
+```tsx
+type TopNavState = {
+  [k in 'userId' | 'pageTitle' | 'recentFiles']: State[k]
+}
+
+type Pick<T, K> = {
+  [k in K]: T[K]
+}
+
+type TopNavState = Pick<State, 'userId' | 'pageTitle' | 'recentFiles'>
+```
+
+- 매핑된 타입과 keyof 사용해 선택적 필드로 바꾸기
+
+```tsx
+interface Options {
+  width: number
+  height: number
+  color: string
+  label: string
+}
+
+type OptionsUpdate = { [k in keyof Options]?: Options[k] }
+
+/*
+	interface OptionsUpdate {
+	 	width?: number;
+	 	height?: number;
+	 	color?: string;
+	 	label?: string;
+	}
+*/
+
+type OptionsKeys = keyof Options
+// 타입이 "width" | "height" | "color" | "label"
+
+type Partial<T> = {
+  [P in keyof T]?: T[P]
+}
+```
+
+- 값의 형태에 해당하는 타입을 정의하고 싶을 때
+  - 값으로부터 타입을 만들어 낼 때는 선언의 순서에 주의해야 한다. 타입 정의를 먼저하고 값이 그 타입에 할당 가능하다고 선언하는 것이 좋다. 그렇게 해야 타입이 더 명확해지고, 예상하기 어려운 타입 변동을 방지할 수 있다.
+
+```tsx
+const INIT_OPTIONS = {
+  width: 640,
+  height: 480,
+  color: '#00FF00',
+  label: 'VGA',
+}
+
+type Options = typeof INIT_OPTIONS
+
+/*
+	interface Options {
+		width: number;
+		height: number;
+		color: string;
+		label: string;
+	}
+*/
+```
+
+- 함수나 메서드의 반환 값에 명명된 타입을 만들고 싶을 때
+
+```tsx
+function getUserInfo(userId: string) {
+  // ...
+  return {
+    userId,
+    name,
+    // ...
+  }
+}
+
+type UserInfo = ReturnType<typeof getUserInfo>
+```
+
+- 제너릭 타입에서 매개변수를 제한할 수 있는 방법
+
+  - extends 사용
+
+  ```tsx
+  interface Name {
+    first: string
+    last: string
+  }
+
+  type DancingDuo<T extends Name> = [T, T]
+
+  const couple: DancingDuo<Name> = [
+    { first: 'Fred', last: 'Astaire' },
+    { first: 'Ginger', last: 'Rogers' },
+  ]
+  ```
+
+  - Pick의 정의에서 타입 좁히기
+
+  ```tsx
+  type Pick<T, K extends keyof T> = {
+    [k in K]: T[K]
+  }
+  ```
