2023 TypeScript Utility Types 유틸리티 타입

by
TypeScript Utility Types

TypeScript는 JavaScript를 보다 엄격하게 작성하도록 돕는 프로그래밍 언어입니다. 그중에서도 Utility Types는 TypeScript에서 제공하는 기능 중 하나로서, 기존의 타입을 쉽게 변경하거나 조합할 수 있게 돕는 역할을 합니다. 이번 글에서는 TypeScript의 Utility Types 중 일부를 살펴보고, 각각 어떻게 사용하는지에 대해 알아보겠습니다.

1. keyof와 사용법

keyof는 TypeScript에서 제공하는 연산자 중 하나로서, 특정 타입이 가진 속성의 이름을 추출하는 역할을 합니다.

<code>
interface User {
  id: number;
  name: string;
  age: number;
  gender: "m" | "f"
}

type UserKey = keyof User;  // 'id' | 'name' | 'age' | 'gender'

const uk: UserKey = "id";
</code>

keyof를 활용한 예제

위 예제에서 UserKey라는 타입은 User 인터페이스가 가진 속성 이름들, 즉 ‘id’, ‘name’, ‘age’, ‘gender’ 중 하나의 값을 가질 수 있습니다. 따라서 uk라는 변수에 ‘id’라는 값을 할당하는 것이 가능합니다.

2. Partial<T>와 사용법

Partial<T>는 특정 타입 T의 모든 속성을 선택적(optional)으로 만드는 Utility Type입니다. 즉, 특정 타입의 일부 속성만 사용하고 싶을 때 유용하게 사용할 수 있습니다.

<code>
interface User {
  id: number;
  name: string;
  age: number;
  gender: "m" | "f"
}

let admin: Partial<User> = {
  id: 1,
  name: "Bob"
}  // 모든 속성이 필수가 아님
</code>

Partial<T>를 활용한 예제

위 예제에서 admin 객체는 User 타입의 일부 속성만 가지고 있습니다. Partial<User>로 선언함으로써, 모든 속성이 필수적이지 않아도 되게끔 할 수 있습니다.

3. Required<T>와 사용법

Required<T>는 반대로 특정 타입 T의 모든 속성을 필수적(mandatory)으로 만드는 Utility Type입니다.

<code>
interface User {
  id: number;
  name: string;
  age?: number
}

let admin: Required<User> = {
  id: 1
  name: "jin"
} // age 입력이 필수로 오류 발생
</code>

Required<T>를 활용한 예제

위 예제에서 User 인터페이스의 age 속성은 선택적입니다. 그러나 Required<User>로 선언하였기 때문에 age 속성을 반드시 포함해야 합니다. 따라서 admin 객체에 age 속성이 없어 오류가 발생합니다.

4. Record<K, T>와 사용법

Record<K, T>는 K 타입의 키와 T 타입의 값을 가진 객체를 생성하는 Utility Type입니다.

<code>
const Grade = "1" | "2" | "3" | "4";
const Score = "A" | "B" | "C" | "D";

const score: Record<Grade, Score> =  {
  1: "A",
  2: "B",
  3: "C",
  4: "D",
}
</code>

Record<K, T>를 활용한 예제

위 예제에서 Grade와 Score라는 타입이 주어져 있습니다. Record<Grade, Score>로 선언한 score 객체는 Grade 타입의 키와 Score 타입의 값을 가집니다.

5. Pick<T, K>와 사용법

Pick<T, K>는 특정 타입 T에서 K 타입의 속성만을 선택하여 새로운 타입을 생성하는 Utility Type입니다.

<code>
interface User {
  id: number;
  name: string;
  age: number;
  gender: 'M' | 'W'
}

const admin: Pick<User, 'id' | 'name'> = {
  id: 0,
  name: 'Bob
}
</code>

Pick<T, K>를 활용한 예제

위 예제에서 Pick<User, ‘id’ | ‘name’>로 선언한 admin 객체는 User 타입에서 ‘id’와 ‘name’ 속성만을 가집니다.

6. Omit<T, K>와 사용법

Omit<T, K>는 반대로 특정 타입 T에서 K 타입의 속성을 제외한 새로운 타입을 생성하는 Utility Type입니다.

<code>
interface User {
  id: number;
  name: string;
  age: number;
  gender: 'M' | 'W'
}

const admin: Omit<User, 'age' | 'gender'> = {
  id: 0,
  name: 'Bob
}
</code>

Omit<T, K>를 활용한 예제

위 예제에서 Omit<User, ‘age’ | ‘gender’>로 선언한 admin 객체는 User 타입에서 ‘age’와 ‘gender’ 속성을 제외한 나머지 속성들을 가집니다.

7. Exclude<T1, T2>와 사용법

Exclude<T1, T2>는 타입 T1에서 타입 T2에 속하지 않는 타입만을 남기는 Utility Type입니다.

<code>
type T1 = string | number;
type T2 = Exclude<T1, number>; // string만 남는다!
</code>

Exclude<T1, T2>를 활용한 예제

위 예제에서 Exclude<T1, number>는 T1 타입에서 number를 제외한 나머지 타입을 남깁니다. 따라서 T2는 string 타입이 됩니다.

8. NonNullable<Type>와 사용법

NonNullable<Type>는 특정 타입 Type에서 null과 undefined를 제외한 나머지 타입을 남기는 Utility Type입니다.

<code>
type T1 = string | null | undefined | void;
type T2 = NonNullable<T1>; // string과 void만 남는다.
</code>

NonNullable<Type>를 활용한 예제

위 예제에서 NonNullable<T1>은 T1 타입에서 null과 undefined를 제외한 나머지 타입을 남깁니다. 따라서 T2는 string과 void 타입이 됩니다.

TypeScript의 Utility Types는 다양한 사용 사례를 제공하여 코드를 보다 효과적으로 작성하게 돕습니다. 이 글에서 소개한 Utility Types는 TypeScript 개발에 있어 필수적인 요소로, 잘 활용하면 코드의 퀄리티를 크게 향상시킬 수 있습니다.

9. TypeScript Utility Types 추가내용

TypeScript의 Utility Types는 기존의 타입을 쉽게 변경하거나 조합할 수 있게 돕는 기능으로, 코드 작성을 보다 효과적으로 만드는 중요한 도구입니다.

Utility Types 중 하나인 ‘keyof’는 특정 타입이 가진 속성의 이름을 추출하는 역할을 합니다. 이를 통해 해당 타입의 키 이름을 알 수 있어 코드를 보다 명확하게 작성하는데 도움을 줍니다.

또 다른 Utility Type인 ‘Record<K, T>’는 K 타입의 키와 T 타입의 값을 가진 객체를 생성하는 기능을 가지고 있습니다. 이를 활용하면 새로운 객체를 효율적으로 생성할 수 있어 편리하게 코드를 작성할 수 있습니다.

‘Pick<T, K>’와 ‘Omit<T, K>’는 서로 반대의 역할을 하는 Utility Types로, ‘Pick<T, K>’는 특정 타입 T에서 K 타입의 속성만을 선택하여 새로운 타입을 생성하는 반면, ‘Omit<T, K>’는 특정 타입 T에서 K 타입의 속성을 제외한 새로운 타입을 생성합니다. 이 두 가지 Utility Types를 잘 활용하면 타입을 더욱 세밀하게 제어할 수 있습니다.

마지막으로, ‘NonNullable<Type>’는 특정 타입 Type에서 null과 undefined를 제외한 나머지 타입을 남기는 역할을 합니다. 이를 활용하면 타입에서 null과 undefined 값을 제외하여 코드의 안정성을 높일 수 있습니다.

TypeScript의 이런 Utility Types는 개발에 있어 필수적인 요소로서, 잘 활용하면 코드의 퀄리티를 크게 향상시킬 수 있습니다.

TypeScript에 대해 더 많은 내용을 알고 싶으면 문서를 참고하세요.

이상으로 개발에 대한 더 많은 내용을 보고 싶으면 제 블로그를 방문해주세요!!

2023 TypeScript Generics