본문 바로가기
📍 Front-End/🜸 TypeScript

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

by 예리Yelee 2024. 6. 23.
반응형
타입스크립트(TypeScript)는 자바스크립트(JavaScript)에 정적 타입을 부여하여, 코드를 더 안전하고 유지보수하기 쉽게 만들어줍니다. 이 글에서는 타입스크립트의 유틸리티 타입들에 대해 소개해보겠습니다.

 

1. Partial

Partial<T>는 제네릭 타입 T의 모든 프로퍼티를 옵셔널로 만듭니다. 즉, T의 모든 프로퍼티가 있을 수도 있고 없을 수도 있는 상태로 만들어줍니다.

interface User {
  id: number;
  name: string;
  email: string;
}
const updateUser = (id: number, userUpdate: Partial<User>) => {
  // 일부 프로퍼티만 업데이트 가능
};
// 올바른 호출
updateUser(1, { id:1 });
updateUser(1, { id:1 , name: 'Seoyoon Park'});
updateUser(1, { id:1 , name: 'Seoyoon Park', email: 'dev.yelee@gmail.com'});
// 오류 발생
updateUser(1, { phone : '000-0000-0000'});

 


2. Required

Required<T>는 T의 모든 프로퍼티를 필수로 만듭니다. 옵셔널 프로퍼티가 있는 타입을 필수 프로퍼티로 변환할 때 사용됩니다.

interface User {
  id: number;
  name?: string;
  email?: string;
}
const createUser = (user: Required<User>) => {
  // 모든 프로퍼티가 필수
};
// 올바른 호출 - 모든 프로퍼티 제공
createUser({ id: 1, name: 'Seoyoon Park', email: 'dev.yelee@gmail.com' });
// 오류 발생 - name을 제공하지 않음
createUser({ id: 2, email: 'dev.yelee@gmail.com' });

 

3. Readonly

Readonly<T>는 T의 모든 프로퍼티를 읽기 전용으로 만듭니다. 이는 객체를 불변으로 만들고자 할 때 유용합니다.

interface User {
  id: number;
  name: string;
  email: string;
}
const user: Readonly<User> = {
  id: 1,
  name: "Seoyoon Park",
  email: "asdfasdfasdf@asdfasdf.com",
};
// user.id = 2; // 오류 발생: 읽기 전용 속성입니다.

 

4. Pick

Pick<T, K>는 T 타입에서 K 프로퍼티들만 선택하여 새로운 타입을 만듭니다. K는 T의 프로퍼티 이름들의 유니온 타입입니다.

interface User {
  id: number;
  name: string;
  email: string;
}
type UserInfo = Pick<User, "id" | "name">;
const user: UserInfo = {
  id: 1,
  name: "Seoyoon Park",
  // email은 포함되지 않음
};

 

5. Omit

Omit<T, K>는 T 타입에서 K 프로퍼티들만 제외하여 새로운 타입을 만듭니다. K는 T의 프로퍼티 이름들의 유니온 타입입니다. (= 프로퍼티의 차집합)

interface User {
  id: number;
  name: string;
  email: string;
}
type UserWithoutEmail = Omit<User, "email">;
const user: UserWithoutEmail = {
  id: 1,
  name: "Seoyoon Park",
  // email은 제외됨
};

 

6. Record

Record<K, T>는 K 타입의 키와 T 타입의 값으로 구성된 객체 타입을 만듭니다. 이는 맵이나 객체 리터럴 타입을 정의할 때 유용합니다.

type UserRole = "admin" | "user" | "guest";
interface UserPermissions {
  read: boolean;
  write: boolean;
  delete: boolean;
}
const roles: Record<UserRole, UserPermissions> = {
  admin: { read: true, write: true, delete: true },
  user: { read: true, write: true, delete: false },
  guest: { read: true, write: false, delete: false },
};

 

7. Exclude

Exclude<T, U>는 T 타입에서 U 타입에 해당하는 타입들을 제외하여 새로운 타입을 만듭니다. 이는 유니온 타입에서 특정 타입을 제거할 때 유용합니다. (=타입의 차집합)

type AllTypes = string | number | boolean;
type ExcludedTypes = Exclude<AllTypes, boolean>;
// ExcludedTypes는 string | number 타입이 됨

 

8. Extract

Extract<T, U>는 T 타입에서 U 타입에 해당하는 타입들만 추출하여 새로운 타입을 만듭니다. 이는 유니온 타입에서 특정 타입만 남길 때 유용합니다. (=타입의 교집합)

type Member = 'kim' | 'lee' | 'park'
type Developer = 'park' | 'kwon';
// Extract를 사용하여 Member 타입에서 Developer 타입을 추출합니다.
type ExtractedMember = Extract<Member, Developer>;
// ExtractedMember 타입은 'park'가 됩니다.
// 사용 예시
const team1: ExtractedMember = 'park';  // OK
const team2: ExtractedMember = 'choi';   // 오류

 

9. NonNullable

NonNullable<T>는 T 타입에서 null과 undefined를 제거한 타입을 만듭니다.

type NullableType = string | number | null | undefined;
type NonNullableType = NonNullable<NullableType>;
// NonNullableType는 string | number 타입이 됨

 

👩‍💻 Q&A

Q. Pick 과 Extract 의 차이

  • Pick: 객체의 일부 속성(=프로퍼티)만 뽑아서 새로운 타입을 만든다
  • Extract: 여러개의 타입 중에서 특정 타입만 골라서 새로운 타입을 만든다 (=타입의 교집합 )
  •  

Q. Omit과 Exclude의 차이

  • Omit: 객체의 일부 속성(=프로퍼티)를 제외하여 새로운 타입을 만든다
  • Exclude: 여러 타입에서 특정 타입을 제외한 새로운 타입을 만든다 (=타입의 차집합)

 

반응형

댓글