A guide to writing a script to access and return a specific element stored in an array within an object's property

Question

A guide to writing a script to access and return a specific element stored in an array within an object's property

I have created this specific function

function extractSingleValue<T, TElem, K extends keyof T>(obj: T, name: K): TElem {
  const source = obj[name];
  if (source.length !== 1) {
    throw Error(`There should be exactly one ${name} associated`);
  }
  return _.first(source);
}

This function is designed to retrieve the unique value from an array that is stored within the specified property of the original object. However, I am unsure about how to correctly type this function using the following syntax:

function extractSingleValue<T, TElem, K extends keyof T>(obj: T, name: K): TElem 
   where T[K] extends TElem[]
{
  const source = obj[name];
  if (source.length !== 1) {
    throw Error(`There should be exactly one ${name} associated`);
  }
  return _.first(source);
}

Is there a way to achieve this desired typing for the function?

typescript typescript-generics

Answer 1

Answer №1

When approaching this problem, I would suggest using a function that looks like this:

function single<K extends PropertyKey, T extends Record<K, any[]>>(
  obj: T, 
  name: K
): T[K][number] {
    const source = obj[name];
    if (source.length !== 1) {
        throw Error(`There should be exactly one ${name} associated`);
    }
    return source[0];
}

In this function, the key name is expected to be of type K, while obj is required to be of type

T</code, with an array at its property that matches the <code>name

provided. The output type is T[K][number], which represents the type obtained when indexing into T with a property of type K, and then further indexing into that with a property of type number (e.g., obj[name][0]).

Let's test the function with some examples:

const obj = {
    a: [1],
    b: "not me",
    c: ["okay"],
};

const num = single(obj, "a");
num.toFixed();

const oops = single(obj, "b"); // error!
// ---------------> ~~~
// string is not compatible with any[]

const str = single(obj, "c"); // okay
str.toUpperCase();

const alsoOops = single(obj, "d"); // error!
// -------------------> ~~~
// property "d" is missing in obj

The function seems to work as expected. I hope this explanation helps, and good luck with your TypeScript coding!

Link to play with the code in TypeScript Playground

Answer 2

When approaching this problem, I would suggest using a function that looks like this:

function single<K extends PropertyKey, T extends Record<K, any[]>>(
  obj: T, 
  name: K
): T[K][number] {
    const source = obj[name];
    if (source.length !== 1) {
        throw Error(`There should be exactly one ${name} associated`);
    }
    return source[0];
}

In this function, the key name is expected to be of type K, while obj is required to be of type

T</code, with an array at its property that matches the <code>name

provided. The output type is T[K][number], which represents the type obtained when indexing into T with a property of type K, and then further indexing into that with a property of type number (e.g., obj[name][0]).

Let's test the function with some examples:

const obj = {
    a: [1],
    b: "not me",
    c: ["okay"],
};

const num = single(obj, "a");
num.toFixed();

const oops = single(obj, "b"); // error!
// ---------------> ~~~
// string is not compatible with any[]

const str = single(obj, "c"); // okay
str.toUpperCase();

const alsoOops = single(obj, "d"); // error!
// -------------------> ~~~
// property "d" is missing in obj

The function seems to work as expected. I hope this explanation helps, and good luck with your TypeScript coding!

Link to play with the code in TypeScript Playground

A guide to writing a script to access and return a specific element stored in an array within an object's property

Answer №1

Similar questions

Instructions on invoking a function from another Material UI TypeScript component using React

Creating a promise instance with the axios create method

Create an interface property that can accommodate various disparate types

Solution for dealing with error 'Cannot find Property length on type {} in React using TypeScript

React's memo and/or useCallback functions are not functioning as anticipated

What is the process for removing globally declared types in TypeScript definitions?

The term 'Component' is not a valid JSX component that can be used

Ways to resolve the issue: ""@angular/fire"' does not contain the exported member 'AngularFireModule'.ts(2305) in an ionic, firebase, and

Angular2 webpack example error: Cannot execute function 'call' because it is undefined

Tips on updating checkbox background color after being selected

An issue has occurred when attempting to import ES Module for setting all values to an object

Server Components can only receive plain objects and select built-ins from Client Components. Any classes or null prototypes will not be compatible

Is there a way to define type information for a global variable when utilizing dynamic import within a function?

How to invoke a method in a nested Angular 2 component

What are some ways to incorporate advanced/nested type variables when using arrow functions?

The variable is accessed prior to being assigned with the use of the hasOwnProperty method

Calculate the sum of multiple user-selected items in an array to display the total (using Angular)

The Typescript module in question does not contain any exported components or functions related to

What could be causing the "Error: InvalidPipeArgument" to appear in my Angular code?

Failure to nest interfaces in Angular when mapping JSON responses