Determine the output type of a function using its optional parameters

    // Quirky function that serves no real purpose
    function myFunction(x: number, y?: number[], z?: number): string | boolean {
        if (y === undefined) 
            return false;

        y.push(x);
        if (z) y.push(z);
        return y.toString();
    }
    const boolTypeResult = myFunction(5);                // type: boolean | string
    const boolTypeValue = myFunction(5, undefined, 8);  // type: boolean | string
    const stringValue = myFunction(9, [], 0);           // type: boolean | string

Can we modify myFunction() to determine the return type based on the second optional parameter value, while keeping the order of the parameters?

typescript

Answer №1

Utilize overloads to easily adjust the return type based on the parameter type:

function f(a: number, b?: undefined, c?: number): false;
function f(a: number, b: number[], c?: number): string;

function f(a: number, b?: number[], c?: number): string | false {
    if (b === undefined) 
        return false;

    b.push(a);
    if (c) b.push(c);
    return b.toString();
}

const boolTypeValue: boolean = f(5);
const boolTypeValue2: boolean = f(5, undefined, 8);
const stringTypeValue: string = f(9, [], 0);

If you also need to pass a number[] | undefined value, add a third overload for that:

function f(a: number, b?: number[], c?: number): string | false;

declare const possiblyUndefinedArray: number[] | undefined;
const boolOrStringTypeValue: string | false = f(9, possiblyUndefinedArray, 0);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript: Variable of unspecified type

Within my generator function called foo(), I am making a request to an external API using the fetch method. Once I receive the response data from the API, I then parse it as JSON. Encountering an issue, as Typescript is triggering an error message: An Obj ...

reactjstypescriptfetchgeneratorredux-saga

Error in Typescript occurring with a custom typography element

I recently developed a simple typography component for my React project and it's causing a Typescript error that's puzzling me a bit. Typography Component Code import clsx from 'clsx'; const sizeVariants = { h1: 'h1', ...

reactjstypescriptreact-typescript

Guide to activating a button with reactive forms in angular 2

I am facing an issue where I have an input field and a button. The button should be enabled when the field is not empty. However, even though I am already passing an input value, the button is not being enabled as expected. It only gets enabled when I actu ...

angulartypescriptprimeng

Using Cypress fixtures with TypeScript

After transitioning from using Cypress with Javascript specs to Typescript, I encountered a challenge in working with Fixtures. In Javascript, the approach below worked; however, I faced difficulties when switching to Typescript. Fixture JSON file: I sto ...

javascriptjquerytypescripttestingcypress

Tips on getting the dropdown value to show up on the header when it changes using Angular 2 and TypeScript

I need assistance with creating a dropdown field in Angular2. When the user selects "car", I want it to display beside the heading. Can anyone provide guidance on how to achieve this? HTML: <h1>Heading <span *ngFor= "let apps of apps">({{apps ...

javascriptangulartypescript

Error TS2345: The argument provided, which is of type 'Promise<ReadonlyArray<Object>>', cannot be assigned to a parameter that must be of type 'T | PromiseLike<T> | undefined'

My goal is to return the ReadonlyArray<> in my promise so that I can send it back to the original method that called 'dispatchToThisProcess'. This abstraction allows for potential future updates to multiple processes. Below is the code snip ...

typescript

NestJS Bull queues - Failing to secure job completion with a lock

I am currently utilizing Bull in combination with NestJS to manage a jobs queue. Within the process handler, I aim to designate a job as failed instead of completed. However, it appears - after carefully reviewing the documentation as well - that the Job#m ...

typescriptredisqueuenestjsbull

How can Lazy<T> be integrated into TypeScript?

While working in .NET, I came across the Lazy<T> type which proved to be very helpful for tasks like lazy loading and caching. However, when it comes to TypeScript, I couldn't find an equivalent solution so I decided to create my own. export in ...

typescript

Navigating through a large array list that contains both arrays and objects in Typescript:

I have an array containing arrays of objects, each with at least 10 properties. My goal is to extract and store only the ids of these objects in the same order. Here is the code I have written for this task: Here is the structure of my data: organisationC ...

javascriptnode.jstypescript

Ways to Resolve the "TS2533: Object May Be Either 'Null' or 'Undefined'" Error on a Dynamic Object

I'm encountering an issue with the following code snippet: interface Schema$CommonEventObject { formInputs?: { [key: string]: Schema$Inputs; } | null; } interface Schema$Inputs { stringInputs?: Schema$StringInp ...

typescripttypesinterface

Combining HTML with multiple .ts files in Angular

I've been dedicating time to enhancing an Angular application, particularly a sophisticated table with intricate styling and functionality. Within my component file, there is a whopping 2k lines of code that includes functions for text formatting, ta ...

htmlangulartypescriptfiledivide

A method for determining a running total from an array object in JavaScript/Typescript and presenting the result at each step using HTML

Currently, I am working on a MEAN stack project and dealing with an array setup like this: savings: any = [300, 450, 350, 500] Additionally, there is a variable named savings_bf that holds the value of savings brought forward retrieved from a database as ...

javascripthtmlarraystypescript

Tips for successfully sending properties from a parent component to a child component in a TypeScript and React application

I am trying to achieve prop passing from a parent component to a child component in React using TypeScript. However, I am unsure how to properly define these props in the type. Below is the code snippet: function Parent() { ...

reactjstypescript

Inter-component communication in Angular

I am working with two components: CategoryComponent and CategoryProductComponent, as well as a service called CartegoryService. The CategoryComponent displays a table of categories fetched from the CategoryService. Each row in the table has a button that r ...

angulartypescriptrxjs

Make sure the auto import feature in TypeScript Visual Studio Code Editor is set to always use the ".js" extension

At times, the auto-import completion feature includes the .js extension, but inconsistently. When this extension is missing in the TypeScript source, the emitted JavaScript file may encounter runtime issues like module not found error since the tsc compile ...

javascriptnode.jstypescriptvisual-studio-code

Exploring Typescript: Obtaining the type of a nested optional property within an interface

I am facing an issue with the following code snippet: Property 'id' does not exist on type '{ id: string } | undefined.' as group is optional. Despite that, I need to access the type of id. How can I achieve this? interface list{ grou ...

javascriptreactjstypescript

Insert items into an array at a specific index in typescript

Using the map function, I am adding elements to array arr1. Is there a way to specify the starting index position in typescript? For example: If I want to add elements from the 3rd index position of the array, with the first two indices holding a value of ...

angulartypescript

Utilizing the map function in React to achieve similar functionality as *ngFor in Angular

When working in React, we often utilize the map function inside JSX to iterate through items. I'm curious if it's possible to create a custom Repeat component similar to Angular's *ngFor. <Repeat for={[1, 2, 3]}> ... <Repea ...

javascriptreactjstypescript

Ways to define the name and components within the <script setup> scope

Is it possible to define the name and components in a <script setup> mode? In a <script> mode, you can do something like this: export default { name: 'App', props: ['foo', 'greetingMessage'], components: { ...

javascripttypescriptvue.js

Updating user credentials following a successful setupIntent in Stripe API (with Node.js and React) - A Step-by-Step Guide

In a specific scenario, users are able to set their payment credentials in the Profile settings page using PaymentElement, which typically includes simple card details such as number, expiration year, and CVV. Initially, I associate the customer (user) wit ...

reactjsnode.jstypescriptstripe-payments