TypeScript에서 함수의 반환 값으로 쉽게 유형을 만드는 방법은 무엇입니까?

Originally posted here!

TypeScript에서 함수의 반환 값에서 쉽게 유형을 만들려면 ReturnType 유틸리티 유형을 사용하고 반환 값의 유형을 가져와야 하는 함수 유형 선언을 첫 번째 유형 인수로 전달할 수 있습니다.

TL;DR

// a simple function that has
// an infered type of `string`
function sayGreeting(name: string, greeting: string) {
  return `${greeting}, ${name}`;
}

// make type from function's return value
// using the `ReturnType` utility type
type FunctionReturnType = ReturnType<typeof sayGreeting>; // string

sayGreeting라는 2개의 반환 값을 받아들이는 name라는 함수가 있고 다음과 같이 string의 유형을 갖는 인사말이 있다고 가정해 보겠습니다.

// a simple function that has
// an infered type of `string`
function sayGreeting(name: string, greeting: string) {
  return `${greeting}, ${name}`;
}

이제 sayGreeting 함수에서 반환 값의 유형을 가져오려면 ReturnType 유틸리티 유형을 사용한 다음 sayGreeting 함수의 유형을 전달할 수 있습니다.

이제 typeof라는 멋진 연산자를 사용하고 함수 이름을 쓸 수 있기 때문에 어떻게 함수의 유형을 얻을 수 있는지 물을 수 있습니다. 이것은 반환 값 유형을 포함하여 함수의 전체 유형을 자동으로 유추합니다. 그런 다음 이것을 ReturnType 유틸리티 유형에 대한 첫 번째 유형 인수로 전달할 수 있습니다.

다음과 같이 할 수 있습니다.

// a simple function that has
// an infered type of `string`
function sayGreeting(name: string, greeting: string) {
  return `${greeting}, ${name}`;
}

// make type from function's return value
// using the `ReturnType` utility type
type FunctionReturnType = ReturnType<typeof sayGreeting>; // string

이제 FunctionReturnType 위로 마우스를 가져가면 정확히 string 함수의 반환 유형인 sayGreeting 유형을 볼 수 있습니다.

TypeScript의 함수 반환 값에서 유형을 성공적으로 만들었습니다. 예이 🥳!

codesandbox에 있는 위의 코드를 참조하십시오.

그게 다야 😃!

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.