유틸리티 타입(Utilty Types)

 

🔥 typescript에서 다양하게 사용되는 utility type에 대하여 알아보자

1. keyof 
2. Partial<T>
3. Required<T>
4. Readonly<T>
5. Record<K,T>
6. Pick<T,K>
7. Omit<T,K>
8. Exclude<T1,T2>
9. NonNullable<Type>

 

 

1. keyof 타입

👉🏻 객체의 key 값을 추출한다

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

type UserKey = keyof User; 
// 📌 다음과 같은 키 값을 나타낸다
// 'id' | 'name'| 'age'| 'gender'

const uk: UserKey = "name";
// 📌 name 과 같은 UserKey 프로퍼티 값이 들어가지 않으면 error가 발생한다.

 

 

 

2. Partial

👉🏻 partial은 프로퍼티를 모두 옵션으로 바꿔준다.

예시비교

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

// 📌 User 타입내의 프로퍼티 값이 일부만 들어갔음으로 error가 발생한다
let admin: User = {
    id: 1,
    name: "yelim",
}

❓ 이럴때 partial을 사용하여 해결해보자

let admin: Partial<User> = {
  id: 1,
  name: "yelim",
};

// 📌 User 타입을 Partial<User> 처럼 감쌌다는 것은 다음과 같은 의미이다.

// interface User {
//   id?: number;
//   name?: string;
//   age?: number;
//   gender?: "m" | "f";
// }

 

 

 

3. Required

👉🏻 (partial 와 반대개념) 모든 프로퍼티를 필수 값으로 바꿔준다.

예시비교

interface User {
  id: number;
  name: string;
  age?: number; // 📌 age는 optional 값으로 error가 나지않는다.
}

let admin: User = {
  id: 1,
  name: "yelim",
};

• 하지만 Required<User> 로 감싸게 된다면 ?

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

let admin: Required<User> = { // 📌 optional 값이었던 age 프로퍼티가 필수 값이 되며 error message가 발생한다.
  id: 1,
  name: "yelim"
};

 

 

 

 

4. Readonly

👉🏻 읽기 전용으로 바꿔준다.

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

let admin: Readonly<User> = {
  id: 1,
  name: "yelim",
};

admin.id = 10; // 📌 읽기 전용 프로퍼티 id 값은 수정할 수 없다.

 

 

 

5. Record<K,T>

👉🏻 Record<K,T> 여기서 K는 key 이고, T는 type이다.

예시비교

• 다음과 같은 예제가 있다.

interface Score {
  "1": "A" | "B" | "C" | "D";
  "2": "A" | "B" | "C" | "D";
  "3": "A" | "B" | "C" | "D";
  "4": "A" | "B" | "C" | "D";
}

const score: Score = {
  1: "A",
  2: "B",
  3: "C",
  4: "D",
};

• 여기서 Record<K,T> 를 활용해 보면..

// 📌 다음과 같이 나타낼 수 있다.
const score: Record<"1" | "2" | "3" | "4", "A" | "B" | "C" | "D"> = {
  1: "A",
  2: "B",
  3: "C",
  4: "D",
};

• 좀 더 정리해서 나타내보자 !

type Grade = "1" | "2" | "3" | "4";
type Score = "A" | "B" | "C" | "D";

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

다른 활용 예제

interface User {
  id: number;
  name: string;
  age: number;
}

function isValid(user: User) {
  const result: Record<keyof User, boolean> = {
    // 📌 User의 키값을 참조, Record<K,T>를 활용하여 다음과 같이 나타낼수 있다.
    id: user.id > 0,
    name: user.name !== "",
    age: user.age > 0,
  };
  return result;
}

 

 

 

6. Pick<T,K>

👉🏻 Pick<T,K> T 타입에서 K 프로퍼티만 골라서 사용한다.

interface User {
  id: number;
  name: string;
  age: number;
  gender: "m" | "w";
}

const admin: Pick<User, "id"| "name"> = {
  id: 0,
  name: "bob",
};

 

 

 

7. Omit<T,K>

👉🏻 Pick<T,K>과 반대로 특정 프로퍼티만 제외하고 사용할 수 있다.

interface User {
  id: number;
  name: string;
  age: number;
  gender: "m" | "w";
}

const admin: Omit<User, "age"| "gender"> = {
  id: 0,
  name: "bob",
};

 

 

 

8. Exclude<T1,T2>

👉🏻 Exclude<T1,T2> T1 에서 T2를 제외하고 사용하는 것

type T1 = string | number | boolean;
type T2 = Exclude<T1, number>; // 📌 T2는 number이 제외되고 string 과 boolean만 남게 된다.

 

 

 

 

9. NonNullable

👉🏻 Null 을 제외한 타입을 생성한다.(undefined도 함께 제외 시킨다.)

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

 

 

 

 

📚 참고 )

https://www.typescriptlang.org/docs/handbook/utility-types.html
https://www.youtube.com/watch?v=IeXZo-JXJjc&list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0&index=8