将 javascript 链式设置器转换为 typescript

Question

I've been using this idiom in javascript to create chained setters.

function bar() {

    let p = 0;

    function f() {
    }

    f.prop = function(d) {
        return !arguments.length ? p : (p = d, f);
    }

    return f;

}

This allows me to do an easy creation and setting as const b = bar().prop(2) , having b as the function and allowing more chained statements to be appended. And it works for getting the property by using b.prop() , which of course can't be chained further.

I'm trying to convert this to TypeScript and found this solution, that although it correctly allows the typing, it seems obscure.

p.prop = (...args: [number?]) => !args.length ? p : (p = args[0]!, f);

This becomes even more obscure when there are multiple types for the argument.

p.prop = (...args: [(number | boolean)?]) => !args.length ? p : (p = args[0]!, f);

Is there any idiomatic typescript way to do this setting and getting?

Answer 1

Because the prop function accepts only one possible argument, you can make the Typescript version more similar to the Javascript (and more simple) by simply declaring d as optional, then checking whether it exists. There's no need for rest syntax or an array:

f.prop = function(d?: number) {
    return d === undefined ? p : (p = d, f);
}

For additional types, simply add the type to the d parameter, and since it's going to be assigned to p , also declare the type of p :

function bar() {
    let p: number | boolean = 0;
    function f() {
    }
    f.prop = function (d?: number | boolean) {
        return d === undefined ? p : (p = d, f);
    }
    return f;
}
const b = bar().prop(2)

Answer 2

You can declare a function interface like:

interface Chainable {
    (): void;
    prop: (d: any) => Chainable
};

function bar(): Chainable {
   ... 
   const fChainable = f;
   return fChainable;

}