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

The cache does not contain '.chunk-`X`' as requested in Next.js error

"Regardless of the circumstances, the ionic/angular service.subscribe event

Breaking up and Substituting text within Angular 8's HTML structure

PNG file is not displayed on React TSX page despite absence of any errors

Steps for creating a TypeScript project with React Native

Transform a group of objects in Typescript into a new object with a modified structure

Harness the power of Angular 2 on standard shared hosting services

Learn how to set expectations on the object returned from a spied method, Jasmine

The value of req.headers('Authorization') has not been defined

Service consuming in Angular 2 using Stomp protocol

Discovering an entry that lacks a specific value within an array in the records

A guide on implementing RxJS Observables to target a specific DIV element

Setting up eslint for your new react project---Would you like any further

There are no matching overloads in React for this call

Typescript PDFjs encountering loading issues with corrupt files

Creating a responsive class getter with Vue.js 3 using the Composition API: a guide

Typescript check for type with Jest

Tips for distinguishing a mapped type using Pick from the original type when every property is optional

Is there a way to transfer innerHTML to an onClick function in Typescript?

Migration of old AngularJS to TypeScript in require.js does not recognize import statements