TypeScript - Utility Types 1

Utility Types

타입스크립트에서는 타입을 바꾸기위한 다양한 유틸리티 타입들이 존재한다.

Patial

Partial<Type>은 타입의 모든 프로퍼티를 옵셔널하도록 바꿔준다

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

function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>){ // title?: string; description?: string; 과 같다.
  return { ...todo, ...fieldsToUpdate };
}

const todo1:Todo = {
  title: "organize desk",
  description: "clear clustter",
};

const todo2 = updateTodo(todo1, {
  description: "throw out trash",
});

Required

Required<Type>은 타입의 모든 프로퍼티를 필수로 만들어준다.

interface Props {
  a?: number;
  b?: string;
}

const obj: Props = { a: 5 };
const obj2: Required<Props> = { a: 5 }; // a!: number; b!: string 과 같다.
// Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.

Readonly

Readonly<Type> 은 타입의 모든 프로퍼티를 readonly로 만들어 변하지 않는 값으로 만들어준다.

interface Todo {
  title: string;
} 

const todo: Readonly<Todo> = {
  title: "Delete inactive users",
}; // interface Todo { readonly title: string;} 와 같다.

todo.title = "Hello";
// Cannot assign to 'title' because it is a read-only property.

이 유틸리티 타입은 Object.freeze에서도 쓰인다.

  function freeze<Type>(obj: Type): Readonly<Type>;

Record<Keys, Type>

Record<Keys, Type> 은 객체의 키를 문자열 리터럴 타입으로 제한하고 싶을 때 유용하다.

interface CatInfo {
  age: number;
  breed: string;
}

type CatName = "miffy" | "boris" | "mordred";

const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: "Persian" },
  boris: { age: 5, breed: "Maine Coon" },
  mordred: { age: 16, breed: "British Shorthair" },
};

비슷한 구조로 인덱스 시그니쳐가 있는데

type CatInfo {
  [name:string]: {age:number; breed:string;}
}

인덱스 시그니쳐의 경우 문자열 리터럴을 Key값으로 사용하는 경우 오류가 발생하는 반면 Record Type의 경우에는 오류가 발생하지 않는다.