Differentiating functions in Typescript through method overloading by inferring the second argument's type based on the first argument's

Question

Differentiating functions in Typescript through method overloading by inferring the second argument's type based on the first argument's

Looking to implement method overloading in Typescript with stricter type checking for method invocation based on different arguments. I am encountering an error:

'props' is possibly 'undefined'.

This is the code that is causing the error (playground):

export default class ControlsContr {
  // constructor(public state: Signal<State> = signal(State.Idle)) {}

  dispatch(ev: Event.Reset): void;
  dispatch(ev: Event.Delete, props: { id: number }): void;
  dispatch(ev: Event, props?: { id?: number }): void {
    if (ev === Event.Delete) {
      const num: number = props.id;
    }
  }
}

export enum State {
  Idle = "Idle",
  Deleting = "Deleting",
  DeleteDone = "DeleteDone",
}

export enum Event {
  Delete = "Delete",
  Reset = "Reset",
}

function deleteItem(id: number) {
}

Is it possible to achieve what I'm attempting and if so, how can it be done?

typescript

Answer 1

Answer №1

Because of the interconnected parameters in the overload signatures, a corresponding implementation signature must be written to maintain this correlation. One way to achieve this is by using a notation that depicts the parameters as a tuple with destructured rest parameters, forming a union type that mirrors the pairings present in the overload signatures. By doing so, the compiler can accurately infer based on the existing discriminant conditional. The following example illustrates this concept:

TS Playground

class ControlsContr {
  dispatch(ev: Event.Reset): void;
  dispatch(ev: Event.Delete, props: { id: number }): void;
  dispatch(
    ...[ev, props]: [ev: Event.Reset, undefined?] | [
      ev: Event.Delete,
      props: { id: number },
    ]
  ) {
    if (ev === Event.Delete) {
      ev
    //^? (parameter) ev: Event.Delete
      props
    //^? (parameter) props: { id: number }

      const num = props.id; // ok
          //^? const num: number
    } else {
      ev
    //^? (parameter) ev: Event.Reset
      props
    //^? (parameter) props: undefined
    }
  }
}

Answer 2

Because of the interconnected parameters in the overload signatures, a corresponding implementation signature must be written to maintain this correlation. One way to achieve this is by using a notation that depicts the parameters as a tuple with destructured rest parameters, forming a union type that mirrors the pairings present in the overload signatures. By doing so, the compiler can accurately infer based on the existing discriminant conditional. The following example illustrates this concept:

TS Playground

class ControlsContr {
  dispatch(ev: Event.Reset): void;
  dispatch(ev: Event.Delete, props: { id: number }): void;
  dispatch(
    ...[ev, props]: [ev: Event.Reset, undefined?] | [
      ev: Event.Delete,
      props: { id: number },
    ]
  ) {
    if (ev === Event.Delete) {
      ev
    //^? (parameter) ev: Event.Delete
      props
    //^? (parameter) props: { id: number }

      const num = props.id; // ok
          //^? const num: number
    } else {
      ev
    //^? (parameter) ev: Event.Reset
      props
    //^? (parameter) props: undefined
    }
  }
}

Answer 3

Answer №2

Typescript's documentation explains how we can utilize literal types to refer to specific strings and numbers in type positions, allowing for functions that only accept a certain set of known values.

Enums cannot achieve this, but strings can be used instead:

export default class ControlsContr {
  dispatch(ev: "Reset"): void;
  dispatch(ev: "Delete", props: { id: number }): void;
  dispatch(ev: Event, props?: { id?: number }): void {}
}

export type Event = "Delete" | "Reset"

const controls = new ControlsContr()
controls.dispatch("Reset")
controls.dispatch("Delete", {id: 1})
// controls.dispatch("Reset", {id: 1}) fails
// controls.dispatch("Delete") fails

Alternatively, discriminating unions can be used:

export default class ControlsContr {
  dispatch(ev: Event): void {
    if (ev.action == "Delete") {
      console.log(ev.id)
    }
  }
}

type ResetEvent = {action: "Reset"};
type DeleteEvent = {action: "Delete", id: number};
type Event = ResetEvent | DeleteEvent

const controls = new ControlsContr()
controls.dispatch({action: "Reset"})
controls.dispatch({action: "Delete", id: 1})

Answer 4

Typescript's documentation explains how we can utilize literal types to refer to specific strings and numbers in type positions, allowing for functions that only accept a certain set of known values.

Enums cannot achieve this, but strings can be used instead:

export default class ControlsContr {
  dispatch(ev: "Reset"): void;
  dispatch(ev: "Delete", props: { id: number }): void;
  dispatch(ev: Event, props?: { id?: number }): void {}
}

export type Event = "Delete" | "Reset"

const controls = new ControlsContr()
controls.dispatch("Reset")
controls.dispatch("Delete", {id: 1})
// controls.dispatch("Reset", {id: 1}) fails
// controls.dispatch("Delete") fails

Alternatively, discriminating unions can be used:

export default class ControlsContr {
  dispatch(ev: Event): void {
    if (ev.action == "Delete") {
      console.log(ev.id)
    }
  }
}

type ResetEvent = {action: "Reset"};
type DeleteEvent = {action: "Delete", id: number};
type Event = ResetEvent | DeleteEvent

const controls = new ControlsContr()
controls.dispatch({action: "Reset"})
controls.dispatch({action: "Delete", id: 1})

Differentiating functions in Typescript through method overloading by inferring the second argument's type based on the first argument's

Answer №1

Answer №2

Similar questions

What is the best way to organize information in a table based on the date

Identifying collisions or contact between HTML elements with Angular 4

The mat-slide-toggle component does not recognize the checked binding

Seeking a breakdown of fundamental Typescript/Javascript and RxJs code

Error: Null is causing an issue and preventing property 'isSkipSelf' from being read in Angular7

The final value of a loop is consistently returned each time

When clicking initially, the default input value in an Angular 2 form does not get set

Using TypeScript to work with JSON fields that include the '@' symbol

How can I retrieve properties from a superclass in Typescript/Phaser?

Enhancing State Management with CombineReducers in TypeScript

Implementing Angular 2 - Steps to ensure a service is accessible within the app module

What factors contribute to TypeScript having varying generic function inference behaviors between arrow functions and regular functions?

Error Encountered when Trying to Utilize Vue Component Getter in TypeScript Mixin (Error Code: TS233

Oops! It seems like there is an issue with reading the property 'filter' of an undefined object. Any ideas on how to resolve this error

Using Typescript: How to access a variable beyond the scope of a loop

What is the best way to convert an array of data into a dataset format in React Native?

Getting object arguments from an npm script in a NodeJS and TypeScript environment can be achieved by following these steps

No data is generated when choosing from the dropdown menu in mat-select

Best Practices for Integrating Angular with Your Custom JavaScript Library

How to dynamically generate Angular component selectors with variables or loops?