Having trouble getting the Typescript overload arrow function to function properly

Question

Having trouble getting the Typescript overload arrow function to function properly

(I am implementing strict null checks)

The arrow function I have includes overloaded types:

    type INumberConverter = {
      (value: number): number;
      (value: null): null;
    };
    const decimalToPercent: INumberConverter = (value: number | null): number | null => {
      if (!value) {
        return null;
      }
      return value * 100;
    };

Based on my research from various sources (Can I use TypeScript overloads when using fat arrow syntax for class methods?), this code should be valid. However, I encounter the following error message:

TS2322: Type '(value: number | null) => number | null' is not assignable to type 'INumberConverter'.   Type 'number | null' is not assignable to type 'number'.     Type 'null' is not assignable to type 'number'

If I define this function conventionally (using the function keyword):

    function decimalToPercent(value: null): null;
    function decimalToPercent(value: number): number;
    function decimalToPercent(value: number | null): number | null {
      if (!value) {
        return null;
      }
      return value * 100;
    }

This approach works without any errors.

I must utilize an arrow function to maintain the context of this, and I require overloading so that TypeScript understands that decimalToPercent(1) cannot be null.

Why is it not working as intended in my initial implementation, and how can I resolve this issue?

typescript overloading arrow-functions

Answer 1

Answer №1

When dealing with overload signatures and implementation signatures, the rules for compatibility are more relaxed compared to assignment.

If you attempt to assign a function that may return null to a function that does not allow null returns in its overload signature ((value: number): number;), the compiler will raise an issue. With overloads, as all signatures and implementations are considered together, the compiler assumes that the programmer knows what they are doing, whether this is true or not.

There are a few workarounds available:

One option is to use a type assertion, although this might result in losing some type checking for implementation signature compatibility:

type INumberConverter = {
  (value: number): number;
  (value: null): null;
};
const decimalToPercent = ((value: number | null): number | null => {
  if (!value) {
    return null;
  }
  return value * 100;
}) as INumberConverter;

Another approach is to use a regular function and capture this using old ES5 style, even though it involves replicating much of the function signature:

type INumberConverter = {
  (value: number): number;
  (value: null): null;
};

class X {
    decimalToPercent: INumberConverter;
    multiper = 100;
    constructor() {
        let self = this;
        function decimalToPercent(value: number): number;
        function decimalToPercent(value: null): null;
        function decimalToPercent(value: number | null): number | null {
            if (!value) {
                return null;
            }
            // use self
            return value * self.multiper;
        };
        this.decimalToPercent = decimalToPercent;
    }
}

Alternatively, a simpler solution could be to use bind in the constructor and define the function as a regular method:

class X {

    decimalToPercent(value: number): number;
    decimalToPercent(value: null): null;
    decimalToPercent(value: number | null): number | null {
        if (!value) {
            return null;
        }
        return value * this.multiper;
    };
    multiper = 100;
    constructor() {
        this.decimalToPercent = this.decimalToPercent.bind(this);
    }
}

Answer 2

When dealing with overload signatures and implementation signatures, the rules for compatibility are more relaxed compared to assignment.

If you attempt to assign a function that may return null to a function that does not allow null returns in its overload signature ((value: number): number;), the compiler will raise an issue. With overloads, as all signatures and implementations are considered together, the compiler assumes that the programmer knows what they are doing, whether this is true or not.

There are a few workarounds available:

One option is to use a type assertion, although this might result in losing some type checking for implementation signature compatibility:

type INumberConverter = {
  (value: number): number;
  (value: null): null;
};
const decimalToPercent = ((value: number | null): number | null => {
  if (!value) {
    return null;
  }
  return value * 100;
}) as INumberConverter;

Another approach is to use a regular function and capture this using old ES5 style, even though it involves replicating much of the function signature:

type INumberConverter = {
  (value: number): number;
  (value: null): null;
};

class X {
    decimalToPercent: INumberConverter;
    multiper = 100;
    constructor() {
        let self = this;
        function decimalToPercent(value: number): number;
        function decimalToPercent(value: null): null;
        function decimalToPercent(value: number | null): number | null {
            if (!value) {
                return null;
            }
            // use self
            return value * self.multiper;
        };
        this.decimalToPercent = decimalToPercent;
    }
}

Alternatively, a simpler solution could be to use bind in the constructor and define the function as a regular method:

class X {

    decimalToPercent(value: number): number;
    decimalToPercent(value: null): null;
    decimalToPercent(value: number | null): number | null {
        if (!value) {
            return null;
        }
        return value * this.multiper;
    };
    multiper = 100;
    constructor() {
        this.decimalToPercent = this.decimalToPercent.bind(this);
    }
}

Having trouble getting the Typescript overload arrow function to function properly

Answer №1

Similar questions

Monitor the closure of a programmatically opened tab by the user

Utilizing Ionic 2 with Typescript for executing forEach operations

What is the method for retrieving all documents that contain an array field with at least one object-element having a property value of 'X'?

I find that in atom autocomplete-plus, suggestions take precedence over my own snippet prefix/trigger

Updating a one-to-one relationship in TypeORM with Node.js and TypeScript can be achieved by following these steps

What is the best way to declare a TypeScript type with a repetitive structure?

What is the best way to extract information from a button and populate a form in AngularCLI?

Creating cohesive stories in Storybook with multiple components

This element is not suitable for use as a JSX component since its return type 'void' is not a valid JSX element. Please check the return type to ensure it is compatible with

connecting and linking template content with an Observable

Encountering an error when initializing a form array with an existing array of multiple objects in Angular 13: "Control not found with

Encountering a Typescript TypeError in es2022 that is not present in es2021

Tips on sorting through an array using Angular 11 and data

Is it possible to customize a VSCode extension to function exclusively with certain programming languages?

Defining the signature of an unnamed function in TypeScript

Sending data from child components to parent components in Angular

Angular 2's ngModel feature allows for easy data binding and manipulation, particularly

What is the best way to change an existing boolean value in Prisma using MongoDB?

Implementing type inference for response.locals in Express with TypeScript

Surveying in TypeScript-React