160

I'm having trouble defining interfaces with function members that accept variable amounts of arguments. Take the following object literal as an example:

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

I'd like to be able to define an interface such as:

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

So that the following code can compile without error:

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

3 Answers 3

295

TypeScript uses the ECMAScript 6 spread proposal,

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

but adds type annotations so this would look like,

interface Example {
    func(...args: any[]): void;
}
15
  • Perfect -- for some reason I was not able to find anything about this in the language spec document, but it seems to work just fine. Thank you.
    – nxn
    Oct 5, 2012 at 3:59
  • 4
    @nxn Page 50/51 in the specs : RestParameter
    – A. M.
    Oct 8, 2012 at 20:21
  • @PulsarBlow Ah, I wasn't familiar with them being called Rest Parameters. Thank you for letting me know where to find them in the spec.
    – nxn
    Oct 8, 2012 at 23:03
  • 10
    @JanusTroelsen I realize that I'm very late but for anyone who stumbles upon this post, make sure you don't forget to mark the RestParameter as an array. ...args:any[] is correct but ...args:any is not.
    – GuiSim
    Oct 2, 2013 at 1:14
  • 1
    @AlexanderMills func is the name of the function.
    – Bob Vale
    Jul 30, 2017 at 21:49
6

Just to add to chuck's answer, you don't need to have an interface defined as such. You can just do the ... directly in the method:

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;
}

Then you can call it:

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

Or

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

If the ...args[] argument is not used Typescript still creates an array in the Javascript and copies the arguments to it.

To avoid this unnecessariness you can make a prototype for the function as well as the function, thus:-

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.