10.1 막강한 타입들 소개 (advanced types)

• Conditional Types
• Mapped Types
• Utility Types
• etc.

10.2 Type(Alias)와 Interface, 뭘 써야 할까?(기술 관점)

배경

• type과 interface는 TS 초창기에는 서로 많이 달랐지만, 갈수록 비슷해지고 있고, 버전마다 꽤 빈번하게 업데이트 되고 있다고 한다.

공통점과 차이점 (type과 interface로 할 수 있는것들, 할 수 없는 것들)

{
  type PositionType = {
    x: number;
    y: number;
  };
  // type PositionType = { // error
  //   z: number;
  // }
  interface PositionInterface {
    x: number;
    y: number;
  }
  // 😆 only interfaces can be merged.
  interface PositionInterface {
    z: number;
  }
	... 
}

• 우선 기본적으로 둘다 “커스텀 타입”을 만들기 위한 용도로 사용할 수 있다.
• 하지만 같은 타입 이름에 중복하여 타입을 설정하는 것은 interface만 가능하다.

  • 예를들어 PositionInterface의 경우 두번에 걸쳐서 타입을 정의했는데, 이 경우 둘을 합쳐서

    {
    	x: number;
    	y: number;
    	z: number;
    }
    

    • 위와 같은 형태를 가진 객체 타입인 것으로 정의가 된다.

  • 반면 type의 경우 중복 정의가 불가능하다. (에러 발생)

{
	...
  // object ★
  const obj1: PositionType = {
    x: 1,
    y: 1,
  };
  const obj2: PositionInterface = {
    x: 1,
    y: 1,
    z: 1,
  };

  // class ★
  class Pos1 implements PositionType {
    x: number;
    y: number;
  }
  class Pos2 implements PositionInterface {
    x: number;
    y: number;
    z: number;
  }

  // Extends
  type ZPositionType = PositionType & { z: number };
  
  interface ZPositionInterface extends PositionInterface {
    z: number;
  }

  ...
}

• 다음으로 둘다 객체 type annotation, class, extends 사용이 가능하다.
  • 다만 extends의 경우, type은 intersection(&)을 통해 같은 효과를 구현한다.

{
	...
  // 😆 Type aliases can use computed properties 
  // (e.g. Mapped, Utility, Index types)
  type Person = {
    name: string;
    age: number;
  };
  type Name = Person['name']; // string

	// others..
  type NumberType = number;
  type Direction = 'left' | 'right';
}

• 마지막으로 computed properties의 경우 type만 사용이 가능하다.
  • 이 개념은 뒤에 더 자세히 배울 것이라고 하는데. 만약 설명이 부족하다면 다시 조사해서 정리해보자.
• 기타 동작도 확인해주자. (Union type 등)

10.3 Type(Alias)와 Interface, 뭘 써야 할까?(개념 관점)

Interface