What is the best approach to perform type checking on a function that yields varying types depending on the values of its

Question

What is the best approach to perform type checking on a function that yields varying types depending on the values of its

Currently, I am facing a challenge with a function that takes an argument and returns a different type of value depending on the argument's value.

For instance:

function foo(arg: 'a' | 'b') {
  if (arg === 'a') {
    return { prop1: 'hello', prop2: 123 };
  } else {
    return [1, 2, 3];
  }
}

I am struggling to properly type check this function. My main objective is to ensure that when the argument is 'a', the returned value contains properties like prop1 and prop2. On the other hand, if the argument is 'b', the returned value should be an array of numbers.

Although I attempted to utilize conditional types for this purpose, I have encountered some difficulties in making it work effectively. Could anyone offer assistance or guidance on how to achieve this?

typescript

Answer 1

Answer №1

If you want to achieve function overloading in TypeScript, you can do so by defining multiple signatures for the same function:

function foo(arg: 'a'): { prop1: string; prop2: number };
function foo(arg: 'b'): number[];
function foo(arg: 'a' | 'b') {
  if (arg === 'a') {
    return { prop1: 'hello', prop2: 123 };
  } else {
    return [1, 2, 3];
  }
}

Check out this example on the TypeScript Playground

Answer 2

If you want to achieve function overloading in TypeScript, you can do so by defining multiple signatures for the same function:

function foo(arg: 'a'): { prop1: string; prop2: number };
function foo(arg: 'b'): number[];
function foo(arg: 'a' | 'b') {
  if (arg === 'a') {
    return { prop1: 'hello', prop2: 123 };
  } else {
    return [1, 2, 3];
  }
}

Check out this example on the TypeScript Playground

What is the best approach to perform type checking on a function that yields varying types depending on the values of its

Answer №1

Similar questions

Tips for Successfully Transmitting Information via Mat-Dialog

The type 'MenuOptions[]' cannot be assigned to type 'empty[]'

Commit to choosing an option from a dropdown menu using TypeScript

Tips for creating a test to choose a movie from the MuiAutocomplete-root interface

What is a Mongoose Schema type in TypeScript and how can it be used as a custom

Troubleshooting Next.js Route Redirect Failure to Origin URL

Move after a specified amount of time

`Can incompatible Typescript types be allowed for assignment?`

Is it possible for Next.js to retrieve the window size without resorting to a faulty hook call or encountering an undefined window

Exploring the concept of object inheritance in Angular 5 with Typescript

Linking typescript error messages with their respective compiler configurations (tsconfig.json)

Tips for Logging HTTP Communication Errors in Angular

Issues with mat-tab-group not rendering properly after switching between parent tabs

Issues resolving the signature of a parameter in a Typescript decorator within vscode

Unable to successfully import { next } from the 'express' module using Typescript

Creating trendy designs with styled components: A guide to styling functional components as children within styled parent components

Steps to configure Visual Studio Code to automatically open the original TypeScript file located in the "src" folder when a breakpoint is hit in a Node.js application

Vue encountered a double loading issue when utilizing a library compiled with Webpack

Navigating through unorganized items in Angular 9

How can one define a getter within an interface?