타입스크립트 맵드 타입 - typescript mapped type

타입스크립트의 맵드 타입

객체 타입을 조작하는 기능이다.

// 맵드 타입
 
interface User {
    id: number;
    name: string;
    age: number;
}
 
// 한 명의 유저 정보를 불러오는 기능
function fetchUser(): User {
    //...기능
    id: 1,
    name: "go",
    age: 27,
}
 
// 한 명의 정보를 수정하는 기능
function updateUser(user: User) {
    //... 수정하는 기능
}
 
updateUser({
    id: 1,
    name: "go",
    age: 28
});

만약 이런식으로 유저의 정보를 수정한다고 할때 나이만 수정을 하려면 

{ age: 28}을 넣어야하지만 지금처럼 user:User로 타입을 선언해버리면

{ id: 1, name: "go", age: 28 } 이런식으로 기존과 같은 id, name 값을 넣어주어야하는 번거로움이 있다.

이 때 사용하면 좋은 것이 mapped type 이다.

// 맵드 타입
 
interface User {
    id: number;
    name: string;
    age: number;
}
 
type PartialUser = {
    [key in keyof User]?: User[key];
}
// 한 명의 유저 정보를 불러오는 기능
function fetchUser(): User {
    //...기능
    id: 1,
    name: "go",
    age: 27,
}
 
// 한 명의 정보를 수정하는 기능
function updateUser(user: PartialUser) {
    //... 수정하는 기능
}
 
updateUser({
   // id: 1, => 생략 가능
   // name: "go", => 생략 가능
    age: 28
});

mapped type은 일단 interface에서 사용을 하는 것이 아닌 type에서 사용한다.

그리고 [key in keyof User] 에는 될 수 있는 key 값이고 User[key]는 value 값이다.

참고로 keyof 연산자를 사용하면 모든 key를 union 으로 만들어 준다.

keyof User = "id" | "name" | "age" 가 된다.

그럼 결국 key는 "id" 가 될 수 있고 "name"이 그리고 "age" 가 될 수 있다는 뜻이다.

그 다음은 value는 User["id"] => number, User["name"] => string , User["age"] => number가 되는 것이다.

그리고 마지막에 있는 ? 가 모든 프로퍼티를 선택적으로 만들어 준다! 

이렇게 되면 updateUser에서 id 와 name을 생략하고 수정할 age만 들어가도 된다.

 

이렇게 맵드 타입을 이용하면 다양하게 활용할 수 있다.

또 다른예로 readonly를 이용해보면  

// 맵드 타입
 
interface User {
    id: number;
    name: string;
    age: number;
}
 
type PartialUser = {
    [key in keyof User]?: User[key];
}
 
 
type ReadonlyUser = {
    readonly [key in keyof User]: User[key];
}
 
// 한 명의 유저 정보를 불러오는 기능
function fetchUser():  ReadonlyUser {
    //...기능
    id: 1,
    name: "go",
    age: 27,
}
 
const user1 = fetchUser();
// user1.id = 1 => 불가능
 
// 한 명의 정보를 수정하는 기능
function updateUser(user: User) {
    //... 수정하는 기능
}
 
updateUser({
    id: 1,
    name: "go",
    age: 28
});

이런식으로 readonly를 앞에 붙여주면 모든 키에 readonly가 적용되면서 user1의 프로퍼티의 값을 고정 시킬 수 있다.

 

끝

 

참고: 한 입 크기로 잘라먹는 타입스크립트 - 이정환