将 javascript 链接 setter 转换为打字稿

Question

我一直在 javascript 中使用这个习惯用法来创建链式 setter。

function bar() {

    let p = 0;

    function f() {
    }

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

    return f;

}

这让我可以轻松创建和设置 const b = bar().prop(2)，将 b 作为函数并允许附加更多链接语句。它适用于通过使用 b.prop() 获得属性，这当然不能进一步链接。

我正在尝试将其转换为 TypeScript 并找到了这个解决方案，虽然它可以正确地允许输入，但它似乎很晦涩。

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

当参数有多种类型时，这会变得更加模糊。

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

是否有任何惯用的打字稿方式来进行此设置和获取？

Answer 1

因为 prop 函数只接受一个可能的参数，您可以通过简单地将 d 声明为可选来使 Typescript 版本更类似于 Javascript （并且更简单），然后检查它是否存在。不需要休息语法或数组：

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

对于其他类型，只需将类型添加到 d 参数中，因为它将被分配给 p，所以还要声明 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

您可以声明一个 function interface 如：

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

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

}

将 javascript 链接 setter 转换为打字稿

Converting javascript chained setter to typescript

javascript

idioms

typescript