[TypeScript] 타입 조작 - 맵드 타입

 

🐾 타입 조작

 

 

---

🐾  맵드 타입

기존의 객체 타입을 기반으로 새로운 객체 타입을 만드는 타입 조작 기능

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

// 한 명의 유저 정보를 불러오는 기능
function fetchUser(): User{
    return {
        id: 1,
        name: '기지',
        age: 27,
    }
}

// 한 명의 유저 정보를 수정하는 기능
function updateUser(user: User){
    // 수정하는 기능
}

유저 정보를 관리하는 프로그램의 일부를 만든다고 가정하자.

유저 정보가 서버에 저장되어 있다고 가정하고, 한 명의 유저 정보를 불러오는 기능을 하는 함수를 만들었다.

또, 한 명의 유저 정보를 수정하는 기능을 만들어 준다.

 

만약, 유저 정보를 수정해야 한다면 updateUser 함수를 호출하고 여러개의 정보 중 수정하고 싶은 프로퍼티를 전해준다.

updateUser({
    age: 25, // ❌
})

하지만 updateUser 함수의 매개변수 타입은 User 타입으로 되어있기 때문에 일부 프로퍼티만 전달할 수 없다.

 

이를 해결하기 위한 방법 중 하나로 새로운 타입을 만들어준다.

type PartialUser = {
  id?: number;
  name?: string;
  age?: number;
}

function updateUser(user: PartialUser){
    // 수정하는 기능
}

updateUser({ // ✅
  age: 25
});

그런데 User 타입과 PartialUser 타입은 서로 중복된 프로퍼티를 정의하고 있다.

중복은 좋지 않은 코드이기 때문에 이 대신 맵드 타입을 이용한다.

 

 

 

🐾 맵드 타입 사용하기

// key in 프로퍼티
// key가 'id' 일 때 → id : User['id'] → id : number
// key가 'name'일 때 → name : User['user'] → name : string
// key가 'age'일 때 → age : User['age'] → age : number
type PartialUser = {
    [key in 'id' | 'name' | 'age']?: User[key]; // ?를 붙여 모두 선택적 프로퍼티 만들기
}

맵드 타입은 [key in 프로퍼티] 형식으로 작성한다.

• [key in 'id' | 'name' | 'age'] -> key가 한 번은 id, 한 번은 name, 한 번은 age가 됨
  • key가 'id' 일 때 → id : User['id'] → id : number
  • key가 'name'일 때 → name : User['user'] → name : string
  • key가 'age'일 때 → age : User['age'] → age : number

 

대괄호 뒤에 ?를 붙여 선택적 프로퍼티임을 명시한다.

 

따라서 PartialUser의 타입은 다음과 같이 정의된다.

이렇게 맵드 타입을 이용하면 간단한 코드만으로 중복 없이 기존 타입을 변환할 수 있다.

 

 

 

 

 

 

 

 

🐾 keyof 연산자와 사용하기

객체의 모든 프로퍼티를 작성하는 대신 keyof 연산자를 사용해 객체의 모든 프로퍼티를 가져오면 더 간단하게 작성할 수 있다.

// keyof 연산자 같이 쓰기
// keyof User => 'id' | 'name' | 'age'
type BooleanUser = {
    [key in keyof User]: boolean;
}

 

 

 

 

 

 

🐾 모든 프로퍼티를 읽기 전용으로 만들기

readonly 키워드를 앞에 붙여 모든 프로퍼티를 읽기 전용으로 만든다.

// 읽기 전용(readonly)으로 만들기
type ReadonlyUser = {
   readonly [key in keyof User]: User[key];
}

 

 

 

 

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의