[TypeScript] 타입 별칭(Type Alias), 인터섹션 타입 (Intersection Type), 맵드 타입(Mapped type)

타입 별칭(Type Alias)

타입 별칭은 새로운 타입을 정의하며, 

특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다.

 

📝 타입 별칭(Type Alias) 형태

type 별칭 = 타입;

 

👉 타입 정의

type Fruits = {
  name: string;
  emoji: string;
  amount: number;
};

 

👉 타입 사용

        기본 type처럼 변수명 뒤에 : 타입명을 붙여서 선언한다.

const pineapple: Fruits = {
  name: 'pineapple',
  emoji: '🍍',
  amount: 3,
};

---

다음과 같이 빈 객체를 해당 타입으로 지정하고, 후에 값을 할당할 수도 있다.

const coconut = {} as Fruits;

coconut.name = 'coconut';
coconut.emoji = '🥥';
coconut.amount = 1;

 

---

인터섹션 타입 (Intersection Type)

여러 타입을 모두 만족하는 하나의 타입을 말한다.

union type이 | 연산자로 '열거된 여러 타입들 중 하나의 타입'을 의미한다면, 

intersection type은 & 연산자로

열거된 여러 타입을 모두 만족하는(모든 속성을 가진) 새로운 타입

 

👉 예를 들어 다음처럼 Day, Weather이라는 두 개의 type alias가 있을 때

type Day = {
  month: string;
  date: number;
  dayOfWeek: string;
};

type Weather = {
  sunny: boolean;
  rainny: boolean;
};

 

👉 이들로부터 Today라는 새로운 intersection type을 만들 수 있다.
      Today는 Day와 Weather이 지닌 모든 프로퍼티가 포함된 타입이 된다.

type Today = Day & Weather;

const now: Today = {
  month: 'June',
  date: 18,
  dayOfWeek: 'Fri',
  sunny: false,
  rainny: true,
};

 

---

맵드 타입(Mapped type)

맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미합니다. 
마치 자바스크립트 map() API 함수를 타입에 적용한 것과 같은 효과를 가집니다.

 

📝 맵드 타입(Mapped type) 형태

  type MappedType = {
    [Property in ExistringType]: NewTypeTransformtion;
  }

  // Property: 기존 타입의 각 속성을 나타내는 변수
  // ExistringType: 변환하려는 기존 타입
  // NewTypeTransformtion: 새로운 타입을 생성하기 위한 변환 규칙을 정의하는 부분

 

👉 모든 속성을 선택적으로 만들거나, 읽기 전용으로 변환하는 경우에 맵드 타입을 사용한다.

  // 선택적으로 만드는 맵드 타입
  type PartialType<T> = {
    [Property in keyof T]?: T[Property];
  }

  interface User {
    age: number;
    name: string;
  }

  // User 타입의 모든 속성을 선택적으로 만듦
  type PartialUser = PartialType<User>



  // 읽기 전용으로 만드는 맵드 타입
  type ReadonlyType<T> = {
    readonly [Property in keyof T]: T[Property];
  };

  interface User {
    age: number;
    name: string;
  }

  // User 타입의 모든 속성을 읽기 전용으로 만듦
  type ReadonlyUser = ReadonlyType<User>;

 

사용예시

// 자료형을 어떻게 만들것인가?
type gender = "남성" | "여성";
let a8: gender= "남성";

type productt = {name:string, price:number};
type counter = {count:number};

// 오브젝트 형일때만 오브젝트형을 서로 섞는 기법 (Intersection Type)
type productCounter = productt & counter;
let b7: productCounter = {name: "사과", price:5000, count:5};

// 매우 특수한 자료형 만들기 (Mapped by Types)
// 일괄적으로 자료형 변경하고 싶을 때 쓴다.
// 현재 자료형 문자열로 통일적으로 바꿨다.
type mappedProduct = {[key in keyof productCounter]:string};

---