2022.09.06

[moonheekim0118]

추석특집 이펙티브 타입스크립트 순항중~ 포항항ꉂꉂ(ᵔᗜᵔ*) 🛳🌊

[liswktjs]

타입 공간과 값 공간의 심벌 구분하기

타입스크립트의 심벌은 타입 공간이나 값 공간 중의 한 곳에 존재한다

타입 심벌과 변수 선언을 같은 단어로 하여도 관련은 없지만, 코드 상 오류가 발생할 수 있다.

• typeof
  • 타입스크립트에서 사용하였을 때에는 타입스크립트의 타입을 반환
  • 자바스크립트에서 사용하였을 때에는 대상 심벌의 런타임 타입을 가리키는 문자열 반환
• this
  • 타입스크립트 : 다형성 this라고 불리는 this 타입
  • 자바스크립트 : this 키워드
• const
  • 타입스크립트 : as const는 리터럴 또는 리터럴 표현식의 추론된 타입을 바꾼다
  • 자바스크립트 : 새 변수를 선언
• extends
  • 서브클래스 (class A extends B)
  • 서브타입 (interface A extends B)
  • 제너릭 타입 한정자 (Generic)

타입 단언 보다는 타입 선언을 사용하기

• 타입 선언

  • 값이 선언된 타입임을 명시
  • const alice: Person = {name: ‘Alice’ }
  • 할당되는 값이 해당 인터페이스를 만족하는지 검사

• 타입 단언

  • 타입스크립트가 추론한 타입이 있더라도 Person타입으로 추론
  • const bob = {name :’Bob’} as Person
  • 강제로 타입을 지정하였기 때문에 타입 체커에게 오류를 무시하라고 하는 것
  • 임의로 타입간에 변환을 할 수 없음
    • HTMLElement는 HTMLElement | null의 서브 타입이기 때문에 변환이 가능하지만, Person과 같은 아예 다른 서브 타입의 경우 변환이 불가능하다
    • 모든 타입의 서브타입은 unknwon이기 때문에 사용이 가능
      • but 최대한 사용을 피하기

• 타입 단언이 필요한 곳

  • 타입 체커가 추론한 타입 보다 단언한 타입이 더 정확할 때에 의미가 있다
    • DOM엘리먼트
    • 접미사 !
      • const el = document.getElementById(’foo’)! ;
      • null이 아님을 단언 하는 경우

객체 래퍼 타입 피하기

• 자바스크립트의 기본형 값들에 대한 일곱가지 타입

  • string, number, boolean, null, undefined, symbol, bigint
  • 기본형을 불변이며 메서드를 가지지 않는다
  • string의 경우 메서드가 있는 것은 기본형이 아닌 String 객체 타입에 정의 되어 있는 것
    • 자바스크립트의 경우 기본형을 String 객체로 래핑하는 등 서로 자유롭게 변환됨

• string 기본형과 String 객체의 차이점

  • String 객체는 오직 자기 자신하고만 동일하다
    • “hello” === new String(”hello”) // false
    • new String(”hello”) === new String(”hello”) // true

• 객체 레퍼타입이 있는 기본형 타입들

  • number - Number, boolean - Boolean, symbol - Symbol, bigint -BigInt
  • null, undefined는 객체 래퍼타입이 존재하지 않는다

잉여 속성 체크의 한계 인지하기

• 타입스크립트의 경우 해당 타입이 속성이 있는지, 그리고 그 외의 속성이 없는지 확인한다

interface Options {
    title: string;
    darkMode?: boolean;
} 

const o1 : Options = document;
const o2 : Options = new HTMLAnchorElement; 

• document와 HTMLAnchorElement 모두 title이라는 string 타입의 속성을 가지고 있기 때문에 할당문은 정상이다
  • 위의 두가지는 객체 리터럴이 아니기 때문에 잉여 속성 체크가 되지 않지만
  • {title, darkmode}의 경우 잉여 속성 체크가 이루어진다
• 잉여 속성 체크는 타입 단어문에더 적용되지 않는다
• 잉여 속성 체크는 구조적 타이핑 시스템에서 허용하는 속성 이름의 오타 같은 실수를 바로 잡는데 효과적이다

함수 표현식에 타입 적용하기

• 자바스크립트는 함수 문장과 함수 표현식을 다르게 인식한다

  • 문장
    • function rollDice1(sides: number) : number { }
  • 표현식
    • const rollDice2 = function(sides:number) : number { }
    • const rollDice3 = (sides:number) : number ⇒ { }

• 타입스크립트에서는 표현식 사용을 권장한다

  • 매개변수부터 반환값까지 함수 타입으로 선언하여 함수 표현식에 재사용할 수 있다

  type DiceRollFn = (sides:number) => number;
  const rollDice: DiceRollFn = sides => { }

  • 반복되는 함수 시그니처를 하나의 함수 타입으로 통합할 수 있다

  type BinaryFn = (a:number, b:number) => number;

  • 라이브러리는 공통 함수 시그니처를 제공한다

[moonheekim0118]

타입 연산과 제너릭 사용으로 반복 줄이기

매핑된 타입 사용하기

interface State {
  userId:string;
  pageTitle:string;
  recentFiles: string[];
  pageContents:string;
}

interface  TopNavState{
   userId:string;
  pageTitle:string;
  recentFiles: string[];
}

• 위와 같은 경우가 있을 때 어떻게 중복된 타입을 제거할까?
• 첫번째 아이디어로는 TopNavState 를 확장하여 State 를 만드는게 있다. 하지만 그게 옳바른 방법일까? 왜냐하면 TopNavState 는 결국 State 의 부분집합이기 때문이다!

interface  TopNavState{
   userId: State[userId];
  pageTitle: State[pageTitle];
  recentFiles: State[RecentFiles];
}

• 이렇게 하면 되지 않을까?
• 더 좋은 방법은 매핑된 타입을 이용하는 것!

  type  TopNavState = {
  [ k in 'userId' | 'pageTitle' | 'recentFiles' ] : State[k];
  } 

• 위와 같은 매핑된 타입은 배열 필드를 루프 도는것과 같은 방식이다.
• 사실 위는 아래의 타스의 유틸리티타입으로 구현 가능하다.

  type TopNavState = Pick<State, 'userId' | 'pageTitle' | 'recentFiles' >;

제네릭 타입

• 제네릭 타입은.. 타입을 위한 함수라고 생각하면 쉽다.
• 그런데..제네릭 타입에서 매개변수를 제한 할 수 있는 방법은..?!
• 바로 extends 를 사용하는 것이다.
• extends 를 이용하면 제네릭 매개변수가 특정 타입을 확장한다고 선언하는 것 이다.

type Pick<T, K> = {
    [k in K]: T[k]
}
// K 타입은 'string | number | symbol ' 타입에 할당 할 수 없습니다.

• K는 T 타입과 무관하고 범위가 너무 넓다.
• K 는 인덱스로 사용될 수 있는 string | number | symbol 이 되어야하며, 실제로 범위를 더 좁힐 수 있어야 한다.

type Pick<T, K extends keyof T> = {
    [k in K]: T[k]
}

동적 데이터에 인덱스 시그니쳐 사용하기

인덱스 시그니쳐의 문제점

1. 잘못된 키를 포함해 모든 키를 허용한다.
2. 특정 키가 필요하지 않다.
3. 키마다 다른 타입을 가질 수 없다.
4. 타입스크립트 자동완성 기능이 지원되지 않는다.

인덱스 시그니쳐를 사용 해야 하는경우

• 런타임 때 까지, 객체의 속성을 알 수 없을 경우.
• 이 때사용하게 된다면, 안전한 접근을 위해 인덱스 시그니쳐 값 타입에 undefined 를 추가하도록 하자.
• 인덱스 시그니쳐의 대안은 Record, 매핑된 타입
• 하지만 위 역시 위험은 따르기 때문에 왠만하면 정확한 타입을 사용하자.

number 인덱스 시그니쳐 보다는 Array, 튜플, ArrayLike 사용하기

• 자바스크립트는 number 타입을 객체의 키로 허용하지 않는다.
• 배열의 경우도 마찬가지로... 키는 무조건 문자열이다.
• 하지만 타입스크립트는 숫자 키를 허용하고 문자열 키와 다른 것으로 이용하도록 구현되어 있다.

interface Array<T>{
    // ...
    [ n:number] : T
}

이렇게 말이다.

• 하지만 런타임에는 에크마스크립트 표준이 서술하는 것 처럼 문자열 키로 인식하므로, 이 코드는 완전히 가상의 코드라고 할 수 있지만 타입체크 시점에 오류를 잡을 수 있어서 유용하다.
• 인덱스 시그니쳐가 number 로 표기되어있다면 입력한 값이 number 여야 한다는 것을 의미하지만, 실제 런타임에 사용되는 key 의 타입은 string 이 된다...!!
• 따라서 왠만하면 number 인덱스 시그니쳐는 사용하지 말자.

ArrayLike

interface ArrayLike<T> {
  readonly length: number
  readonly [n: number]: T
}

• 배열 메서드 (push, concat) 과 같은 타입은 정의되어 있지 않아서 사용할 수 없다.
• 튜플 처럼 사용할 수 있으며 인덱스로의 접근과 length 접근만 허용한다.

[prefer2]

잉여 속성 체크의 한계 인지하기

타입이 명시된 변수에 객체 리터럴을 할당할 때 타입스크립트는 해당 타입의 속성이 있는지 그리고 그 외의 속성은 없는지 확인한다.

interface Room {
    numDoors: number;
    ceilingHeightFt: number;
}

const obj = {
  numDoors: 1,
  ceilingHeightFt: 10,
  elephant: 'wow'
};

const r: Room = obj; // 정상

const room: Room = {
   numDoors: 1,
  ceilingHeightFt: 10,
  elephant: 'wow'
} 
// Type '{ numDoors: number; ceilingHeightFt: number; elephant: string; }' 
// is not assignable to type 'Room'.

두번째 예시에서는 잉여 속성 체크 과정이 수행되었다. 하지만 첫번째 예시에서는 아니다. 이는 잉여 속성 체크가 할당 가능 검사와는 별도의 과정이기 때문이다.

const o = { darkmode: true, title: 'Sky' } as Options; // 정상

잉여 속성 체크는 타입 단언문을 사용할 때도 적용되지 않는다. 이는 단언문보다 선언문을 써야하는 또 다른 이유이다.

잉여 속성 체크가 일어나는 경우

• 타입이 선언되어 있고, 객체 리터럴로 할당을 할 때
• 객체 리터럴을 함수에 매개변수로 전달할 때

잉여 속성 체크가 일어나지 않는 경우

• 타입이 선언된 값 또는 매개변수에 변수를 할당할 때
• 타입 단언문

함수 표현식에 타입 적용하기

타입스크립트에서는 함수의 매개변수부터 반환값까지를 함수 타입으로 선언하여 함수 표현식에 재사용할 수 있기 때문에 함수 표현식을 사용하는 것이 좋다.

type DiceRollFn = (sides: number) => number;
const rollDice: DiceRollFn = sides => { ... }

함수 타입의 선언은 불필요한 코드의 반복을 줄인다.

라이브러리는 공통 함수 시그니처를 타입으로 제공하기도 한다. 예를 들어 리액트는 함수 전체에 적용할 수 있는 MouseEventHandler 타입을 제공한다.

다른 함수의 시그니처를 참조하려면 typeof fn을 사용하면 된다.

타입과 인터페이스의 차이점 알기

대부분의 경우에는 타입을 사용해도 되고 인터페이스를 사용해도 된다. 그러나 이 차이를 분명하게 알고, 같은 상황에서는 동일한 방법으로 타입을 정의해 일관성을 유지하자.

인터페이스와 타입 선언의 비슷한 점

• 이미 선언된 타입에서 잉여 속성 체크
• 인덱스 시그니처 사용 가능
• 함수 타입 선언 (대부분의 경우 타입 alias를 사용하는 것이 좋다)
• 제네릭 사용
• 인터페이스는 타입을 확장할 수 있고, 타입은 인터페이스를 확장할 수 있다. 단, 인터페이스는 유니온 타입 같은 복잡한 타입을 확장하지 못한다. 복잡한 타입을 확장하고자 한다면 &를 사용해야 한다.
• 클래스 구현

인터페이스와 타입 선언의 다른 점

• 유니온 인터페이스는 존재하지 않는다. type 키워드는 유니온이 될 수 있고, 매핑된 타입 또는 조건부 타입같은 기능에도 사용할 수 있다.
• 튜플과 배열 타입은 type으로 더 간결하게 표현할 수 있다
• 인터페이스는 보강(augment)이 가능하다. 이를 선언 병합(declaration merging)이라고 한다. 이는 주로 타입 선언 파일에서 사용된다. 병합은 언제든지 가능하기 때문에 프로퍼티가 추가되는 것을 원하지 않는다면 인터페이스 대신 타입을 사용해야 한다.

interface IState {
  name: string;
  capital: string;
}

interface IState {
  population: number;
}

const dory: IState = {
  name: 'dory',
  capital: 'park',
  population: 1000
}

타입 연산과 제너릭 사용으로 반복 줄이기

타입 중복은 코드 중복만큼 많은 문제를 발생시킨다.

반복을 줄이는 간단한 방법은 타입에 이름을 붙이는 것이다. 상수를 사용해서 반복을 줄이듯이 중복된 타입에 이름을 붙여주자.

인터페이스가 다른 인터페이스를 확장하게 해서 반복을 제거할 수 있다. 이때 인터섹션 연산자(&)를 쓸 수도 있다.

interface State{
  userId: string;
  pageTitle: string;
  recentFiles: string[];
  pageContentes: string;
}

interface TopNavState {
  userId: string;
  pageTitle: string;
  recentFiles: string[];
}

다음과 같이 State의 부분집합인 TopNavState를 구현하고자 한다면 어떻게 타입 중복을 줄일 수 있을까?

type TopNavState = {
  userId: State['userId']
  pageTitle: State['pageTitle']
  recentFiles: State['recentFiles']
}

State를 인덱싱하여 속성의 타입에서 중복을 제거할 수 있다. 중복되는 코드를 더 줄여보자. 매핑된 타입을 사용하면 된다.

type TopNavState = {
  [k in 'userId' | 'pageTitle' | 'recentFiles']: State[k]
}

이런 맵핑된 타입을 사용해서 표준 라이브러리에서 Pick을 구현해 놓았다!

type Pick<T, K> = {[k in K]: T[k]}

Pick은 제너릭 타입이다. 마치 함수에서 두개의 매개변수 값을 받아서 결과값을 반환하는 것처럼, Pick은 T와 K 두가지 타입을 받아서 결과 타입을 반환한다.

값의 형태를 따르는 타입을 정의해 주고 싶을 때는 typeof를 사용하면 된다. 다만 이때는 타입 정의를 먼저 하고 값이 그 타입에 할당 가능하다고 선언하는 것이 좋다.

함수에서 매개변수로 들어갈 수 있는 값을 제한하기 위해 타입 시스템을 사용하는 것처럼 제너릭 타입에서 매개변수를 제한할 수 있는 방법이 필요하다. 이때 extends를 사용한다.

type Pick<T, K extends keyof T> = {[k in K]: T[K]}

extends가 부분집합을 표현함을 다시 생각하자. 결론적으로 잘못된 키를 넣으면 오류가 발생하게 된다.

[soyi47]

아이템 13. 타입과 인터페이스의 차이점 알기

• 타입과 인터페이스 모두 추가 속성과 함께 할당하면 동일한 오류가 발생한다.
• 인텍스 시그니처는 인터페이스와 타입에서 모두 사용할 수 있다.
• 함수 타입도 인터페이스나 타입으로 정의할 수 있다.
• 모두 제너릭이 가능하다
• 서로를 확장할 수 있다. 인터페이스는 타입을, 타입은 인터페이스를 확장할 수 있다. 단, 인터페이스는 유니온 타입 같은 복잡한 타입을 확장하지는 못 한다. 복잡한 타입을 확장할 때는 타입과 &를 사용한다.
• 클래스를 구현(implements)할 때는 타입과 인터페이스 둘 다 사용할 수 있다.

아이템 14. 타입 연산과 제너릭 사용으로 반복 줄이기

• 제너릭은 타입을 위한 함수와 같다. 제너릭 타입에서 매개변수를 제한할 때는 extends를 사용한다. extends는 제너릭 매개변수가 특정 타입을 확장한다고 선언할 수 있다. Pick, Partial, ReturnType과 같이 표준 라이브러리에 정의한 제너릭 타입에 익숙해지자.

• State의 부분 집합인 타입을 정의해보자.

  interface State {
      userId: string;
      pageTitle: string;
      recentFiles: string[];
      pageContents: string;
  }
  
  // 아래의 방법은 State 속성의 타입이 바뀌면 따라서 일일이 속성 타입을 바꿔줘야 한다.
  interface TopNavState {
      userId: string;
      pageTitle: string;
      recentFiles: string[];
  }
  
  // State를 인덱싱하여 속성 타입의 중복을 제거할 수 있다.
  type TopNavState = {
      userId: State['userId'];
      pageTitle: State['pageTitle'];
      recentFiles: State['recentFiles'];
  }
  
  // 매핑된 타입을 사용하여 중복을 조금 더 제거해보자.
  // 매핑된 타입은 배열의 필드를 루프 도는 것과 같은 방식이다.
  type TopNavState = {
  };
  
  // Pick을 사용하여 위의 패턴을 사용할 수 있다.
  // Pick은 T와 K 두 가지 타입을 받아서 결과 탕비을 반환하는 제너릭 타입이다.
  type TopNavState = Pick<State, 'userId' | 'pageTitle' | 'recentFiles'>;

• 유니온을 인덱싱하여 타입 반복 없이 타입을 정의할 수 있다.

  interface SaveAction {
      type: 'save';
  }
  
  interface LoadAction {
      type: 'load';
  }
  
  type Action = SaveAction | LoadAction;
  
  type ActionType = Action['type']; // "save" | "load"의 타입
  type ActionRec = Pick<Action, 'type'>; // {type: "save" | "load"}
  // Pick을 사용하면, 'type'이라는 속성을 가지는 인터페이스가 만들어진다.

• 매핑된 타입과 keyof를 사용하면, 타입으로부터 내부 속성이 모두 선택적 필드인 다른 타입을 만들 수 있다.

  • keyof는 타입을 받아서 속성 타입의 유니온을 반환한다.

    
    interface Options {
    width: number;
    height: number;
    color: string;
    label: string;
    }

  type OptionsUpdate = { [k in keyof Options]?: Options[k] }

  type OptionsKeys = keyof Options; // 타입이 "width" | "height" | "color" | "label"

• 값의 형태에 해당하는 타입을 정의하고 싶을 때는 typeof를 사용한다.

• 함수나 메서드의 반환 값에 명명된 타입을 만들고 싶을 때는 ReturnType 제너릭을 사용할 수 있다.

  function getUserInfo(userId: string) {
      // ...
      return {
          userId, 
          name, 
          age
      }
  }
  
  // 추론된 반환 타입은 { userId: string, name: string, age: string }
  type UserInfo = ReturnType<typeof getUserInfo>;