[TypeScript] 유틸리티 타입

상현·2023년 12월 14일
1

TypeScript

목록 보기
3/4
post-thumbnail

유틸리티 타입

타입스크립트에서 기본적으로 제공하는 여러 유틸리티 타입이 있다.
Documentation - Utility Types

Partial< T >

Partial 타입은 객체의 속성이 전부 optional하게 만들어 준다.

interface CourseGoal {
    title: string;
    description: string;
    competeUntil: Date
}

function createCourseGoal (title: string, description: string, date: Date) : CourseGoal {
    let courseGoal: CourseGoal = {};
    courseGoal.title = title;
    courseGoal.description = description;
    courseGoal.competeUntil = date;
    return courseGoal;
}

위와 같이 작성할 경우 에러가 난다. 왜냐하면 먼저 객체를 생성한 후 뒤에서 모든 속성을 추가해주긴 했지만, 타입스크립트는 속성이 null 일 수 있다고 판단하여 에러를 내뱉는다 만약 Partial 을 사용하고 싶지 않다면 객체를 선언과 동시에 초기화를 해주어야 한다.
하지만 Partial 로 타입선언을 해주면 모든 속성이 optional이 되기 때문에 모든 속성을 넣어줄 필요가 없다.

function createCourseGoal (title: string, description: string, date: Date) : CourseGoal {
    let courseGoal: Partial<CourseGoal> = {}; // CourseGoal의 타입을 갖지만 모든 속성이 필요하진 않다.
    courseGoal.title = title;
    courseGoal.description = description;
    courseGoal.competeUntil = date;
    return courseGoal as CourseGoal; // 함수 리턴 타입이 CourseGoal로 되어있기 때문에 형변환을 해준다.
}

Required< T >

Partial<T> 와 반대로 모든 속성을 필수로 만들어준다.

interface Person {
  name: string;
  age: number;
  address?: string;
}

type RequiredPerson = Required<Person>;

Readonly< T >

변경이 되선 안되는 값을 만들 경우 Readonly 타입을 사용할 수 있다.

const names: Readonly<string[]> = ['lee', 'kim'];
names.push('sanghyeon'); // 에러

Pick<T, K>

타입 T 에서 K 속성들만 선택하여 새로운 타입을 만든다.

interface Person {
  name: string;
  age: number;
  address: string;
}

type SubsetPerson = Pick<Person, "name" | "age">; // { name, age }

const person: SubsetPerson = { name: "Spartan", age: 30 };

Omit<T, K>

Pick<T, K> 와 반대로 타입 T 에서 K 속성만 제외하여 새로운 타입을 만든다.

interface Person {
  name: string;
  age: number;
  address: string;
}

type SubsetPerson = Omit<Person, "address">;

const person: SubsetPerson = { name: "Alice", age: 30 };

Record<Keys, Types>

속성 키가 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" },
};
 
cats.boris; // { age: 5, breed: "Maine Coon" }

위의 나열한 유틸리티 타입 말고도 다양한 유틸리티 타입이 존재한다. 앞으로 공부하면서 모두 알아봐야겠다.

profile
프론트엔드 개발자 🧑🏻‍💻 https://until.blog/@love

1개의 댓글

comment-user-thumbnail
2023년 12월 14일

🙇🏻‍♀️👍🏻📚👀

답글 달기