섹션 11 - 프로젝트 전화번후부 애플리케이션

섹션 12 - 타입추론

섹션 13 - 타입단언

섹션 14 - 타입가드

섹션 15 - 타입호환

섹션 16 - 타입모듈화

유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법 ( Partial, Pick, Omit )

*) 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환가능

mapped type

type Subset<T> = {
  [K in keyof T]?: T[K];
}

ex) 업무에서 겪은 예제

난 이런 느낌을 원했다..

ProductGroupsType과 CustomFundingStatus ( 제네릭 )을 키 값으로 가지지만 value의 타입을 지정해주고 싶어!

// imported as types.ts file
enum ProductGroupsType {
  nft = 'nft',
  sale = 'sale',
  expectedSale = 'expectedSale',
  auction = 'auction',
  expectedAuction = 'expectedAuction',
  funding = 'funding',
  expectedFunding = 'expectedFunding',
  luckydraw = 'luckydraw',
}

interface typeInfoContainerValue {
  name: string;
  leftBox: {
    color: string;
    borderColor: string;
    backgroundColor: string;
  };
  rightBox: {
    color: string;
    borderColor: string;
    backgroundColor: string;
  };
}
enum CustomFundingStatus {
  BEFORE = 'BEFORE',
  NOT_FUNDING = 'NOT_FUNDING',
  FUNDING = 'FUNDING',
  SUCCESS = 'SUCCESS',
  FAIL = 'FAIL',
}

// 아무리 봐도 너가 문젠데 뭐가 문젤까.
type ITypeInfoContainerDefaultValue<T> = {
 [index in keyof T]: typeInfoContainerValue;
};

const typeInfoContainerDefaultValueByFunding: ITypeInfoContainerDefaultValue<CustomFundingStatus> =
 {
  BEFORE: {
   name: '펀딩예정',
   leftBox: {
    color: '#1F99FF',
    borderColor: '#1F99FF',
    backgroundColor: '#1F99FF',
   },
   rightBox: {
    color: '#1F99FF',
    borderColor: '#1F99FF',
    backgroundColor: '#1F99FF',
   },
  },
  FUNDING: {
   name: '펀딩중',
   leftBox: {
    color: '#1F99FF',
    borderColor: '#1F99FF',
    backgroundColor: '#1F99FF',
   },
   rightBox: {
    color: '#1F99FF',
    borderColor: '#1F99FF',
    backgroundColor: '#1F99FF',
   },
  },
  FAIL: {
   name: '펀딩종료',
   leftBox: {
    color: '#3D3D3D',
    borderColor: '#3D3D3D',
    backgroundColor: '#3D3D3D',
   },
   rightBox: {
    color: '#3D3D3D',
    borderColor: '#3D3D3D',
    backgroundColor: '#3D3D3D',
   },
  },
  SUCCESS: {
   name: '펀딩종료',
   leftBox: {
    color: '#3D3D3D',
    borderColor: '#3D3D3D',
    backgroundColor: '#3D3D3D',
   },
   rightBox: {
    color: '#3D3D3D',
    borderColor: '#3D3D3D',
    backgroundColor: '#3D3D3D',
   },
  },
 };

const typeInfoContainerDefaultValue: ITypeInfoContainerDefaultValue<ProductGroupsType>
 = {
 expectedAuction: {
  name: '경매예정',
  leftBox: {
   color: '#F54A38',
   borderColor: '#F54A38',
   backgroundColor: '#F54A38',
  },
  rightBox: {
   color: '#F54A38',
   borderColor: '#F54A38',
   backgroundColor: '#F54A38',
  },
 }
}

type Record<K extends keyof any, T> = {
    [P in K]: T;
};