Conditional Return Types in a Typescript Function

There is a function that can return two different types, as shown below:

function doSomething(obj: {a: string, b?: string}): string | number {
  if (obj.b) {
    return 'something'
  }
  return 1
}

When the function is called with an object containing the optional property b, it always returns a string.

If the function is called with an object that does not have the optional property b, it always returns a number.

Currently, when calling the function, the return type is always a union of string and number:

const result = doSomething({a: 'a', b: 'b'})
//      ^ string | number

Is there a way to make the function return the correct type based on the input argument?

const result1 = doSomething({a: 'a', b: 'b'})
//      ^ string

const result2 = doSomething({a: 'a'})
//      ^ number

I've attempted to use conditional types without success:

type ConditionalType<T> = T extends { b: string} ? string : number
type Argument = {
  a: string,
  b?: string,
}

function doSomething<T extends Argument>(obj: T): ConditionalType<T> {
  if (obj.b) {
    return 'something' 
  }
  return 1 
}

const result = doSomething({a: 'a', b: 'b'})

Even after letting TypeScript infer the type, the result remains a union type:

function doSomething(obj: {a:string,b?:string}) {
  if (obj.b) {
    return 'something'
  }
  return 1
}

const result = doSomething({a: 'a', b: 'b'})
//      ^ "something" | 1

TypeScript Playground

Answer №1

This code snippet demonstrates pure function overloading:

function doSomething(obj: {a:string,b?:string}): string;
function doSomething(obj: {a:string,b?:undefined}): number;
function doSomething(obj: {a:string,b?:string}): string|number {
  if (obj.b) {
    return 'something'
  }
  return 1
}

const result1 = doSomething({a: 'a', b: 'b'})
//      ^ "something" | 1
console.log(result1);

const result2 = doSomething({a: 'a'})
//      ^ "something" | 1
console.log(result2);

TS Playground

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

What method is most effective for combining two JSON files in Angular?

My data includes a json file with a product list that looks like this: [{"id":76, "name":"A", "description":"abc", "price":199, "imageUrl":"image.jpg", "productCategory":[{ "categoryId":5, "category":null },{ "categoryId":6, " ...

Using references to pass variables in TypeScript [Angular 8]

I have several variables within the html of this component that are assigned their values by the typescript file. The declaration in the html is as follows: <h1>{{myproperty1}}<\h1> <h1>{{myproperty2}}<\h1> <h1>{{myp ...

Error TS2304: Unable to locate the word 'InputEvent'

While exploring the topic of whether TypeScript has type definitions for InputEvent, I experimented with using @types/dom-inputevent in my Angular 7 project. However, I kept encountering the error TS2304: Cannot find name 'InputEvent' whenever I ...

What is the best way to arrange items by utilizing the Array index in JavaScript?

Currently, I am attempting to make the elements within this angular component cascade upon loading. The goal is to have them appear in a specific layout as shown in the accompanying image. I'm seeking guidance on how to write a function in the TypeSc ...

Switching the Checkbox Data Binding Feature in Angular

I am looking to send a value based on a toggle switch checkbox selection between Hourly or Salary. How can I incorporate this into the form below? html <div class="row"> <div class="col-sm-6"> <div cl ...

What could be causing the Ioncol not triggering the Onclick event?

I am facing an issue where my onclick event is not working on an ion-col. The error message says that the method I call "is not defined at html element.onclick". Here is a snippet of my code: <ion-row style="width:100%; height:6%; border: 1px solid # ...

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

I am currently working on a challenging touching gesture and have encountered the following issue: let cachedStartTouches: TouchList; let cachedMoveTouches: TouchList; function onStart(ev: TouchEvent) { // length equals 2 when two fingers pinch start ...

Angular2 Eclipse: Eclipse Oxygen's HTML editor detects TypeScript errors in real-time

After installing the Eclipse Oxygen plugin for Angular2, I created a project using the Angular CLI and opened it in Eclipse. However, when trying to convert the project to an Angular project, I couldn't find the option under configuration. Instead, th ...

What steps should I take to transition from using require statements to imports with typescript in my mocha tests?

I have the following values in my package.json file: "scripts": { "test": "mocha -r ts-node/register security.test.ts" }, "type": "module", . . ...

Inputting Dates Manually in the Angular Material Datepicker Field

The datepicker function works well unless I manually type in the date. When I input a date between 01.MM.YYYY and 12.MM.YYYY, the value switches to MM.DD.YYYY. However, if I input 16.09.2021 for example, it remains as DD.MM.YYYY. Is there a way to change ...

Error: Unable to perform operation on undefined object when trying to map over 'reminder' object

I've been struggling with my reminder-list.tsx file. No matter how many times I try to fix it, I always end up failing. Can someone help me figure out how to resolve this issue? Every time I run the code, I get the TypeError: undefined is not an obje ...

Error message "Cannot find children property on type IntrinsicAttributes & RefAttributes<unknown>" occurring in a React component due to a Typescript issue

Issue: The specified type '{ children: string; severity: string; sx: { width: string; }; }' is not compatible with the type 'IntrinsicAttributes & RefAttributes'. The property 'children' is missing in the type 'Intri ...

Omit functions from category

This question reminds me of another question I came across, but it's not quite the same and I'm still struggling to figure it out. Basically, I need to duplicate a data structure but remove all the methods from it. interface XYZ { x: number; ...

The use of 'import ... =' is restricted to TypeScript files

Error: Oops! Looks like there's a hiccup in the code... 'import ... =' is exclusive to TypeScript files. Expecting '=' here. Don't forget the ';'. Unexpected keyword or identifier popping up! package.json ...

Unable to set up enzyme adapter

Currently, I am in the process of setting up the enzyme adapter for testing purposes. The code snippet that I have is quite straightforward: import * as enzyme from 'enzyme'; import * as Adapter from 'enzyme-adapter-react-16'; enzyme. ...

Eradicate lines that are empty

I have a list of user roles that I need to display in a dropdown menu: export enum UserRoleType { masterAdmin = 'ROLE_MASTER_ADMIN' merchantAdmin = 'ROLE_MERCHANT_ADMIN' resellerAdmin = 'ROLE_RESELLER_ADMIN' } export c ...

Angular's GET request response is returning an "Undefined" value instead of the

As an Angular beginner, I've successfully set up and tested a service that retrieves data from a JSON file using the Get method. However, when attempting to access the data inside the JSON file, it returns as undefined. My goal is to use this data as ...

Oops! The program encountered an issue where it couldn't access the "Point" property because it was undefined. This occurred while working with openlayers 3 and jsts on

I am currently working on implementing a buffer function for some features that have been drawn on a map following this particular example. However, I am encountering the following error: ERROR TypeError: Cannot read property 'Point' of undefin ...

Enforce directory organization and file naming conventions within a git repository by leveraging eslint

How can I enforce a specific naming structure for folders and subfolders? I not only want to control the styling of the names (kebab, camel), but also the actual names of the folders and files themselves. For example, consider the following paths: ./src/ ...

transferring libraries via functions in TypeScript

As I work on developing my app, I have decided to implement the dependency-injection pattern. In passing mongoose and config libraries as parameters, I encountered an issue with the config library. Specifically, when hovering over config.get('dbUri&ap ...