Different kinds of functions can take an optional property name as an argument and either return the value of that property in an object or the entire object itself

Question

Different kinds of functions can take an optional property name as an argument and either return the value of that property in an object or the entire object itself

In need of a function that accepts an optional parameter propName, which must be a key belonging to SOME_OBJECT. The function should return the value of propName if it is provided, or else return the entire OBJECT:

Here's the code snippet:

type SOME_OBJECT = {
  propA: string,
  propB: number,
}

const getPropertyOrFullObject = <K extends keyof SOME_OBJECT>(propName?: K)
: SOME_OBJECT[K] | SOME_OBJECT => {

  const myData: SOME_OBJECT = {  
    propA: "fooA",
    propB: 42
  };

  if (propName) {
    return myData[propName];
  }
  else {
    return myData;
  }
};

const propA = getPropertyOrFullObject("propA"); 
const propB = getPropertyOrFullObject("propB"); 
const fullObj = getPropertyOrFullObject();

Code can be viewed on Typescript playground

Received unexpected results instead of what was expected. Union types were returned. Check below for details:

https://i.sstatic.net/OUkvm.png

https://i.sstatic.net/FR3lE.png

https://i.sstatic.net/nohyK.png

javascript typescript properties type-inference typescript-generics

Answer 1

Answer №1

TS struggles to determine the exact return type of a function, which leads it to merge all possible returns.

To simplify this, it is recommended to use function overloading as a good practice.

Consider the following example:

type SOME_OBJECT = {
  propA: string,
  propB: number,
}

// introducing a new player
interface Overloading {
  <K extends keyof SOME_OBJECT>(propName: K): SOME_OBJECT[K]
  (): SOME_OBJECT;
}

const getPropertyOrFullObject: Overloading  = <K extends keyof SOME_OBJECT>(propName?: K)
: SOME_OBJECT[K] | SOME_OBJECT => {

  const myData: SOME_OBJECT = {  // ACTUAL DATA WILL BE RETRIEVED FROM ANOTHER SOURCE
    propA: "fooA",
    propB: 42
  };

  if (propName) {
    const result = myData[propName];
    return myData[propName];
  }
  else {
    return myData;
  }
};

const propA = getPropertyOrFullObject("propA");  // returns a string
const propB = getPropertyOrFullObject("propB");  // returns a number
const fullObj = getPropertyOrFullObject();       // returns an object of type SOME_OBJECT

Answer 2

TS struggles to determine the exact return type of a function, which leads it to merge all possible returns.

To simplify this, it is recommended to use function overloading as a good practice.

Consider the following example:

type SOME_OBJECT = {
  propA: string,
  propB: number,
}

// introducing a new player
interface Overloading {
  <K extends keyof SOME_OBJECT>(propName: K): SOME_OBJECT[K]
  (): SOME_OBJECT;
}

const getPropertyOrFullObject: Overloading  = <K extends keyof SOME_OBJECT>(propName?: K)
: SOME_OBJECT[K] | SOME_OBJECT => {

  const myData: SOME_OBJECT = {  // ACTUAL DATA WILL BE RETRIEVED FROM ANOTHER SOURCE
    propA: "fooA",
    propB: 42
  };

  if (propName) {
    const result = myData[propName];
    return myData[propName];
  }
  else {
    return myData;
  }
};

const propA = getPropertyOrFullObject("propA");  // returns a string
const propB = getPropertyOrFullObject("propB");  // returns a number
const fullObj = getPropertyOrFullObject();       // returns an object of type SOME_OBJECT

Answer 3

Answer №2

After reading @captain-yossarian's response, I decided to implement the following:

type SOME_OBJECT = {
  propA: string,
  propB: number,
}

function getPropertyOrFullObject(): SOME_OBJECT;
function getPropertyOrFullObject<K extends keyof SOME_OBJECT>(propName: K): SOME_OBJECT[K];
function getPropertyOrFullObject<K extends keyof SOME_OBJECT>(propName?: K): SOME_OBJECT | SOME_OBJECT[K] {

  const SOME_OBJECT: SOME_OBJECT = {  // THIS WILL BE FETCHED FROM AN EXTERNAL SOURCE
    propA: "fooA",
    propB: 42
  };

  return propName ? 
    SOME_OBJECT[propName] 
  : SOME_OBJECT;

}

const propA = getPropertyOrFullObject("propA");   // RETURNS AS A string
const propB = getPropertyOrFullObject("propB");   // RETURNS AS A number
const fullObj = getPropertyOrFullObject();        // RETURNS AS THE WHOLE OBJECT

I find that this approach improves the readability and comprehension of the overload method.

Playground link

Answer 4

After reading @captain-yossarian's response, I decided to implement the following:

type SOME_OBJECT = {
  propA: string,
  propB: number,
}

function getPropertyOrFullObject(): SOME_OBJECT;
function getPropertyOrFullObject<K extends keyof SOME_OBJECT>(propName: K): SOME_OBJECT[K];
function getPropertyOrFullObject<K extends keyof SOME_OBJECT>(propName?: K): SOME_OBJECT | SOME_OBJECT[K] {

  const SOME_OBJECT: SOME_OBJECT = {  // THIS WILL BE FETCHED FROM AN EXTERNAL SOURCE
    propA: "fooA",
    propB: 42
  };

  return propName ? 
    SOME_OBJECT[propName] 
  : SOME_OBJECT;

}

const propA = getPropertyOrFullObject("propA");   // RETURNS AS A string
const propB = getPropertyOrFullObject("propB");   // RETURNS AS A number
const fullObj = getPropertyOrFullObject();        // RETURNS AS THE WHOLE OBJECT

I find that this approach improves the readability and comprehension of the overload method.

Playground link

Different kinds of functions can take an optional property name as an argument and either return the value of that property in an object or the entire object itself

Answer №1

Answer №2

Similar questions

Refreshing issue: Model change in child page not updating view correctly (Ionic & Angular)

Is there a way for me to implement a feature akin to the @deprecated annotation?

Shared validation between two input fields in Angular 2+

Choosing the open status of an HTML list

The bootpag event seems to trigger multiple times upon execution following an Ajax function call

I prefer not to run the next.js SWR until after the initial rendering

Most effective method to verify if mutation observer meets specific criteria

What is the syntax for implementing a for loop/for each loop in EJS?

Executing a series of actions in React redux synchronously

Exploring the optimal approach for distinguishing between numbers and strings in a JavaScript/Typescript class

How can Sequelize be used to effectively set up User Data with specific constraints?

Eliminate Redundancy with Knockout.js Copy Prevention

npm ERROR! 404 Content removed by unidentified source on August 8, 2022 at 09:20:35.527 UTC

Having Trouble Styling Radio Buttons with CSS

Ways to access dropdown menu without causing header to move using jQuery

Preventing Double Click Events on jQuery Spinner

Runtime error caused by incorrect Typescript version detected in Visual Studio Code

Struggling to implement a Datepicker in the date column of a table created using HTML and JavaScript

The lodash debounce function is being triggered multiple times instead of just once, causing issues with my react hooks in a react native environment

Issue with jQuery functionality when page is loaded through AJAX request