Can optional parameters be used to restrict TypeScript overloads in any way?

Question

Can optional parameters be used to restrict TypeScript overloads in any way?

My objective is as follows:

interface ColorRgb {
  red: number;
  green: number;
  blue: number;
}

function rgbToHex(red: ColorRgb, green?: undefined, blue?: undefined): string
function rgbToHex(red: number, green: number, blue: number): string
function rgbToHex(red: number|ColorRgb, green?: number, blue?: number): string {
  if (red instanceof Object) {
    // must be ColorRgb
    green = red.green;
    blue = red.blue;
    red = red.red;
  }

  let redHex = red.toString(16);
  let greenHex = green.toString(16); // ERROR: Object is possibly 'undefined'.
  let blueHex = blue.toString(16); // ERROR: Object is possibly 'undefined'.

  if (redHex.length == 1) redHex = "0" + redHex;
  if (greenHex.length == 1) greenHex = "0" + greenHex;
  if (blueHex.length == 1) blueHex = "0" + blueHex;

  return "#" + redHex + greenHex + blueHex;
}

The errors are occurring on the lines mentioned by ERROR comments.

From a JavaScript standpoint, the function appears to be correct:

function rgbToHex(red , green, blue) {
  if (red instanceof Object) {
    green = red.green; 
    blue = red.blue; 
    red = red.red;
  }

  let redHex = red.toString(16);
  let greenHex = green.toString(16);
  let blueHex = blue.toString(16);

  if (redHex.length == 1) redHex = "0" + redHex;
  if (greenHex.length == 1) greenHex = "0" + greenHex;
  if (blueHex.length == 1) blueHex = "0" + blueHex;

  return "#" + redHex + greenHex + blueHex;
}

rgbToHex({ red: 120, green: 50, blue: 5 }) // "#783205"
rgbToHex(120, 50, 5) // "#783205"

I am seeking advice on how to configure the function signatures so that it works seamlessly without any casting or unnecessary variable setups within the function body. I want to avoid something like

let gVal: number = g || (r as any).g;

.

Another option could involve splitting this into two functions and having one call the other, but applying such a solution with TypeScript seems inappropriate when compared to JavaScript.

TS Playground Link

Apologies if this has been asked before. I've searched extensively but couldn't find a solution addressing this specific issue.

typescript overloading narrowing

Answer 1

Answer №1

After doing some additional research, exploring other Stack Overflow questions, and browsing through the typescript GitHub issues, it appears that this feature is not yet implemented in TypeScript.

The narrowing of overloads that works outside of a function does not currently apply within a function:

// Function definition for swapping between number and string types
function foo(bar: string): number // overload 1
function foo(bar: number): string // overload 2
function foo(bar: number | string): number|string 
{ ... }

const a = foo('string');
a.toPrecision(); // TypeScript recognizes 'a' as a number, so no errors

const b = foo(5);
b.toLowerCase(); // TypeScript recognizes 'b' as a string, so no errors

const c = Math.random() < .5 ? a : b; // TypeScript identifies 'c' as string | number

// The actual implementation of an overloaded method does not count as 
// one of the possible overloads, so calling foo with a variable of type (string|number)
// is not valid
const d = foo(c); // error on parameter 'c': No overload matches this call.

As expected. However, when attempting to implement foo, we can see that the exclusionary logic is not applied within the method:

function foo(bar: string): number // overload 1
function foo(bar: number): string // overload 2
function foo(bar: number | string): number | string {
  return bar; // This is considered valid, but it shouldn't be
}

It seems that the TypeScript team has yet to implement code analysis within a function aware of the overloads of that function; only the signature of the implementation is enforced. This is clearly incorrect.

Therefore, there is an error in the tooling. We must wait for a fix.

Answer 2

After doing some additional research, exploring other Stack Overflow questions, and browsing through the typescript GitHub issues, it appears that this feature is not yet implemented in TypeScript.

The narrowing of overloads that works outside of a function does not currently apply within a function:

// Function definition for swapping between number and string types
function foo(bar: string): number // overload 1
function foo(bar: number): string // overload 2
function foo(bar: number | string): number|string 
{ ... }

const a = foo('string');
a.toPrecision(); // TypeScript recognizes 'a' as a number, so no errors

const b = foo(5);
b.toLowerCase(); // TypeScript recognizes 'b' as a string, so no errors

const c = Math.random() < .5 ? a : b; // TypeScript identifies 'c' as string | number

// The actual implementation of an overloaded method does not count as 
// one of the possible overloads, so calling foo with a variable of type (string|number)
// is not valid
const d = foo(c); // error on parameter 'c': No overload matches this call.

As expected. However, when attempting to implement foo, we can see that the exclusionary logic is not applied within the method:

function foo(bar: string): number // overload 1
function foo(bar: number): string // overload 2
function foo(bar: number | string): number | string {
  return bar; // This is considered valid, but it shouldn't be
}

It seems that the TypeScript team has yet to implement code analysis within a function aware of the overloads of that function; only the signature of the implementation is enforced. This is clearly incorrect.

Therefore, there is an error in the tooling. We must wait for a fix.

Answer 3

Answer №2

One issue arises when dealing with the variables g and b, as they will always be of type number | undefined and cannot be permanently reassigned without declaring a new variable.

You are presented with 4 potential solutions:

Utilize the Non-Null Assertion Operator !. For example, instead of g.toString(16), use g!.toString(16) to force it into type number. Typecasting is also an option here.
Split the function into multiple functions, extract the rgb variables, and then return the original rgbToHex function.
Consider using a union type, as suggested by @Oblosys in their answer.
Create a new object at the beginning of the function where you populate a new RgbColor object.

Answer 4

One issue arises when dealing with the variables g and b, as they will always be of type number | undefined and cannot be permanently reassigned without declaring a new variable.

You are presented with 4 potential solutions:

Utilize the Non-Null Assertion Operator !. For example, instead of g.toString(16), use g!.toString(16) to force it into type number. Typecasting is also an option here.
Split the function into multiple functions, extract the rgb variables, and then return the original rgbToHex function.
Consider using a union type, as suggested by @Oblosys in their answer.
Create a new object at the beginning of the function where you populate a new RgbColor object.

Answer 5

Answer №3

Let's attempt to implement the following.

function f(a: T, b: S);
function f(a: U, b: S, c: V);

function f(a: T | U, b: S, c?: V) { ... }

After encountering numerous unhelpful errors and conducting extensive testing, I successfully crafted a program that generates a custom log message with specified parameters.

type LogActionWithoutBuff = 'connect' | 'disconnect';
type LogActionWithBuff = 'receive' | 'send';
type LogAction = LogActionWithBuff | LogActionWithoutBuff;

function formatLog(action: LogActionWithoutBuff, host: string): string;
function formatLog(action: LogActionWithBuff, host: string, buff: Buffer): string;

function formatLog(action: LogAction, host: string, buff?: Buffer): string { ... }

I made several attempts to achieve the same outcome (without referencing buff at all), but only managed to succeed just now. The reason for this inconsistency remains elusive - it could be an issue with the compiler.

Answer 6

Let's attempt to implement the following.

function f(a: T, b: S);
function f(a: U, b: S, c: V);

function f(a: T | U, b: S, c?: V) { ... }

After encountering numerous unhelpful errors and conducting extensive testing, I successfully crafted a program that generates a custom log message with specified parameters.

type LogActionWithoutBuff = 'connect' | 'disconnect';
type LogActionWithBuff = 'receive' | 'send';
type LogAction = LogActionWithBuff | LogActionWithoutBuff;

function formatLog(action: LogActionWithoutBuff, host: string): string;
function formatLog(action: LogActionWithBuff, host: string, buff: Buffer): string;

function formatLog(action: LogAction, host: string, buff?: Buffer): string { ... }

I made several attempts to achieve the same outcome (without referencing buff at all), but only managed to succeed just now. The reason for this inconsistency remains elusive - it could be an issue with the compiler.

Can optional parameters be used to restrict TypeScript overloads in any way?

Answer №1

Answer №2

Answer №3

Similar questions

Issue with ngModelChange and change events not functioning properly in Internet Explorer 11

Put the Toastr notifications inside a designated container within a particular component

What allows the type expression to be considered valid with a reduced amount of arguments?

Tips for configuring Angular 2 to send all requests in the form of application/x-www-form-urlencoded

Ways to implement es6 in TypeScript alongside react, webpack, and babel

Utilize mapping for discriminated union type narrowing instead of switch statements

Error message in React NodeJs stack: "The property ' ' does not exist on type 'never' in Typescript."

Can discriminated unions solely be utilized with literal types?

An interface that is extended by an optional generic parameter

What distinguishes between a public variable declared as var: any = []; versus a public variable declared as var: any[] =

Ways to verify function arguments within an asynchronous function using Jest

Using asynchronous functions in a loop in Node.js

Is there a disparity in capabilities or drawbacks between ViewChild and Input/Output in Angular?

Implementing tailwindcss styles in a typescript interface with reactjs

Implementing a conditional chaining function in TypeScript

The Angular template loads and renders even before the dynamic data is fetched

Why is it that TypeScript does not issue any complaints concerning specific variables which are undefined?

Using `publishReplay()` and `refCount()` in Angular does not behave as anticipated when dealing with subscriptions across multiple components

The error message "The type 'DynamicModule' from Nest.js cannot be assigned to the type 'ForwardReference' within the nest-modules/mailer" was encountered during development

Using CamanJs in conjunction with Angular 6