[TS] 유틸리티 타입들

참조(이미지 포함): Do You Really Know These 6 TypeScript Utilities?

1. Pick

Pick을 사용하면 주어진 타입에서 원하는 키들을 골라 새로운 타입을 만들 수 있다.

interface User {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
  phone: string;
}

type UserName = Pick<User, 'firstName' | 'lastName'>;
/* 
(위와 동일)
interface UserName {
  firstName: string;
  lastName: string;
}
*/

const userName: UserName = {
    firstName: 'Gildong',
    lastName: 'Hong'
}

2. Omit

Pick과 반대로, Omit을 사용하면 주어진 타입에서 원하는 키들을 제거해 새로운 타입을 만들 수 있다.

interface User {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
  phone: string;
}

type UserName = Omit<User, 'id' | 'age' | 'phone'>;
/* 
(위와 동일)
interface UserName {
  firstName: string;
  lastName: string;
}
*/

const userName: UserName = {
    firstName: 'Gildong',
    lastName: 'Hong'
}

3. Partial

Partial을 사용하면 주어진 타입의 모든 프로퍼티들이 옵션으로 설정된 새로운 타입을 만들 수 있다.

interface UserName {
  firstName: string;
  lastName: string;
}

const userName: Partial<UserName> = {
    firstName: 'Gildong',
}

Partial<UserName> 타입은 아래와 동일하다.

interface UserName {
  firstName?: string;
  lastName?: string;
}

4. Readonly

Readonly는 주어진 타입을 읽기 전용으로 설정한다. 초기화 이후에 프로퍼티의 값이 재할당되지 않도록 하기 위해 사용한다.

interface UserName {
  firstName: string;
  lastName: string;
}

const userName: Readonly<UserName> = {
    firstName: 'Gildong',
    lastName: 'Hong'
}

userName.lastName = 'Lee'; // 에러 Cannot assign to 'lastName' because it is a read-only property.

5. ReturnType

ReturnType을 사용하면 기존 함수의 반환값 타입을 추출해 새로운 타입을 만들 수 있다.

function createUser(): User {
    return {
        firstName: 'Gildong',
        lastName: 'Hong'    
    }
}

// UserName === User
type UserName = ReturnType<typeof createUser>;

6. NonNullable

NonNullable은 주어진 타입에서 값이 null이거나 undefined인 프로퍼티를 제거해 새로운 타입을 만들 수 있다.

type Strs = string | string[] | null | undefined;

type NotNullOnlyStrs = NonNullable<User>; // string | string[]