[240703 TIL] Awaited, ReturnType, keyof, typeof

Awaited, ReturnType

타입스크립트에서 Awaited 와 ReturtnType 에 대해 공부하였습니다.

타입스크립트에서 Awaited<ReturnType<typeof foo>>를 사용하여 타입을 지정하는 방식은 함수 foo의 반환 타입이 Promise일 때 유용합니다. 이를 통해 foo 함수의 비동기 작업이 완료된 후의 결과 타입을 추론할 수 있습니다.

Awaited 타입 유틸리티

Awaited<T>는 타입스크립트에서 비동기 함수의 결과 타입을 추론하는 데 사용되는 유틸리티 타입입니다. Promise가 반환하는 값의 타입을 추출합니다.

ReturnType 타입 유틸리티

ReturnType<T>는 주어진 함수 타입 T의 반환 타입을 추출하는 유틸리티 타입입니다.

typeof 연산자

typeof 연산자는 변수나 함수의 타입을 가져오는 데 사용됩니다.

예제

// 비동기 함수 foo 정의
async function foo() {
  return 42;
}

// foo의 반환 타입은 Promise<number>입니다.
// 따라서 Awaited<ReturnType<typeof foo>>는 number입니다.

type ResultType = Awaited<ReturnType<typeof foo>>;

// ResultType은 number가 됩니다.
const result: ResultType = 42;

console.log(result); // 42

 

위 예제에서, foo 함수는 Promise<number>를 반환합니다.

ReturnType<typeof foo>는 Promise<number> 타입을 가져오고, Awaited<ReturnType<typeof foo>>는 이 Promise가 해제된 후의 값을 추출하여 number 타입을 얻게 됩니다.

또 다른 예제

비동기 함수가 객체를 반환하는 경우:

// 비동기 함수 getUser 정의
async function getUser() {
  return {
    id: 1,
    name: "John Doe",
  };
}

// getUser의 반환 타입은 Promise<{ id: number; name: string; }>입니다.
// 따라서 Awaited<ReturnType<typeof getUser>>는 { id: number; name: string; }입니다.

type UserType = Awaited<ReturnType<typeof getUser>>;

// UserType은 { id: number; name: string; } 타입이 됩니다.
const user: UserType = {
  id: 1,
  name: "John Doe",
};

console.log(user); // { id: 1, name: "John Doe" }

 

이 예제에서도 getUser 함수는 Promise<{ id: number; name: string; }> 타입을 반환하며, Awaited<ReturnType<typeof getUser>>를 통해 비동기 작업이 완료된 후의 객체 타입을 추출합니다.

요약

• ReturnType<T>: 함수 T의 반환 타입을 추출합니다.
• Awaited<T>: Promise 타입 T가 해제된 후의 값을 추출합니다.
• typeof: 변수나 함수의 타입을 가져옵니다.

이 세 가지를 조합하여 비동기 함수의 결과 타입을 추론하는 데 사용할 수 있습니다.

 

keyof typeof

keyof typeof는 TypeScript에서 주로 객체의 키(key)를 타입으로 추출하고자 할 때 사용하는 구문입니다. 이 구문은 객체의 키를 문자열 리터럴 타입으로 변환하여 타입 수준에서 사용할 수 있게 합니다.

typeof 연산자

typeof 연산자는 객체나 변수의 타입을 가져오는 데 사용됩니다.

keyof 연산자

keyof 연산자는 객체 타입의 키들을 문자열 리터럴 타입으로 변환합니다.

keyof typeof의 조합

keyof typeof의 조합은 객체의 키를 타입으로 추출할 때 매우 유용합니다. 예를 들어, 객체가 선언된 위치에서 그 객체의 키들을 타입으로 사용할 수 있습니다.

예제

다음은 keyof typeof를 사용하는 예제입니다:

// 객체 선언
const colors = {
  red: "#FF0000",
  green: "#00FF00",
  blue: "#0000FF",
};

// typeof colors는 { red: string; green: string; blue: string; } 타입입니다.
// keyof typeof colors는 "red" | "green" | "blue" 타입입니다.

type ColorKeys = keyof typeof colors;

// ColorKeys 타입은 "red" | "green" | "blue"입니다.
function printColorName(color: ColorKeys) {
  console.log(color);
}

printColorName("red");   // 유효
printColorName("green"); // 유효
printColorName("blue");  // 유효

// printColorName("yellow"); // 컴파일 오류: Argument of type '"yellow"' is not assignable to parameter of type 'ColorKeys'.

 

위 예제에서:

1. const colors는 객체를 정의합니다.
2. typeof colors는 객체의 타입을 추출합니다: { red: string; green: string; blue: string; }.
3. keyof typeof colors는 이 객체 타입의 키들을 추출하여 유니온 타입 "red" | "green" | "blue"를 만듭니다.
4. ColorKeys 타입은 "red" | "green" | "blue"가 됩니다.
5. printColorName 함수는 ColorKeys 타입을 파라미터로 받아, colors 객체의 유효한 키들만 허용하게 됩니다.

또 다른 예제

다른 객체를 사용한 예제:

// 객체 선언
const userRoles = {
  admin: 1,
  editor: 2,
  viewer: 3,
};

// typeof userRoles는 { admin: number; editor: number; viewer: number; } 타입입니다.
// keyof typeof userRoles는 "admin" | "editor" | "viewer" 타입입니다.

type RoleKeys = keyof typeof userRoles;

// RoleKeys 타입은 "admin" | "editor" | "viewer"입니다.
function getRoleId(role: RoleKeys): number {
  return userRoles[role];
}

console.log(getRoleId("admin"));  // 1
console.log(getRoleId("editor")); // 2
console.log(getRoleId("viewer")); // 3

// console.log(getRoleId("guest")); // 컴파일 오류: Argument of type '"guest"' is not assignable to parameter of type 'RoleKeys'.

 

이 예제에서는 userRoles 객체를 사용하여 객체의 키를 타입으로 추출하고, 이를 함수의 파라미터 타입으로 사용하여 안전한 타입 검사를 수행합니다.

요약

• typeof 연산자는 객체나 변수의 타입을 추출합니다.
• keyof 연산자는 객체 타입의 키들을 문자열 리터럴 타입으로 변환합니다.
• keyof typeof는 객체의 키를 타입으로 추출하여 타입 안전성을 높이고, 코드의 가독성을 높이는 데 유용합니다.

이 조합을 사용하면 객체의 키들을 타입으로 안전하게 다룰 수 있으며, 함수나 변수에서 해당 키들만 사용하도록 제한할 수 있습니다.