[Typescript] 유틸리티 타입

pds·2023년 1월 13일

typescript

Typescript Study

목록 보기

3/4

유틸리티 타입

기존 타입을 변환하거나, 새로운 타입을 생성하거나, 기존 타입에서 일부 속성을 선택하거나 제외하거나, 기존 타입을 조작하는 데 사용한다.

주로 이미 존재하는 타입에 대해서 추가적으로 뭔가를 하거나 약간씩 변경하고싶을때 사용하는 듯 하다.

많이 봐왔던 것들 위주로 몇개만 정리해보았다.

왜씀

주 목적은 코드를 간결하게 하는 것이다.

코드가 복잡해질수록 유용해진다

Partial

Partial<Type> 유틸리티 타입은 타입 Type의 모든 속성을 선택적으로 만들어 새로운 타입을 생성한다.

이는 객체를 생성할 때 일부 속성만 설정하고 싶을 때 유용하다!

interface User {
  firstName: string;
  lastName: string;
  email: string;
}

function createUser(user: Partial<User>) {
  // ...
}

createUser({ firstName: 'kim' }); //ok
createUser({ firstName: 'kim', lastName: 'kap', email: 'hell@abc.com' }); //ok

Required

Required<Type> 는Type의 모든 속성을 필수적으로 만들어 새로운 타입을 생성한다.

객체를 생성할 때 모든 속성을 설정해야 할 때 유용하다.

interface User {
  firstName?: string;
  lastName?: string;
  email?: string;
}

function createUser(user: Partial<User>) {
  // ...
}

createUser({ firstName: 'kim' }); // OK
createUser({ firstName: 'kim', lastName: 'kap', email: 'hell@abc.com' }); // error!

Pick

Pick<Type, Keys>는 특정 타입이 가진 Keys들 중 몇 개의 속성만 사용해야할 때 유용하다.
Keys에 명시된 것들만 사용할 수 있다.

interface User {
  firstName: string;
  lastName: string;
  email: string;
  age: number;
}

type UserBasicInfo = Pick<User, 'firstName' | 'lastName' | 'email'>;

Omit

Omit<Type, Keys>는 타입에서 Keys 배열에 명시된 속성들을 제외한 나머지 속성들로 새로운 타입을 생성합니다.

Pick과는 반대라고 생각할 수 있을 것 같다

Record

Record<Keys, Type>는 Keys 타입에서 키를, Type 타입에서 값을 가지는 객체 타입을 생성한다.

export interface MyProfile {
  id: number;
  email: string;
  oauthType: SocialType;
  createdAt: string;
}

export type MyProfileString = Record<string, MyProfile>;
const myp: MyProfileString = {
  p1: {
    id: 1,
    email: "",
    createdAt: "",
    oauthType: 'google'
  },
  p2: {
    id: 2,
    email: "a@ab.com",
    createdAt: "",
    oauthType: 'kakao'
  }
}

NonNullable

NonNullable<Type> 은 특정 타입에서 undefined, null이 가능했던 것을 불가능하게 해준다.

type NullableString = string | null | undefined;
type NonNullableString = NonNullable<NullableString>;

function printString(str: NonNullableString) {
  console.log(str);
}

printString('hello'); // OK
printString(null); // Error

ReturnType

ReturnType<Type>은 함수의 return type을 추출한다.

function sum(a: number, b: number) {
  return a + b;
}

type SumReturnType = ReturnType<typeof sum>; // number type

const result: SumReturnType = 3;
console.log(result); // OK