typescript 객체 생성 유틸

27 Apr 2022

Reading time ~2 minutes

typescript 객체 생성 유틸

typescript를 사용하여 entity, dto, ro 등을 생성하다 보면, 같은 항목을 가진 객체들이 계속 생겨 납니다. 이때, 하나가 변경되면 모든 항목의 변경을 해줘야 하는데, 이를 쉽게 하는 방법으로 Utility Types를 사용합니다.

Partial

Type 집합의 모든 프로퍼티를 선택적으로 타입을 생성합니다. 이 유틸리티는 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환합니다.

interface Todo {
  title: string;
  description: string;
}
 
function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) {
  return { ...todo, ...fieldsToUpdate };
}
 
const todo1 = {
  title: "organize desk",
  description: "clear clutter",
};
 
const todo2 = updateTodo(todo1, {
  description: "throw out trash",
});

Required

Type 집합의 모든 프로퍼티를 필수로 설정한 타입을 생성합니다. Partial의 반대입니다.

interface Props {
  a?: number;
  b?: string;
}
 
const obj: Props = { a: 5 };
 
const obj2: Required<Props> = { a: 5 };
Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Pick<Type, Keys>

Type에서 프로퍼티 Keys의 집합을 선택해 타입을 생성합니다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Pick<Todo, "title" | "completed">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};
 
todo;
 
const todo: TodoPreview

Omit<Type, Keys>

Type에서 모든 프로퍼티를 선택하고 키를 제거한 타입을 생성합니다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Omit<Todo, "description">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};
 
todo;
 
const todo: TodoPreview

Readonly

Type 집합의 모든 프로퍼티읽기 전용(readonly)으로 설정한 타입을 생성합니다, 즉 생성된 타입의 프로퍼티는 재할당될 수 없습니다.

interface Todo {
  title: string;
}
 
const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};
 
todo.title = "Hello";
Cannot assign to 'title' because it is a read-only property.

Record<Keys,Type>

타입 Type의 프로퍼티 키의 집합으로 타입을 생성합니다. 이 유틸리티는 타입의 프로퍼티를 다른 타입에 매핑 시키는데 사용될 수 있습니다.

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

그외

대부분 상위 유틸을 사용하여 객체를 생성 합니다. 그 외에 필요한 항목은 Utility Types에서 확인하여 사용하세요.

참고자료

Utility Types