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

Is there a way to enable autofill functionality if an email already exists in the database or API within Angular 12?

What is the best way to import a data type from another file into a `.d.ts` file without converting it into a module?

What are the steps for personalizing themes in the Monaco editor?

"Elaborate" Typescript Conditional Generic Types

Show Timing on the Y-Axis - Bubble Graph

Encountering a TypeScript error in MUI 5 when attempting to spread values in props

Finding the current URL in React Router can be achieved by using specific methods and properties provided by

Trouble with importing React JSX from a separate file when working with Typescript

Using TypeScript to call a class method from within another function

TS7053: The element is implicitly assigned an 'any' type as the expression of type 'string' cannot be used to index the type '{ username: string; email: string; '

Accessing collection values from referenced document IDs in Firestore---I have provided a unique version of the text

What could be causing the type errors I am encountering while trying to resolve this Promise within a generic function?

Type of event triggered by user file upload via INPUT element

Tips for establishing communication between a server-side and client-side component in Next.js

Obtaining a customized variation of a class identified by a decorator

The React namespace is missing the exported member 'InputHTMLAttributes', and the MenuItemProps interface is incorrectly extending the ListItemProps interface

Error in Deno pooling map server due to unhandled AggregateError

I am experiencing an issue where the mat-header-cell components are not appearing after navigating

Tips on how to effectively simulate a custom asynchronous React hook that incorporates the useRef() function in jest and react-testing-library for retrieving result.current in a Typescript

Exploring the functionalities of R.pick in TypeScript