Navigating the missing "length" property when dealing with partial functions generated using lodash's partialRight

Question

Navigating the missing "length" property when dealing with partial functions generated using lodash's partialRight

I've been utilizing MomentTimezone for time manipulation within the browser.

My development stack includes TypeScript and Lodash.

In my application, there is an accountTimezone variable set on the window object which stores the user's preferred timezone. I am attempting to create a helper function called localMoment() that will take any of the various signatures of moment.tz(), adding the window.accountTimezone as the last argument representing the timezone string.

It appears that partialRight might be the solution to my issue.

const localMoment = partialRight(moment.tz, window.accountTimezone);

The challenge I'm facing is related to a note in the lodash documentation:

Note: This method doesn't set the "length" property of partially applied functions.

Specifically, when calling

localMoment('2019-08-01 12:00:00')

, TypeScript raises an error mentioning that localMoment() was given 1 argument instead of the expected zero arguments.

How can I ensure that TypeScript recognizes a call to localMoment() should mimic a call to moment.tz() following the MomentTimzone standards, while addressing the arity confusion caused by using partialRight()?

I have contemplated an alternative approach like below, but I am uncertain about properly typing the ...args parameter to satisfy TypeScript requirements.

const localMoment = (...args): Moment => moment.tz(...args, window.accountTimezone);

javascript typescript lodash

Answer 1

Answer №1

Finding a straightforward solution to this problem is challenging. You have the option to either refrain from typing or create your own interface.

Typescript itself does not offer a direct solution and instead resorts to declaring multiple signatures: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/lodash/common/function.d.ts#L1147

Even if you find a way to manipulate the typescript interface, handling other methods like zone, add, link, etc., which do not include a timezone parameter, might be problematic: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/moment-timezone/moment-timezone.d.ts#L20

The most practical approach involves preventing redundancy in the entire interface by utilizing the Pick utility type:

type CurriedMomentTimezone = Pick<moment.MomentTimezone, 'zone' | 'add' | 'link' | 'load' | 'names' | 'guess' | 'setDefault'> & {
    (): moment.Moment;
    (date: number): moment.Moment;
    (date: number[]): moment.Moment;
    (date: string): moment.Moment;
    (date: string, format: moment.MomentFormatSpecification): moment.Moment;
    (date: string, format: moment.MomentFormatSpecification, strict: boolean): moment.Moment;
    (date: string, format: moment.MomentFormatSpecification, language: string): moment.Moment;
    (date: string, format: moment.MomentFormatSpecification, language: string, strict: boolean): moment.Moment;
    (date: Date): moment.Moment;
    (date: moment.Moment): moment.Moment;
    (date: any): moment.Moment;
}

localMoment = _.partialRight(moment.tz, this.accountTimezone) as CurriedMomentTimezone;

Answer 2

Finding a straightforward solution to this problem is challenging. You have the option to either refrain from typing or create your own interface.

Typescript itself does not offer a direct solution and instead resorts to declaring multiple signatures: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/lodash/common/function.d.ts#L1147

Even if you find a way to manipulate the typescript interface, handling other methods like zone, add, link, etc., which do not include a timezone parameter, might be problematic: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/moment-timezone/moment-timezone.d.ts#L20

The most practical approach involves preventing redundancy in the entire interface by utilizing the Pick utility type:

type CurriedMomentTimezone = Pick<moment.MomentTimezone, 'zone' | 'add' | 'link' | 'load' | 'names' | 'guess' | 'setDefault'> & {
    (): moment.Moment;
    (date: number): moment.Moment;
    (date: number[]): moment.Moment;
    (date: string): moment.Moment;
    (date: string, format: moment.MomentFormatSpecification): moment.Moment;
    (date: string, format: moment.MomentFormatSpecification, strict: boolean): moment.Moment;
    (date: string, format: moment.MomentFormatSpecification, language: string): moment.Moment;
    (date: string, format: moment.MomentFormatSpecification, language: string, strict: boolean): moment.Moment;
    (date: Date): moment.Moment;
    (date: moment.Moment): moment.Moment;
    (date: any): moment.Moment;
}

localMoment = _.partialRight(moment.tz, this.accountTimezone) as CurriedMomentTimezone;

Answer 3

Answer №2

Here are some TypeScript-friendly signatures:

const localMoment = (...args: any[]): moment.Moment => moment.tz.apply(this, [...args, this.accountTimezone]);


const localMoment2 = _.partialRight(moment.tz, this.accountTimezone) as (...args: any[]) => moment.Moment;

Try it on Stackblitz: https://stackblitz.com/edit/typescript-r1h2tq?embed=1&file=index.ts

When one moment.tz signature has a parameter of type any, creating a stricter type than any[] may not be very useful unless you make local overloads for every moment.tz overload.

Answer 4

Here are some TypeScript-friendly signatures:

const localMoment = (...args: any[]): moment.Moment => moment.tz.apply(this, [...args, this.accountTimezone]);


const localMoment2 = _.partialRight(moment.tz, this.accountTimezone) as (...args: any[]) => moment.Moment;

Try it on Stackblitz: https://stackblitz.com/edit/typescript-r1h2tq?embed=1&file=index.ts

When one moment.tz signature has a parameter of type any, creating a stricter type than any[] may not be very useful unless you make local overloads for every moment.tz overload.

Answer 5

Answer №3

Consider incorporating the specified function type signature into your localMoment definition:

const localMoment: (moment: string) => (string | undefined) = partialRight(moment.tz, window.accountTimezone);

If you prefer an alternate approach, you can try the following code using the spread operator:

const localMoment: (args: string[]) => (string | undefined) = (args: string[]) => moment.tz(...args, window.accountTimezone);

To learn more about "Typing Functions in TypeScript," check out this informative blog post.

Answer 6

Consider incorporating the specified function type signature into your localMoment definition:

const localMoment: (moment: string) => (string | undefined) = partialRight(moment.tz, window.accountTimezone);

If you prefer an alternate approach, you can try the following code using the spread operator:

const localMoment: (args: string[]) => (string | undefined) = (args: string[]) => moment.tz(...args, window.accountTimezone);

To learn more about "Typing Functions in TypeScript," check out this informative blog post.

Navigating the missing "length" property when dealing with partial functions generated using lodash's partialRight

Answer №1

Answer №2

Answer №3

Similar questions

How can I create a menu of buttons in Vue that open individual windows with unique URLs when clicked?

Changing the Value of an Input Element Dynamically in React: A Step-by-Step Guide

Warning happens two times upon performing a right-click

The indexOf function is not compatible with AngularJS controllers

When the value of a react state is used as the true value in a ternary operator in Types

Exploring Node.js Express: Understanding the Difference Between Modules and Middleware

The class assigns a property to an instance member, while the extended class '(Anonymous class)' designates it as an instance member function

Encountering a 500 internal server error while accessing the web server

The data from my API is not showing up in my React application

Upgrade jQuery visibility and opacity animations to pure JavaScript for a more lightweight solution

Saving components locally (vue2)

Unable to refresh the fullcalendar section following an ajax post click

Issue with applying the React Material UI ThemeProvider

Angular app sends a JSON request and receives no data in response

How come I'm not receiving an error message when I enter an incorrect email or password?

Pause the for loop until all nested asynchronous database calls are completed

The function is not executing as expected, with no errors detected in the console log

Running compiler-produced assembler code within the program

Tips for displaying the contents of a URL within a div element

Error: Cannot run yarn dev because node_modules/node/bin/node is missing