如何在TypeScript中注释递归类型？

Question

If I have a function like this:

function say(message: string) {
    alert(message);
    return say;
}

it has the interesting property that I can chain calls to it:

say("Hello,")("how")("are")("you?");

The compiler will generate a warning if I pass a number into the first call, but it will allow me to put numbers into subsequent calls.

say("Hello")(1)(2)(3)(4)

What type annotation do I need to add to the say function to make the compiler generate warnings when I pass in invalid types to the chained calls?

Answer 1

A type that references itself must have a name. For example,

interface OmegaString {
    (message: string): OmegaString;
}

then you can annotate say as an OmegaString ,

function say(message: string): OmegaString {
    alert(message);
    return say;
}

then the following code will type-check.

say("Hello,")("how")("are")("you?");

but the following will not,

say("Hello")(1)(2)(3)(4)

Answer 2

Chainable method

When you are using a class instead of a function, you can use the this type to express the fact that a method returns the instance it was called on (chaining methods) .

Without this :

class StatusLogger {
    log(message: string): StatusLogger { ... }
}
// this works
new ErrorLogger().log('oh no!').log('something broke!').log(':-(');

class PrettyLogger extends StatusLogger {
    color(color: string): PrettyLogger { ... }
}
// this works
new PrettyLogger().color('green').log('status: ').log('ok');
// this does not!
new PrettyLogger().log('status: ').color('red').log('failed');

With this :

class StatusLogger {
    log(message: string): this { ... }
}
class PrettyLogger extends StatusLogger {
    color(color: string): this { ... }
}
// this works now!
new PrettyLogger().log('status:').color('green').log('works').log('yay');

Chainable function

When a function is chainable you can type it with an interface:

function say(text: string): ChainableType { ... }
interface ChainableType {
    (text: string): ChainableType;
}
say('Hello')('World');

Chainable function with properties/methods

If a function has other properties or methods (like jQuery(str) vs jQuery.data(el) ), you can type the function itself as an interface:

interface SayWithVolume {
    (message: string): this;
    loud(): this;
    quiet(): this;
}

const say: SayWithVolume = ((message: string) => { ... }) as SayWithVolume;
say.loud = () => { ... };
say.quiet = () => { ... };

say('hello').quiet()('can you hear me?').loud()('hello from the other side');