[TypeScript]_Utility Types

hanseungjune·2023년 3월 5일
0

비전공자의 IT준비

목록 보기
54/68
post-thumbnail

🤞 내용 요약

  • keyof: 객체의 모든 속성 이름을 문자열 유니온 타입으로 추출합니다.
  • Partial<T>: 타입 T의 모든 속성을 선택적(optional)으로 만듭니다.
  • Required<T>: 타입 T의 모든 속성을 필수적(required)으로 만듭니다.
  • Readonly<T>: 타입 T의 모든 속성을 읽기 전용(readonly)으로 만듭니다.
  • Record<K, T>: 속성 이름이 K이고 값 타입이 T인 객체 타입을 만듭니다.
  • Pick<T, K>: 타입 T에서 속성 이름이 K인 부분집합 타입을 만듭니다.
  • Omit<T, K>: 타입 T에서 속성 이름이 K인 부분집합을 제외한 타입을 만듭니다.
  • Exclude<T1, T2>: 타입 T1에서 타입 T2에 할당 가능한 타입을 제외한 타입을 만듭니다.
  • NonNullable<Type>: null 및 undefined를 제외한 타입을 만듭니다.

📌 코드 해석

⭐ keyof

// User 인터페이스 정의
interface User {
  id: number;
  name: string;
  age: number;
  gender: "m" | "f"; // 'm' 또는 'f'만 가능한 타입
}

// User 인터페이스의 모든 속성 키를 유니온 타입으로 나타내기 위해 keyof 사용
type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender'

// UserKey 타입으로 유효한 값만 할당 가능
const uk: UserKey = "age";

⭐ Partial<T>

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

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

// User 인터페이스에서 속성 키의 일부를 선택적(optional)으로 정의하기 위해 Partial 사용
let admin: Partial<User> = {
  id: 1,
  name: "Bob",
  job: 'teacher' // 에러: User 인터페이스에 정의되어 있지 않은 속성 'job' 사용
};

⭐ Required<T>

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

// User 인터페이스에서 모든 속성 키를 필수(required)로 정의하기 위해 Required 사용
let admin2: Required<User> = {
  id: 1,
  name: "Bob",
  age: 20
};

⭐ Readonly<T>

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

// User 인터페이스에서 모든 속성을 읽기 전용(immutable)으로 정의하기 위해 Readonly 사용
let admin3: Readonly<User> = {
  id: 1,
  name: "Bob",
};

admin.id = 4; //수정 불가

⭐ Record<K, T>

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

// User 인터페이스에서 각 속성 키별로 boolean 값을 가지는 객체를 생성하기 위해 Record 사용
function isValid(user: User) {
  const result: Record<keyof User, boolean> = {
    id: user.id > 0, // id 속성이 0보다 크면 true, 그렇지 않으면 false
    name: user.name !== '', // name 속성이 빈 문자열이 아니면 true, 그렇지 않으면 false
    age: user.age > 0, // age 속성이 0보다 크면 true, 그렇지 않으면 false
  }
  return result;
}

⭐ Pick<T, K>

interface User {
  id: number;
  name: string;
  age: number;
  gender: "M" | "W";
}

// User 인터페이스에서 특정 속성 키만 선택하기 위해 Pick 사용
const admin4: Pick<User, "id" | "name"> = {
  id: 0,
  name: "Bob",
};

⭐ Omit<T, K>

interface User {
  id: number;
  name: string;
  age: number;
  gender: "M" | "W";
}

// User 인터페이스에서 특정 속성 키를 제외하기 위해 Omit 사용
const admin5: Omit<User, "age" | "gender"> = {
  id: 0,
  name: "Bob",
};

⭐ Exclude<T1, T2>

// T1 유니온 타입에서 T2 유니온 타입에 해당하는 타입을 제외하기 위해 Exclude 사용
type T1 = string | number | boolean;
type T2 = Exclude<T1, number | string>; // boolean 타입만 남음

⭐ NonNullable<Type>

// 유니온 타입에서 null 또는 undefined 타입을 제외하기 위해 NonNullable 사용
type T1 = string | null | undefined | void;
type T2 = NonNullable<T1>; // 'string' | 'void'
type T3 = NonNullable<string[] | null | undefined>; // 'string[]'
profile
필요하다면 공부하는 개발자, 한승준

0개의 댓글