[TS] 타입 조합

교차 타입

• 교차 타입을 사용하면 여러 가지 타입을 결합하여 하나의 단일 타입으로 만들 수 있다. 기존에 존재하는 다른 타입들을 합쳐서 해당 타입의 모든 멤버를 가지는 새로운 타입을 생성한다.
• & 를 사용해서 표기하며 결과물로 탄생한 단일 타입에는 타입 별칭을 붙일 수 있다.

type ProductItem = {
  id: number;
  name: string;
  price: number;
  imageUrl: string;
  quantity: number;
}
 
type ProductItemWithDiscount = ProductItem & { discountAmount: number };

유니온 타입

• 유니온 타입은 타입 A 또는 타입 B 중 하나가 될 수 있는 타입을 말하며 A | B 같이 표기한다.
• 함수 내부에서 quantity 를 참조하면 컴파일 에러가 발생한다. 이는 CardItem에는 quantity 가 없기 때문이다.

type ProductItem = {
  id: number;
  name: string;
  price: number;
  imageUrl: string;
  quantity: number;
}
 
type CardItem = {
  id: number;
  name: string;
  imageUrl: string;
}
 
type PromotionEventItem = ProductItem | CardItem;
 
const printPromotionItem = (item: PromotionEventItem) => {
  console.log(item.quantity); // 타입 에러
}

인덱스 시그니처

• 인덱스 시그니처는 특정 타입의 속성 이름은 알 수 없지만 속성값의 타입을 알고 있을 때 사용하는 문법이다.

interface IndexSignatureEX {
  [key: string]: number;
}

• 인덱스 시그니처를 선언할 때 다른 속성을 추가로 명시해줄 수 있는데 이때 추가로 명시된 속성은 인덱스 시그니처에 포함되는 타입이어야 한다.

interface IndexSignatureEX {
  [key: string]: number | boolean;
  length: number;
  isValid: boolean;
  name: string; // 타입 에러
}

인덱스드 엑세스 타입

• 다른 타입의 특정 속성이 가지는 타입을 조회하기 위해 사용한다. 인덱스에 사용되는 타입 또한 그 자체로 타입이기 때문에 유니온 타입, keyof, 타입 별칭 등의 표현을 사용할 수 있다.

type Example = {
  a: number;
  b: string;
  c: boolean;
}
 
type IndexedAccess = Example['a']; // number
type IndexedAccess2 = Example['a' | 'b']; // string | number
type IndexedAccess3 = Example[keyof Example]; // string | number | boolean
 
type ExAlias = 'b' | 'c';
type IndexedAccess4 = Example[ExAlias]; // string | boolean

• 배열의 요소 타입을 조회하기 위해 인덱스드 엑세스 타입을 사용할 수 있다. 배열 타입의 모든 요소는 전부 동일한 타입을 가지며 배열의 인덱스는 숫자 타입이다.

const promotionList = [
  { type: 'product', name: 'chicken' },
  { type: 'product', name: 'pizza' },
  { type: 'card', name: 'cheer-up' },
];
 
type ElementOf<T extends readonly any[]> = T[number];
type PromotionItemType = ElementOf<typeof promotionList>;

맵드 타입

• 맵드 타입은 다른 타입을 기반으로 한 타입을 선언할 때 사용하는 문법으로 인덱스 시그니처 문법을 사용해 반복적인 타입 선언을 효과적으로 줄일 수 있다.

type Subset<T> = {
  [K in keyof T]?: T[K];
}
 
type Example = {
  a: number;
  b: string;
  c: boolean;
}
 
const aExample: Subset<Example> = { a: 3 };
const bExample: Subset<Example> = { b: 'hello' };
const acExample: Subset<Example> = { a:4, c: true };

• 기존 타입에 존재하던 readonly 나 ? 앞에 - 를 붙여주면 해당 수식어를 제거한 타입을 선언할 수 있다.

type ReadOnlyEx = {
  readonly a?: number;
  readonly b?: string;
}
 
type CreateMutable<Type> = {
  -readonly [Property in keyof Type]-?: Type[Property];
}
 
type ResultType = CreateMutable<ReadOnlyEx>;

• 맵드 타입에서는 as 키워드를 사용하여 키를 재지정할 수 있다.

type Table = {
  a: number;
  b: string;
}
 
type ID = keyof Table;
 
type newTable = {
  [index in ID as `new_${index}`]: Table[index];
}

템플릿 리터럴 타입

• 자바스크립트의 템플릿 리터럴 문자열을 사용하여 문자열 리터럴 타입을 선언할 수 있는 문법이다.

type Stage =
  | 'init'
  | 'select-image'
  | 'edit-image'
  | 'decorate-card';
type StageName = `${Stage}-stage`;