타입스크립트 - 맵드 타입

맵드 타입

기존의 객체 타입을 기반으로 새로운 객체 타입을 만드는 문법

• 인터페이스에서는 사용할 수 없다. 타입 별칭으로 써야함

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

//한명의 유저 정보를 불러오는 기능
function fetchUser() : User{
  //... 기능
  return {
    id: 1,
    name: "kim",
    age: 27
  }
}
//한명의 유저 정보를 수정하는 기능
function updateUser(user: User) {
  //수정 기능
}

updateUser({
  id: 1,
  name: 'kim',
  age: 25
})

• 다음과 같은 예가 있다고 하자.
• updateUser에서 나이만 바꾸고 싶을 때 age만 수정하고 싶은데, updateUser함수 매개변수의 타입을 User로 했기에 id,name 다 넣어줘야한다. 수정하고싶다면 가장 간단한 방법으로는 인터페이스를 따로 만들고 ?인 선택적 프로퍼티를 붙여주는 것이다.

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

interface PartialUser {
  id?: number;
  name?: string;
  age?: number;
}

//한명의 유저 정보를 불러오는 기능
function fetchUser() : User{
  //... 기능
  return {
    id: 1,
    name: "kim",
    age: 27
  }
}
//한명의 유저 정보를 수정하는 기능
function updateUser(user: PartialUser) {
  //수정 기능
}

updateUser({
  id: 1,
  // name: 'kim',
  // age: 25
})

• 그러면 (임시) 해결로 볼 수 있다.
• 그런데, ? 붙인거 말고 User랑 너무 똑같네 ? 이러한 중복을 해결하기 위해 맵드 타입을 쓸 수 있다.

type PartialUser = {
  [key in "id" | "name" | "age"] : User[key]
}

• 맵드 타입은 타입별칭으로 써야 한다.
• 앞의 [key in "id" | "name" | "age"] 은 key로 어떤 값을 쓸 수 있는지를 정의하는 것이다.
  • 이 객체에는 key값으로 id, name, age 가 있을수 있다
• : 뒤의 User[key] 는 어떤 value(값) 을 가질것인지 정의하는 것이다.
  • 인덱스드 액세스 타입과 같다.
• 여기 이 형태에서 선택적 프로퍼티를 붙이려면?

type PartialUser = {
  [key in "id" | "name" | "age"]?: User[key];
};

• ? 넣어주면 된다.

맵드 타입 활용 1. keyof와 같이 쓰는 맵드 타입

• key in 뒤에 하나씩 key를 정의하는 건 또 비효율적으로 보일 수 있다. 앞서 배운 keyof 연산자를 같이 활용해보자.

type PartialUser = {
  [key in keyof User]?: User[key];
};

• keyof User 를 통해 User 인터페이스의 key를 유니언타입으로 뽑아오니, 앞서 설정한 id" | "name" | "age" 와 동일한 효과를 누릴 수 있다.

맵드 타입 활용 2.

• User 인터페이스에서 키만 가져오고 타입을 바꿔줄 수도 있다.

type BooleanUser = {
	[key in keyof User] : boolean;
}