[TS 유틸리티 타입 Omit, Pick] 이미 정의한 타입을 변환하거나 일부만 쓰고 싶을 경우

마음일기라는 팀프로젝트 진행하면서 타입에 대해 의문이 드는 경우가 생겼습니다.

*마음일기는 일기를 쓰면 해당일기가 무슨 감정인지에 따라 마음이 결정되는 그런 프로젝트입니다.*

 

문제발생

---

이전에 Diary라는 타입을 따로 지정해 두었는데,

export interface Diary {
    id: number;
    title: string;
    description: string;
    emotion: Emotion;
    lock: boolean;
    likes: number;
    weather: Weather;
    createdAt: string;
    updatedAt: string;
    author: string;
}

 

// 일기 작성
export const writeDiary = async ({
    title,
    description,
    weather,
    lock,
    createdAt,
}: {id: number; emotion: string; likes: number; updatedAt: string; author: string;}) => {
    const result = await instance.post("/diaries", {
        title,
        description,
        weather,
        lock,
        createdAt,
    });

    return result;
};

{id: number; emotion: string; likes: number; updatedAt: string; author: string;}

 

이미 Diary라는 타입에 다 지정되어 있는데 또 쓰는 게 맞을까?라는 의문이 들었습니다.

 

 

 

해결방안

---

 

이럴 땐 유틸리티 타입을 사용하면 됩니다.

밑에 따로 설명을 하겠지만

유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법입니다.

저는 그중에서 Pick, Omit을 사용해서 타입을 지정해 주었습니다.

// 일기 작성
export const writeDiary = async ({
    title,
    description,
    weather,
    lock,
    createdAt,
}: Omit<Diary, "id" | "emotion" | "likes" | "updatedAt" | "author">) => {
    const result = await instance.post("/diaries", {
        title,
        description,
        weather,
        lock,
        createdAt,
    });

    return result;
};

Omit : 특정 타입에서 지정된 속성만 제거한 타입

// 일기 삭제
export const deleteDiary = async ({ id }: Pick<Diary, "id">) => {
    const result = await instance.delete(`/diaries/${id}`);

    return result;
};

Pick : 특정 타입에서 몇 개의 속성을 선택한 타입

 

이렇게 써주니까

Diary타입에 있는 타입들이구나,

wirteDiary, deleteDiary는 Diary타입과 관련된 타입이구나

라고 바로 인식이 돼서 좋았습니다.

 

 

유틸리티 타입이란?

---

유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법입니다.

유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만

유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있습니다.

 

 

자주 사용되는 유틸리티 타입

---

 

Pick<Type, Keys> (픽)

특정 타입에서 몇 개의 속성을 선택(pick)하여 타입을 정의

interface Hero {
  name: string;
  skill: string;
}
const human: Pick<Hero, 'name'> = {
  name: '스킬이 없는 사람',
};

 

Omit<Type, Keys> (오밋)

특정 타입에서 지정된 속성만 제거한 타입을 정의

interface AddressBook {
  name: string;
  phone: number;
  address: string;
  company: string;
}
const phoneBook: Omit<AddressBook, 'address'> = {
  name: '재택근무',
  phone: 12342223333,
  company: '내 방'
}
const chingtao: Omit<AddressBook, 'address'|'company'> = {
  name: '중국집',
  phone: 44455557777
}

 

Record<Keys, Type> (레코드)

타입의 프로퍼티를 다른 타입에 매핑시키는 데 사용

interface PageInfo {
  title: string;
}
 
type Page = "home" | "about" | "contact";
 
const nav: Record<Page, PageInfo> = {
  about: { title: "about" },
  contact: { title: "contact" },
  home: { title: "home" },
};

 

 

이밖에도 유틸리티 타입은 무수히 많습니다.

• Partial<Type> : 특정 타입의 부분 집합을 만족하는 타입을 정의
• Required<Type> : Partial의 반대
• Readonly<Type> : 타입의 모든 프로퍼티가 읽기 전용으로 설정된 타입
• Exclude<Type, ExcludedUnion> : ExcludedUnion에 할당할 수 있는 모든 유니온 멤버를 타입에서 제외하여 타입 생성
• Extract<Type, Union> : Union에 할당할 수 있는 모든 유니온 멤버를 타입에서 가져와서 타입 생성
• NonNullable<Type> : null, undefined를 제외하고 타입 생성
• Parameters<Type> : 함수 타입의 매개변수에 사용된 타입에서 튜플 타입 생성
• ConstructorParameters<Type> : 생성자 함수 타입의 타입에서 튜플 또는 배열 타입을 생성
• ReturnType<Type> : 함수 타입의 반환 타입으로 구성된 타입 생성
• InstanceType<Type> : 타입의 생성자 함수의 인스턴스 타입으로 구성된 타입을 생성
• ThisParameterType<Type> : 함수 타입의 this 매개변수의 타입
• OmitThisParameter<Type> : 타입에서 this매개변수를 제거
• ThisType<Type> : 변형된 타입을 반환하지 않고, 대신 문맥적 this 타입에 표시하는 역할을 한다.

최대한 간추려서 작성했습니다. 자세한 내용을 보시려면 아래 링크를 클릭해 주세요.

https://www.typescriptlang.org/ko/docs/handbook/utility-types.html

Documentation - Utility Types

 

 

출처

---

https://joshua1988.github.io/ts/usage/utility.html#%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0-%ED%83%80%EC%9E%85%EC%9D%B4%EB%9E%80

유틸리티 타입 | 타입스크립트 핸드북

https://www.typescriptlang.org/ko/docs/handbook/utility-types.html

Documentation - Utility Types