Leveraging TypeScript's enum with function overloading

Question

Leveraging TypeScript's enum with function overloading

I am encountering an issue while trying to implement function overloading in TypeScript with an enum as a parameter and a second argument that depends on the enum's type.

Here is the breakdown:

If the enum is FOO, the second argument should be of type string
If the enum is BAR, the second argument should be of type number
If the enum is BAZ, there is no second argument required

Although I have the following code, TypeScript throws an error as even after checking the first argument against the enum, the type of the second argument is not narrowed down: fieldValue is always string | number.

enum ViewName {
    FOO = 'foo',
    BAR = 'bar',
    BAZ = 'baz'
}

function myFunction(viewName: ViewName.FOO, stringValue: string);
function myFunction(viewName: ViewName.BAR, numberValue: number);
function myFunction(viewName: ViewName.BAZ);
function myFunction(viewName: ViewName, fieldValue?: string | number): void {

    if (viewName === ViewName.FOO) {
        fieldValue = fieldValue.reverse();
    }

    if (viewName === ViewName.BAR) {
        fieldValue *= 2;
    }

    if (viewName === ViewName.BAZ) {
        return console.log('No fieldvalue is supplied by BAZ.');
    }

    console.log(fieldValue);
}

You can also view the code on TypeScript Playground.

typescript enums overloading

Answer 1

Answer №1

One thing to note is that Typescript does not automatically narrow the type of the second parameter based on the type of the first parameter. This functionality has not been implemented in Typescript.

To address this, you have a couple of options. You can add additional checks within the if statements to help the compiler narrow the type of fieldValue:

function myFunction(viewName: ViewName.FOO, stringValue: string);
function myFunction(viewName: ViewName.BAR, numberValue: number);
function myFunction(viewName: ViewName.BAZ);
function myFunction(viewName: ViewName, fieldValue?: string | number): void {

    if (viewName === ViewName.FOO && typeof fieldValue === "string") {
        fieldValue = fieldValue.reverse();
    }
    else if (viewName === ViewName.BAR && typeof fieldValue === 'number') {
        fieldValue *= 2;
    }

    console.log(fieldValue);
}

Alternatively, you could utilize a type assertion to achieve the desired type narrowing:

function myFunction(viewName: ViewName.FOO, stringValue: string);
function myFunction(viewName: ViewName.BAR, numberValue: number);
function myFunction(viewName: ViewName.BAZ);
function myFunction(viewName: ViewName, fieldValue?: string | number): void {

    if (viewName === ViewName.FOO) {
        fieldValue = (fieldValue as string).reverse();
    }
    else if (viewName === ViewName.BAR) {
        fieldValue =  (fieldValue as number) * 2;
    }

    console.log(fieldValue);
}

For a more substantial change, consider using a discriminated union. This approach enables the compiler to more effectively narrow the type of the parameter:

function myFunction(p: { viewName: ViewName.BAZ }
    | { viewName: ViewName.BAR, fieldValue: number }
    | { viewName: ViewName.FOO, fieldValue: string }): void {

    if (p.viewName === ViewName.FOO) {
        p.fieldValue = p.fieldValue.reverse();
    }
    else if (p.viewName === ViewName.BAR) {
        p.fieldValue *=  2;
    }

    console.log(fieldValue);
}

Answer 2

One thing to note is that Typescript does not automatically narrow the type of the second parameter based on the type of the first parameter. This functionality has not been implemented in Typescript.

To address this, you have a couple of options. You can add additional checks within the if statements to help the compiler narrow the type of fieldValue:

function myFunction(viewName: ViewName.FOO, stringValue: string);
function myFunction(viewName: ViewName.BAR, numberValue: number);
function myFunction(viewName: ViewName.BAZ);
function myFunction(viewName: ViewName, fieldValue?: string | number): void {

    if (viewName === ViewName.FOO && typeof fieldValue === "string") {
        fieldValue = fieldValue.reverse();
    }
    else if (viewName === ViewName.BAR && typeof fieldValue === 'number') {
        fieldValue *= 2;
    }

    console.log(fieldValue);
}

Alternatively, you could utilize a type assertion to achieve the desired type narrowing:

function myFunction(viewName: ViewName.FOO, stringValue: string);
function myFunction(viewName: ViewName.BAR, numberValue: number);
function myFunction(viewName: ViewName.BAZ);
function myFunction(viewName: ViewName, fieldValue?: string | number): void {

    if (viewName === ViewName.FOO) {
        fieldValue = (fieldValue as string).reverse();
    }
    else if (viewName === ViewName.BAR) {
        fieldValue =  (fieldValue as number) * 2;
    }

    console.log(fieldValue);
}

For a more substantial change, consider using a discriminated union. This approach enables the compiler to more effectively narrow the type of the parameter:

function myFunction(p: { viewName: ViewName.BAZ }
    | { viewName: ViewName.BAR, fieldValue: number }
    | { viewName: ViewName.FOO, fieldValue: string }): void {

    if (p.viewName === ViewName.FOO) {
        p.fieldValue = p.fieldValue.reverse();
    }
    else if (p.viewName === ViewName.BAR) {
        p.fieldValue *=  2;
    }

    console.log(fieldValue);
}

Leveraging TypeScript's enum with function overloading

Answer №1

Similar questions

Troubleshooting TestBed: Resolving the StatusBar Provider Error

What is the best way to bring in a service as a singleton class using System.js?

Setting the dispatch type in Redux using Typescript

Angular location services

Decorators are not allowed in this context, the Angular component constructor may not include them

Invoke the dispatch function from React-Redux in a stateless component with the help of a wrapper

The Ionic framework has a defined variable

Using Angular2 - How to pass the router parameter as a variable in ngForm

Unleashing the power of storytelling with React: A guide to creating dynamic story

Exploring Nuxt's Getters with vuex-class for seamless data retrieval

What is the trick to accessing an object's key and value when you are unsure of the object's

Integrating d3.js into an Angular 2 project

The timer functionality in the Angular 2+ component is malfunctioning

Return either a wrapped or base type based on the condition

Guide to Re-rendering a component inside the +layout.svelte

No data found in the subrow of the datasource after the filter has been

Combining Rollup, Typescript, and converting images to base64 during the loading process

Typescript error: Object may be 'undefined' when using object literals

Proceed the flow of event propagation using the react-aria button element

Tips for enhancing the TypeScript definition of Material UI 3 theme by integrating the Material UI pickers theme