내가 보려고 작성한 Typescript Utility Types✌️

깃허브에 있는 코드를 보던 중 Record를 보게 되었고, 뭔지 찾아보다가 Typescript Utility Types라는 것을 알게되었다. Record와 같은 Utility Types을 알아두면 프로젝트를 할 때 유용하게 잘 쓰겠다 싶어 정리를 한 번 해보려고 한다.

https://www.typescriptlang.org/ko/docs/handbook/utility-types.html 해당 문서를 보고 정리한 글입니다 😀

타입스크립트는 타입 변환을 쉽게 하기 위해서 몇 가지 유틸리티 타입을 제공한다.

Partial<Type>

interface Todo {
  title: string;
  description: string;
}
 
const todo: Partial<Todo> = { // 가능
  description: "throw out trash",
} 

Type 집합의 모든 프로퍼티 중에서 선택적으로 타입을 생성한다.

Required<Type>

interface Todo {
  title: string;
  description: string;
}
 
const todo: Required<Todo> = { // Partial과는 다르게 에러가 난다.
  description: "throw out trash",
} 

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

여기서, 궁금증...이 생겼다..!

🤔 아래의 코드처럼 Required를 적어주지 않더라도 에러가 날텐데 왜 Required 타입이 필요한가?

interface Todo {
  title: string;
  description: string;
}
 
const todo: Todo = { // Required를 적어주지 않더라도 에러가 난다.
  description: "throw out trash",
} 

기존 속성타입이 옵셔널이었다고 하더라도, 필수 타입으로 지정된다!
아래의 코드와 같은 상황에서 유용하게 사용될 수 있을것 같다.

interface Todo {
    title?: string;
    description?: string;
}

const todo1: Todo = { title: 'todo1' };

const todo2: Required<Todo> = { title: 'todo2' };

Readonly<Type>

Type 집합의 모든 프로퍼티를 읽기 전용으로 설정한 타입을 생성한다.

interface Todo {
  title: string;
}
 
const todo: Readonly<Todo> = { 
  title: "throw out trash",
} 

todo.title = 'hello'; // 에러 - 읽기 전용인데 수정하려고 했기 때문 

Record<keys, Type>

프로퍼티 키값을 keys으로, 값을 Type 의 집합으로 타입을 생성한다.

export type Todo = {
    title: string;
    description: string;
};

type TodoIndex = number;

const x: Record<TodoIndex, Todo> = {
    0: {
        title: 'foo',
        description: 'foooooo',
    },
    1: {
        title: 'var',
        description: 'varrrrrr',
    },
};

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,
};

Omit<Type, keys>

Type에서 프로퍼티 선택한 Keys를 제거한 타입을 생성한다.

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

👉👉 Utility Types를 공부해보니 내가 작성했던 중복된 interface 가 떠올랐다. Utility Types에 대해 이제 알게되었으니 interface를 더욱 간결하고 유용하게 작성할 수 있을 것 같다. 🔥