유틸리티 타입 - Partial, Readonly

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 들어가기에 앞서...

이번에는 지난 번 배웠던 제네릭 타입처럼 내장된 다른 유틸리티 타입에 대해 알아보도록 하겠습니다!
내용이 많을 것 같지만 배울 것은 두 개,
Partial 타입과 Readonly 타입 입니다!

👀 Partial 타입

이 파셜타입은 언제쓸까요?
객체의 속성을 지정하여 타입처럼 사용할 때,
이 객체의 모든 속성이 아니라 선택적으로 사용할 수 있게 하려면 파셜타입이 유용합니다.

예제를 보시죠!

interface Todo {
  title: string;
  description: string;
}
//Todo 타입의 속성을 선택적으로 받을 수 있습니다!
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",
});

이 예제의 updateTodo의 매개변수 fieldsToUpdate는 Partial을 사용했기 때문에
title 속성을 받지 않고 description만 받아도 에러가 생기지 않습니다.

이렇게 Partial을 사용하면 타입의 속성을 선택적으로 받을 수 있습니다.

👀 Readonly 타입

배열이나 객체의 요소들을 더 이상 건드리지 않고
생성, 삭제 등의 작업을 할 수 없도록 할 때 어떻게 할까요?
리드온리 타입으로 바꿔주면 말 그대로 읽기만 하도록 할 수 있습니다!

이것도 예제를 보시죠!

interface Todo {
  title: string;
}
 
const todo: Readonly<Todo> = {
  title: "Delete inactive users",
};
 
//이것을 수정, 삭제 도는 assign 등을 사용하면 에러가 납니다!
todo.title = "Hello";

위 예제의 todo.title의 값을 수정, 삭제하거나 todo 객체에 assign 등을 사용하면 에러가 납니다.

마치 잠금한 것처럼 Readonly를 사용해 todo를 읽기 전용으로 만들었기 때문입니다.

😝 마무리

이번에는 간단하게 제네릭 타입에 이어 내장 유틸리티 타입 몇가지를 살펴보았습니다.
더많은 내장 유틸리티 타입은 참고에 링크로 걸어놓겠습니다!

저는 다음 시간에도 살아남을 수 있을까요?!😂

• 참고:
  • 내장 유틸리티 타입: https://www.typescriptlang.org/docs/handbook/utility-types.html
  • Typescript 공식문서: https://www.typescriptlang.org/docs/handbook/basic-types.html
  • 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
    https://www.udemy.com/course/best-typescript-21/