TypeScript 매개변수 유형의 작동 방식

TypeScriptParameters 유형은 함수의 매개변수나 인수를 가져와 이를 기반으로 새 유형을 만드는 데 사용됩니다. aFunction의 입력이 특정 유형을 따르고 이를 복제하려는 경우 매우 유용합니다. 이 안내서에서는 Parameters 유틸리티 유형이 작동하는 방식을 살펴보겠습니다.

TypeScript 사용자 정의 유형

이 가이드는 사용자 정의 유형을 다룹니다. 사용자 정의 유형을 처음 사용하는 경우 read my guide on custom types here .

매개변수 유형의 작동 방식

설정된 수의 인수가 있는 함수가 있다고 상상해 보십시오. 예를 들어, 다음은 a 및 b 두 개의 매개변수 또는 인수가 있는 TypeScript 함수입니다.

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

이 함수를 실행하고 싶다고 가정해 봅시다. 한 가지 방법은 tuple type 연산자와 함께 배열을 전달하는 것입니다. 예를 들어:

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

let passArray:[string, string] = [ 'hello ', 'world' ]

// Returns 'hello world'
myFunction(...passArray);

여기서 우리는 [string, string] 라는 튜플을 정의하고 myFunction에 전달할 수 있으며 a 및 b 인수를 모두 충족합니다.

잘 작동하지만 myFunction의 인수가 변경되면 어떻게 됩니까? 이것은 특히 myFunction가 타사 스크립트에서 오는 경우 발생할 가능성이 높습니다. 그런 다음 함수를 업데이트해야 할 뿐만 아니라 전달하는 튜플 유형도 업데이트해야 합니다. 패키지myFunction가 변경될 경우 최신 상태를 유지해야 합니다.

대신 항상 일치하는지 확인하려면 Parameters를 사용하여 동일한 유형을 생성할 수 있습니다. 이렇게 하면 수동으로 정의할 필요 없이 인수의 튜플 유형이 생성됩니다.

type myType = Parameters<typeof myFunction>
// Equivalent to a tuple type of:
// type myType = [ a: string, b: string ]

이제 오류에 대한 두려움 없이 myType 유형을 myFunction에 전달할 수 있으므로 사용자 지정 유형을 정의하는 데 있어 약간의 번거로움이 줄어듭니다.

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

type myType = Parameters<typeof myFunction>

let myArray:myType = [ 'hello ', 'world' ];

myFunction(...myArray)

세 개의 점 매개변수 유틸리티 유형으로 특정 매개변수 입력

매개변수 유형은 또한 매우 유연하며 전체 인수 집합 이상을 정의할 수 있습니다. 예를 들어, 함수 myFunction의 첫 번째 인수 유형만 일치시키려면 [0]를 추가하여 간단한 배열처럼 참조할 수 있습니다. 다음은 a 유형과 일치하지만 b 유형과 일치시키려면 [1]를 사용할 수 있습니다.

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)

매개변수로 더 재미있게

Parameters는 인수 유형을 새 유형으로 변환하므로 함수를 직접 전달할 수도 있습니다. 아래는 [ a: string, b: number ] 유형을 생성합니다. 이것은 특정 함수에서 매개변수를 가져오는 것보다 덜 유용하지만 특정 상황에서 목적을 달성할 수 있습니다.

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