Transforming a JavaScript chained setter into TypeScript

Question

Transforming a JavaScript chained setter into TypeScript

I have been utilizing this idiom in JavaScript to facilitate the creation of chained setters.

function bar() {

    let p = 0;

    function f() {
    }

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

    return f;

}

With this approach, I can easily create and set values like const b = bar().prop(2), where b represents the function and allows for additional chained statements. To retrieve the property, I simply use b.prop(), which cannot be further chained.

As I attempt to convert this functionality into TypeScript, I came across a solution that provides proper typing but appears somewhat convoluted.

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

This complexity is heightened when the argument can take multiple types.

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

Are there any conventional TypeScript methods to achieve this setting and retrieving behavior?

javascript typescript idioms

Answer 1

Answer №1

When working with the prop function, keep in mind that it only accepts a single argument. To simplify and align the Typescript version with Javascript, consider declaring d as optional and then performing a check for its existence instead of using rest syntax or an array:

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

If you need to handle additional types, just specify the type in the d parameter while also defining the type for p, since it will be assigned there:

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

When working with the prop function, keep in mind that it only accepts a single argument. To simplify and align the Typescript version with Javascript, consider declaring d as optional and then performing a check for its existence instead of using rest syntax or an array:

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

If you need to handle additional types, just specify the type in the d parameter while also defining the type for p, since it will be assigned there:

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 3

Answer №2

To define a function interface, you can do so by using the following syntax:

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

function baz(): Chainable {
   ... 
   const chain = f;
   return chain;

}

Answer 4

To define a function interface, you can do so by using the following syntax:

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

function baz(): Chainable {
   ... 
   const chain = f;
   return chain;

}

Transforming a JavaScript chained setter into TypeScript

Answer №1

Answer №2

Similar questions

perform an action in PHP when a button is clicked

Enhance your iPhone web app with high-resolution retina images!

Dynamic translation routing with Next.js

The div block containing the table is experiencing horizontal overlap as additional elements are inserted

Passport.socket.io cannot resolve the issue of a missing session

In MongoDB and Node.js, encountered error: 'Unable to access property 'collection' as it is undefined'

Unable to assign a local variable in Jquery .ajax() function to a global variable

How can I dynamically adjust the stroke length of an SVG circle using code?

conditional operator that compares values in router events

Node.js Friendship NetworkIncorporating Friendships in Node

Library of User Interface components for React Native applications

What is the proper way to implement jest.mock in a describe or it block?

"Disabling Dropzone.js functionality once a file has been selected - here's how

Best method for simultaneously calling multiple routes in Node.js and Express

Angular rest call is returning an undefined response object attribute

Is there a way to identify if a user clicks on the scrollbar within my div element?

Finding the Attachment ID on a JIRA Issue Page with JavaScript

Iterating variables in Vue.js is reminiscent of the process in AngularJS

Protractor: Command Line Tips for Providing URLs

Using Vue.js 3 to fetch data from a REST API using the Axios