Utility Type

이번엔 타입스크립트에서 제공하는 유틸리티 타입들 중에서 자주 사용할만한 몇가지를 공식문서를 통해 알아보자.

Awaited

우리가 비동기 처리를 할 때 사용하는 async await처럼 Promise객체의 리턴값에대해 Promise를 벗긴 타입을 정의할때 사용된다.

type UserPromise = Promise<{
  id: number;
  name: string;
}>;
type AwaitedUser = Awaited<UserPromise>;
async function User(): UserPromise {
  return { id: 1, name: "Awaited type example" };
}

async function PrintUser() {
  const user: AwaitedUser = await User();
  console.log(user);
}

PrintUser(); // { id: 1, name: 'Awaited type example' }

ReadOnly

type User = {
  name: string;
};

const user: User = {
  name: "this is user",
};
user.name = "Can I change property?";

console.log(user); // Can I change property?

// 위처럼 일반적으로 정의된 객체에 대해서는 프로퍼티 변경이 가능하다.

const user2: Readonly<User> = {
  name: "this is user",
};

// Cannot assign to 'name' because it is a read-only property.
user.name = "Can I change property?"; 

console.log(user);

ReadOnly 키워드는 말 그대로 제네릭으로 들어온 타입에 대해 읽기전용으로 사용하도록 해주는 키워드이다.

해당 타입을 사용하는 객체의 프로퍼티가 변경되는 것을 원치 않을때 사용한다.

Record

type Score = Record<string, number>;
const ExamScore: Score = { 
    math: 100,
    eng: 20,
    korean: 80
};

개인적으로 자주 사용하는 키워드이다. 제네릭으로 받은 key값과 value값의 타입을 가진 객체의 타입을 지정할때 사용된다.

특이한 점은 제네릭으로 원시형 자료형은 물론, 문자열 리터럴을 사용할 수 있다.

type Subject = "math" | "eng" | "korean";
type Score = Record<Subject, number>;
const ExamScore: Score = {
    math: 100,
    eng: 20,
    korean: 80 
};

Pick

type Todo = {
  id: number;
  title: string;
  author: string;
  createdAt: string;
  isComplete: boolean;
};

const simpleTodo: Pick<Todo, "title" | "isComplete"> = {
  title: "Pick example!",
  isComplete: false,
};

기존에 존재하던 타입의 프로퍼티 중 부분적으로 지정하여 따로 타입으로 사용할수 있게 해준다.

새로운 타입을 정의하 필요없이 기존에 존재하던 타입을 재사용가능하다는 점에서 유용하게 사용이 가능할것 같다!

ReturnType

function Example(age: number) {
  return age + 1;
}

// Example 함수의 리턴값이 number이므로, ReturnType<typeof Example>은 number이다.
const result: ReturnType<typeof Example> = Example(10);

키워드 이름 그대로 함수를 제네릭으로 받아 해당 함수의 리턴 값의 타입을 반환해준다.