Front-end/TypeScript

[TypeScript] 유틸리티 타입 Utility Types

hyebin Lee 2022. 3. 6. 21:54

Utility Types

//keyof

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

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

const uk1: UserKey = ""; //오류
const uk2: UserKey = "age";

Partial<T>

//Partial<T>
//Partial은 프로퍼티를 모두 옵션으로 바꿔준다. 따라서 일부만 사용할 수 있다.

interface User {
    id: number;
    name: string;
    age: number;
    gender: "m" | "f";
  }
  
  let admin:Partial<User> = { //Partial로 감싸준다.
      id:1,
      name:"bob"
  }

/* 이 모습과 같다.
  interface User {
    id?: number;
    name?: string;
    age?: number;
    gender?: "m" | "f";
  }
  */

Required<T>

//Required<T> 
//모든 프로퍼티를 필수로 바꿔준다.

interface User {
    id: number;
    name: string;
    age?: number;
  }
  
  let admin:Required<User> = { //이때 오류가 발생하는데 age도 필수 프로퍼티가 되기 때문
      id:1,
      name:"bob"
  }

Readonly<T>

//Readonly<T> 
//모든 프로퍼티를 필수로 바꿔준다.

interface User {
    id: number;
    name: string;
    age?: number;
  }
  
  let admin:Readonly<User> = { 
      id:1,
      name:"bob"
  }

  admin.id = 4; //처음에 할당만 가능하고 수정은 불가

Recod<K,T>

1. K는 key, T는 type

//1학년부터 4학년 점수를 입력받음
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: "C",
  3: "D",
  4: "A",
};

2. 키값, 타입값을 넣어준다.

//1학년부터 4학년 점수를 입력받음
const score: Record<"1" | "2" | "3" | "4", "A" | "B" | "C" | "D"> = {

  1: "A",
  2: "C",
  3: "D",
  4: "A",
};

3. 학년과 성적부분을 타입으로 분리

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

const score: Record<Grade,Score> = {
//키값, 타입값을 넣어준다.
  1: "A",
  2: "C",
  3: "D",
  4: "A",
};

Recod<K,T> 응용 예제

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

//적절한 값이 입력되어있는지 체크하는 함수

function isValid(user: User) {
  const result: Record<keyof User, boolean> = {
    //id,nane,age는 유저의 키가 된다. 따라서 keyof User
    id: user.id > 0,
    name: user.name !== "",
    age: user.age > 0,
  };
  return result;
}

Pick<K,T>

T타입에서 K프로퍼티만 골라서 사용

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

const admin: Pick<User, "id" | "name"> = {
//User에서 id와 name만 가지고 와서 사용 가능
  id: 0,
  name: "bob",
};

Omit<K,T>

T타입에서 K프로퍼티만 생략하고 사용

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

const admin: Omit<User, "age" | "gender"> = {
  //age에서 gender을 생략하고 사용가능
  id: 0,
  name: "bob",
};

Exclude<T1,T2>

T1 타입에서 T2타입과 겹치는 타입 제거 Omit과 다른점은 Omit은 프로퍼티를 제거하고, Exclude는 타입으로 제거한다.

type T1 = string | number | boolean;
type T2 = Exclude<T1, number | string>; //T1에서 number,string 을 제외, boolean 남음

NonNullable<Type>

null을 제외한 타입 생성, undefined도 제외

type T1 = string | null | undefined | void;
type T2 = NonNullable<T1>; //void만 남음