sourcetip

변수 인수 수가 있는 함수의 TypeScript 유형 시그니처

fileupload 2023. 2. 9. 22:27
반응형

변수 인수 수가 있는 함수의 TypeScript 유형 시그니처

가변적인 양의 인수를 받아들이는 함수 멤버와의 인터페이스를 정의하는 데 문제가 있습니다.다음 오브젝트 리터럴을 예로 들어 보겠습니다.

var obj = {
    func: () => {
        for(var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    }
};

다음과 같은 인터페이스를 정의할 수 있으면 좋겠습니다.

interface IExample {
    func: ( ??? ) => void;
}

다음 코드를 오류 없이 컴파일할 수 있도록 합니다.

var test = (o: IExample) {
    o.func("a");
    o.func("a", "b");
    o.func("a", "b", "c");
    ...
}

TypeScript는 ECMAScript 6 스프레드 제안을 사용합니다.

http://wiki.ecmascript.org/doku.php?id=harmony:spread

유형 주석을 추가하면 다음과 같이 됩니다.

interface Example {
    func(...args: any[]): void;
}

Chuck의 답변에 덧붙이자면 인터페이스가 그렇게 정의되어 있을 필요는 없습니다.그냥 하면 돼요....메서드에 직접 입력:

class Header { constructor(public name: string, public value: string) {} }

getHeaders(...additionalHeaders: Header[]): HttpHeaders {
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json')

    if (additionalHeaders && additionalHeaders.length)
        for (var header of additionalHeaders)
            headers.append(header.name, header.value);

    return headers;
}

그러면 다음과 같이 할 수 있습니다.

headers: this.getHeaders(new Header('X-Auth-Token', this.getToken()))

또는

headers: this.getHeaders(new Header('X-Auth-Token', this.getToken()), new Header('Something', "Else"))

...args[] 인수를 사용하지 않으면 Typescript는 Javascript에 배열을 만들고 인수를 복사합니다.

이러한 불필요함을 피하기 위해 기능뿐만 아니라 기능의 프로토타입을 만들 수 있습니다. 따라서 다음과 같습니다.

function format_n(str: string, ... $n: any[]): string;
function format_n(str: string): string {
    return str.replace(/%(\d+)/g, (_, n) => format_n.arguments[n]);
}

언급URL : https://stackoverflow.com/questions/12739149/typescript-type-signatures-for-functions-with-variable-argument-counts

반응형