타입스크립트 : 파라미터 타입(Parameters)과 리턴 타입(ReturnType)

타입스크립트

TLDR : 좋은 사용 사례

• 파라미터 유틸리티 타입은, 인자로 사용할 데이터와 함수 파라미터 시그니처의 변경을 동기화
• 리턴타입 유틸리티 타입은, 다른 함수의 출력을 다른 함수의 입력 파라미터의 시그니처와 동기화

원문 : https://fjolt.com/article/typescript-parameters-utility-type#:~:text=The%20TypeScript%20Parameters%20Type%20is,we%20want%20to%20replicate%20that.

How the TypeScript Parameters Type Works

해당 유틸리티 타입들은,

함수의 파라미터, 리턴타입 기반으로 새로운 타입을 작성하는데 활용합니다.

파라미터(Parameters) 타입

함수의 파라미터 타입과 인자로 활용할 *튜플 *변수의 타입을 동기화 하는데 사용합니다.

 

해당 유틸리티 타입은 항상 튜플을 반환합니다.

const test = (a:string)=>{};
type Test = Parameters<typeof test>;
const aa :Test =['1'];

해당 타입엔 아래와 같이 인자로 함수를 전달할 수 있습니다.

type anotherType = Parameters<(a: string, b: number) => void> // [string,string]

튜플(배열을) 함수의 인자로 사용할 목적을 나타내는데 좋습니다.

const myFunction = (a: string, b: string) => {
    return a + b;
}

type myType = Parameters<typeof myFunction>
// 리턴타입은 튜플입니다.

// 함수의 파라미터 타입과 변수의 타입이 동기화 됩니다.
let myArray:myType = [ 'hello ', 'world' ];

myFunction(...myArray)

 

아래와 같이 인덱스를 활용할 수 있습니다.

type myType = Parameters<typeof myFunction>[0]
// Equivalent of 'string'

아래와 같이 둘로 나누어서 사용 가능합니다.

const myFunction = (a: string, b: string) => {
    return a + b;
}

type aType = Parameters<typeof myFunction>[0]
type bType = Parameters<typeof myFunction>[1]

let a:aType = 'hello '
let b:bType = 'world'

myFunction(a, b)

리턴(ReturnType) 타입

원문 : https://fjolt.com/article/typescript-returntype-utility-type

How the TypeScript ReturnType Type works

함수의 리턴값의 타입을 활용합니다

 

ReturnType 유틸리티 타입은 특정 함수의 출력을 다른 함수에서 가져와야 하는 상황에서 매우 유용합니다.

이 시나리오에서는 함수의 출력이 제한되는 새로운 커스텀 타입을 만들 수 있습니다.

아래의 작위적인 예시를 봅시다.

sendDate의 리턴 결과를  Data로 타이핑하여 전달 후 사용하고 있습니다.

function sendData(a: number, b: number) {
    return {
        a: `${a}`,
        b: `${b}`
    }
}

type Data = {
    a: string,
    b: string
}

function consoleData(data:Data) {
    console.log(JSON.stringify(data));
}

let stringifyNumbers = sendData(1, 2);
consoleData(stringifyNumbers);

 

만약 sendData의 출력 타입이 바뀌면,

Data 타입도 바꿔줘야 할 것입니다.

 

이런 케이스를 막기 위해, 두 개의 타입을 동기화 해줍니다.

function sendData(a: number, b: number) {
    return {
        a: `${a}`,
        b: `${b}`
    }
}
type Data = ReturnType<typeof sendData>
// The same as writing:
// type Data = {
//     a: string,
//     b: string
// }