[코딩앙마] 타입스크립트 7. 유틸리티 타입 (utility types)

keyof

keyof를 사용하면 인터페이스의 key들을 가져올수있다.

interface User {
  name : string;
  age : number;
  hobby : string;
  gender : 'm' | 'f' | 'etc';
}

type Userkeys = keyof User; // name, age, hobby, gender

 

그리고 이렇게 사용할 수 있다.

interface User {
  name : string;
  age : number;
  hobby : string;
  gender : 'm' | 'f' | 'etc';
}

type Userkeys = keyof User;

// Userkeys에 없기때문에 에러
const uk1 : Userkeys = '';
// Userkeys에 있기때문에 가능
const uk2 : Userkeys = 'age';

 

Partial<T>

프로퍼티를 모두 옵셔널로 바꿔준다.

admin은 저정도의 정보만 필요한데 이렇게 쓰면 에러가 난다.

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

// 프로퍼티를 모두 적지 않아서 에러
let admin : User = {
  name : 'bong',
  age : 60
}

 

이렇게 Partial을 붙여주면 모두 옵셔널로 변경해주기때문에 가능하다. 하지만 interface에 없는 프로퍼티를 적으려고 하면 에러가 난다.

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

type Userkeys = keyof User;

let admin : Partial<User> = {
  name : 'bong',
  age : 60
}

 

Required<T>

Partial과는 반대로 모든 프로퍼티가 있어야한다.

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

// 모든 프로퍼티가 있지 않아서 에러
let admin : Required<User> = {
  name : 'bong',
  age : 60
}

 

Readonly<T>

이렇게 하면 admin의 age를 변경할 수 없다.

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

let admin : User = {
  name : 'bong',
  age : 60
}

admin.age = 50;

 

변경하지 못하게 하고 싶을 때는 Readonly 키워드를 붙여주면 읽기만하고 수정은 불가하다.

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

let admin : Readonly<User> = {
  name : 'bong',
  age : 60
}

// 수정하려고 해서 에러
admin.age = 50;

 

Record<K, T>

학년별 성적에 대한 interface가 있다고 할 때 이렇게 적을 수 있다.

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 : 'B',
  4 : 'C'
}

 

이럴 때 Record를 사용할 수 있다.

const score : Record<'1' | '2' | '3' | '4', 'A' | 'B' | 'C' | 'D'> = {
  1 : 'A',
  2 : 'B',
  3 : 'B',
  4 : 'C'
}

 

조금 복잡해 보인다면 이렇게 바꿀 수 있다.

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

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

 

활용 예제

이렇게 Record를 사용해 K자리에는 keyof User를 넣어주고 T자리에는 boolean 값을 넣어주면 result의 key는 User에 있는 Key만 들어갈 수 있고 값에는 boolean 값만 들어올 수 있다.

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

function isValid (user : User) {
  const result : Record<keyof User, boolean> = {
    id : user.id > 0,
    name : user.name !== "",
    age : user.age > 0,
  };
  return result;
}

 

Pick<T, K>

Pick은 T타입에서 K프로퍼티만 골라서 사용한다.

 

User 인터페이스에서 id와 name만 골라서 사용할 수 있다.

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

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

 

age도 사용하려고 하면 에러가 난다.

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

const admin : Pick<User, 'id'|'name'> = {
  id: 0,
  name : 'mike',
  // Type '{ id: number; name: string; age: number; }' is not assignable to type 'Pick<User, "id" | "name">'.
  // Object literal may only specify known properties, and 'age' does not exist in type 'Pick<User, "id" | "name">'.
  age : 60
}

 

Omit<T, K>

Omit을 사용하면 Pick과 반대로 특정 프로퍼티를 생략하고 쓸 수 있다.

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

const admin : Omit<User, 'age'> = {
  id: 0,
  name : 'mike',
}

 

age를 생략했는데 사용하려고 하면 에러가 난다.

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

const admin : Omit<User, 'age'> = {
  id: 0,
  name : 'mike',
  // Type '{ id: number; name: string; age: number; }' is not assignable to type 'Omit<User, "age">'.
  // Object literal may only specify known properties, and 'age' does not exist in type 'Omit<User, "age">'.
  age : 60
}

 

Exclude<T1, T2>

Omit과 비슷한 것으로 Exclude가 있다. T1에서 T2를 제거하고 사용하는 것이다. Omit과 다른 점은 Omit은 프로퍼티를 제거 하는 것이고 Exclude는 타입으로 제거하는 것이다.

type T1 = string | number | boolean;
type T2 = Exclude<T1, number>;

 

T2에 마우스를 올려보면 이렇게 나온다.

type T2 = string | boolean;

 

NonNullable<Type>

null 을 제외한 타입을 생성한다. undefined도 함께 제외시킨다.

type T1 = string | null | undefined | boolean;
type T2 = NonNullable<T1>;

 

T2에 마우스를 올려보면 이렇게 나온다.

type T2 = string | boolean

 

그외에도 공식문서를 살펴보면 다양한 유틸리티 타입들이 있다.