[TypeScript] 타입스크립트 유틸리티 타입(Utility Types)

유틸리티 타입(Utility Types)

유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다
인터페이스, 제네릭 등으로 타입을 변환할 수 있지만 

유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있다.

 

💡 용어 정리

• T : 타입
• U : 또 다른 타입
• K : 속성(key)

---

유틸리티 타입 종류

• Partial<Type>
• Required<Type>
• Readonly<Type>
• Pick<Type, Keys>
• Omit<Type, Keys>
• ReturnType<Type>

---

Partial<Type>

프로퍼티를 선택적으로 구성하여 일부만 사용 가능

T 타입의 일부 프로퍼티만 가질 수 있는 타입(subset)을 반환한다.

모든 프로퍼티는 optional로 취급되며, 모든 프로퍼티를 갖지 않는 빈 객체{ }도 허용된다.

interface Point {
  x: number;
  y: number;
}

let pointPart: Partial<Point> = {};  // x와 y는 선택적 프로퍼티
pointPart.x = 10;

 

 

Required<Type>

T 타입의 모든 프로퍼티를 필수로 갖는 타입을 반환한다.
기존 타입 내의 모든 optional 프로퍼티는 필수 속성으로 변경되며, 

하나의 프로퍼티라도 누락되면 에러가 발생한다.

interface Car {
  make: string;
  model: string;
  mileage?: number;
}

let myCar: Required<Car> = {
  make: 'Ford',
  model: 'Focus',
  mileage: 12000,  // mileage는 optional이 아닌 필수 프로퍼티
};

 

 

Readonly<Type>

T 타입의 모든 프로퍼티를 readonly(읽기 전용)로 변환한 타입을 반환한다.
readonly 타입을 가진 값은 수정이 불가능하므로, 

해당 타입의 값을 변경하게 되면 에러가 발생한다.

interface Todo {
  title: string;
}

const todo: Readonly<Todo> = {
  title: 'Delete inactive users',
};

todo.title = 'Hello';  // readonly 타입이므로 Error!

 

 

Pick<Type, Keys>

T타입에서 2번째 인자로 전달한 타입에 지정된 키만 프로퍼티로 갖는 새로운 타입을 반환한다.
2번째 인자로 지정하는 타입은 단일 타입도 가능하고 

아래 예시처럼 유니온 타입으로도 지정할 수 있다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Pick<Todo, "title" | "completed">;
 
const todo: TodoPreview = {  // title, completed 프로퍼티만 갖는 TodoPreview 타입
  title: "Clean room",
  completed: false,
};

 

 

Omit<Type, Keys>

T 타입에서 2번째 인자로 전달한 

유니온에 지정된 키만 프로퍼티로 갖지 않는 새로운 타입을 반환한다.
Pick<T, U> 유틸 타입과 정확히 반대의 기능을 수행한다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}
 
type TodoPreview = Omit<Todo, "description">;
 
const todo: TodoPreview = {  // description 프로퍼티가 빠진 타입 TodoPreview
  title: "Clean room",
  completed: false,
  createdAt: 1615544252770,
};
 
type TodoInfo = Omit<Todo, "completed" | "createdAt">;
 
const todoInfo: TodoInfo = {  // completed, createdAt이 빠진 타입 TodoInfo
  title: "Pick up kids",
  description: "Kindergarten closes at 5pm",
};

 

 

ReturnType<Type>

함수 타입 T의 리턴 타입 유형을 반환한다.

declare function f1(): { a: number; b: string };
 
type T0 = ReturnType<() => string>;	// type T0 = string
type T1 = ReturnType<(s: string) => void>;	// type T1 = void
type T2 = ReturnType<<T>() => T>;	// type T2 = unknown
type T3 = ReturnType<<T extends U, U extends number[]>() => T>;	// type T3 = number[]
type T4 = ReturnType<typeof f1>;	// type T4 = { a: number; b: string; }
type T5 = ReturnType<any>;		// type T5 = any
type T6 = ReturnType<never>;		// type T6 = never
type T7 = ReturnType<string>;		// Error, type T7 = any
type T8 = ReturnType<Function>;		// Error, type T8 = any

declare function f1(): {a: number, b: string}

type T1 = ReturnType<() => string>;		// string
type T2 = ReturnType<(s: string) => void>;	// void
type T3 = ReturnType<typeof f1>;		// {a: number, b: string}

 

---