Type of condition based on function parameter values

Question

Type of condition based on function parameter values

I am facing a challenge where I need to merge two separate Typescript methods into one with the same name getDevice. The first method only requires a number input to return a Device, or null if no device is found:

protected getDevice(deviceId: number): Device | null {
  const device = this.devicesService.getDevice(deviceId);
  if (device == null)
    console.warn(`Failed to retrieve device #${deviceId}.`);
  return device;
}

The second method takes two arguments. The first argument can be either a number (similar to the previous method) or a Device (the result of the previous method):

protected getDeviceAs<T extends DeviceType>(
  deviceOrId: Device | number,
  deviceType: (new (device: Device) => T),
): T | null {
  const device = typeof deviceOrId === 'number'
    ? this.devicesService.getDevice(deviceOrId)
    : deviceOrId as Device;
  if (device == null) {
    console.warn(`Failed to retrieve the device #${deviceOrId}.`);
    return null;
  }
  return new deviceType(device);
}

The combined method would look something like this:

protected getDevice<<T extends DeviceType>(
  deviceOrId: Device | number,
  deviceType: (new (device: Device) => T) | null = null,
): Device | T | null {
  let device: Device | null = null;
  // If deviceOrId is a number
  if (typeof deviceOrId === 'number') {
    device = this.devicesService.getDevice(deviceOrId);
    if (device == null) {
      console.warn(`Failed to retrieve device #${deviceOrId}.`);
      return null;
    }
    if (deviceType == null) return device;
  }

  // Implementing getDeviceAs functionality
  return new deviceType(device);
}

The tricky part is defining the proper types for the entire function:

The return type depends on the type of the deviceOrId argument:
- If deviceOrId is a Device, then the result should definitely be T | null
- If deviceOrId is a number, the result could be Device | T | null
The return type and deviceOrId are influenced by the deviceType argument:
- If deviceType is null, then deviceOrId must be of type number and the return type is Device | null
- If deviceType is of type (new (device: Device) => T), then the return type must be T | null

Is achieving this kind of complexity possible in Typescript? If so, how can it be done? Perhaps utilizing some function overloading techniques?

typescript types

Answer 1

Answer №1

If you're looking for a simple fix to the issue at hand, consider using function overloads in TypeScript (reference). Start by defining your function signatures. In this particular scenario, it would look like this:

protected getDevice(deviceId: number): Device | null;
protected getDevice<T extends DeviceType>(
  deviceOrId: Device | number,
  deviceType: (new (device: Device) => T),
): T | null;

Subsequently, proceed with crafting the actual implementation logic for the function. Note that the implementation signature does not add another overload. Here is the complete code snippet:

// Overload 1:
protected getDevice(deviceId: number): Device | null;
// Overload 2:
protected getDevice<T extends DeviceType>(
  deviceOrId: Device | number,
  deviceType: (new (device: Device) => T),
): T | null;
// Implementation:
protected getDevice<T extends DeviceType>(
  deviceOrId: Device | number,
  deviceType: (new (device: Device) => T) | null = null,
): Device | T | null {
  let device: Device | null = null;
  if (typeof deviceOrId === 'number') {
    device = this.devicesService.getDevice(deviceOrId);
    if (device == null) {
      console.warn(`Failed to retrieve device #${deviceOrId}.`);
      return null;
    }
    if (deviceType == null) return device;
  }
  return new deviceType(device);
}

Answer 2

If you're looking for a simple fix to the issue at hand, consider using function overloads in TypeScript (reference). Start by defining your function signatures. In this particular scenario, it would look like this:

protected getDevice(deviceId: number): Device | null;
protected getDevice<T extends DeviceType>(
  deviceOrId: Device | number,
  deviceType: (new (device: Device) => T),
): T | null;

Subsequently, proceed with crafting the actual implementation logic for the function. Note that the implementation signature does not add another overload. Here is the complete code snippet:

// Overload 1:
protected getDevice(deviceId: number): Device | null;
// Overload 2:
protected getDevice<T extends DeviceType>(
  deviceOrId: Device | number,
  deviceType: (new (device: Device) => T),
): T | null;
// Implementation:
protected getDevice<T extends DeviceType>(
  deviceOrId: Device | number,
  deviceType: (new (device: Device) => T) | null = null,
): Device | T | null {
  let device: Device | null = null;
  if (typeof deviceOrId === 'number') {
    device = this.devicesService.getDevice(deviceOrId);
    if (device == null) {
      console.warn(`Failed to retrieve device #${deviceOrId}.`);
      return null;
    }
    if (deviceType == null) return device;
  }
  return new deviceType(device);
}

Type of condition based on function parameter values

Answer №1

Similar questions

Steps for managing files in Ionic Native: creating, reading, and writing them

Retrieve the desired destination URL in the CanActivate guard when lazily loading modules in Angular

Managing DOM elements within a Vue 3 template using Typescript

Getting a "function is not defined" error in Angular 6 while using it within a nested function

The feature of "compile on save" is not functioning properly in my current Angular project

What determines the narrowing of a type when it is defined as a literal versus when it is returned from a function?

Uncovering the perfect body proportions using Webpack and SystemJS

Troubleshooting problems with contenteditable and input in Firefox and Safari on Angular 5

How can we use Angular Table to automatically shift focus to the next row after we input a value in the last cell of the current row and press the Enter key

Implementing click event binding with various CSS styles in Angular

Acquiring an element through ViewChild() within Angular

What is the process for exporting a plugin from dayjs() in JavaScript?

Issue with Angular 6: Animation with LESS is failing to work post deployment

Failure in SystemJS during ahead-of-time compilation due to missing NgZone provider

Open the JSON file and showcase its contents using Angular

The error message ``TypeError [ERR_UNKNOWN_FILE_EXTENSION]:`` indicates a

Delete row from dx-pivot-grid

How can I create a bold, three-dimensional line using Three JS LineBasicMaterial?

Unlock the full potential of working with TaskEither by utilizing its powerful functionality in wrapping an Option with

Employing a boolean constant to verify if a parameter has been specified