Determine the appropriate data type for an object property using its key

Question

Determine the appropriate data type for an object property using its key

I have a constant object with known keys. Each item within the object may or may not have a specific property. I need a function that, when given a key, will return the value along with its corresponding type.

My development environment is TypeScript 4.6.2.

Instead of manually typing in data.key?.property, I require a programmatic approach for this functionality.

Here's an example scenario to illustrate what I'm looking for:

const data = {
 alice: {loves: 3},
 bob: {loves: 'hippos'},
 charlie: {hates: 'toast'},
 denise: {loves: (a:number) => `hello`}
} as const;


function personLoves(name:keyof typeof data) {
    const item = data[name]
    const loves = 'loves' in item ? item.loves : undefined;
    // ^ this line needs improvement!
    return loves;
}

const aliceLoves = personLoves('alice');
// Expecting `aliceLoves` to have type number. 

const bobLoves = personLoves('bob');
// Expecting `bobLoves` to have type string or 'hippo'

const charlieLoves = personLoves('charlie');
// Expecting `charlieLoves` to be of type undefined

const deniseLoves = personLoves('denise');
// Expecting `deniseLoves` to be type (a:number) => string

Playground

typescript

Answer 1

Answer №1

If you find yourself in this scenario, I suggest utilizing a generic signature on the personLoves function to indicate that the name parameter is a specific key within the data object. This approach enables TypeScript to accurately determine the return type based on the provided argument during invocation.

In addition to the generic signature, employing an overload signature can address the two possible scenarios: when the person's data includes a loves key (resulting in inferring the return type from the value of that key), and when it doesn't (leading to a return type of undefined).

// Defining a helper type for identifying keys with values containing a 'loves' property
type KeysExtending<O, T> = {
    [K in keyof O]: O[K] extends T ? K : never;
}[keyof O];

// Determining keys in `data` that have a 'loves' key
type KeysWithLoves = KeysExtending<typeof data, {loves: unknown}> // resolves to: "alice" | "bob" | "denise"

// Creating overloads for the identified keys and all other cases
function personLoves<T extends KeysWithLoves>(name: T): (typeof data)[T]["loves"];
function personLoves(name: keyof typeof data): undefined;
function personLoves(name: keyof typeof data) {
    const item = data[name]
    const loves = 'loves' in item ? item.loves : undefined;
    return loves;
}

By following this methodology, you should achieve the desired outcome:


const aliceLoves = personLoves('alice');
// Returns number type: 3

const bobLoves = personLoves('bob');
// Returns string type: 'hippo'

const charlieLoves = personLoves('charlie');
// Returns type: undefined

const deniseLoves = personLoves('denise');
// Returns type: (a:number) => string

Typescript Playground

Answer 2

If you find yourself in this scenario, I suggest utilizing a generic signature on the personLoves function to indicate that the name parameter is a specific key within the data object. This approach enables TypeScript to accurately determine the return type based on the provided argument during invocation.

In addition to the generic signature, employing an overload signature can address the two possible scenarios: when the person's data includes a loves key (resulting in inferring the return type from the value of that key), and when it doesn't (leading to a return type of undefined).

// Defining a helper type for identifying keys with values containing a 'loves' property
type KeysExtending<O, T> = {
    [K in keyof O]: O[K] extends T ? K : never;
}[keyof O];

// Determining keys in `data` that have a 'loves' key
type KeysWithLoves = KeysExtending<typeof data, {loves: unknown}> // resolves to: "alice" | "bob" | "denise"

// Creating overloads for the identified keys and all other cases
function personLoves<T extends KeysWithLoves>(name: T): (typeof data)[T]["loves"];
function personLoves(name: keyof typeof data): undefined;
function personLoves(name: keyof typeof data) {
    const item = data[name]
    const loves = 'loves' in item ? item.loves : undefined;
    return loves;
}

By following this methodology, you should achieve the desired outcome:


const aliceLoves = personLoves('alice');
// Returns number type: 3

const bobLoves = personLoves('bob');
// Returns string type: 'hippo'

const charlieLoves = personLoves('charlie');
// Returns type: undefined

const deniseLoves = personLoves('denise');
// Returns type: (a:number) => string

Typescript Playground

Answer 3

Answer №2

To streamline the process, it is recommended to define an intermediary type named LovesType, which can automatically deduce the type of the loves property from the given data object.

type LovesType<T> = T extends { loves: infer L } ? L : undefined;

function personLoves<T extends keyof typeof data>(name: T): LovesType<typeof data[T]> {
  const person = data[name];
  return ('loves' in person ? person.loves : undefined) as LovesType<typeof data[T]>;
}

Enhanced Clarity

In addition, introducing a middleman type like Person can represent an individual entry within the data structure effectively reducing repetition when declaring types.

type Person = typeof data[keyof typeof data];
type LovesType<T> = T extends { loves: infer L } ? L : undefined;

function personLoves<T extends keyof typeof data>(name: T): LovesType<Person> {
  const person = data[name] as Person;
  return ('loves' in person ? person.loves : undefined) as LovesType<Person>;
}

Detailed Example:

Here is a comprehensive illustration showcasing the utilization of both middleman types (Person and LovesType):

const data = {
  alice: { loves: 3 },
  bob: { loves: 'hippos' },
  charlie: { hates: 'toast' },
  denise: { loves: (a: number) => `hello` }
} as const;

type Person = typeof data[keyof typeof data];
type LovesType<T> = T extends { loves: infer L } ? L : undefined;

function personLoves<T extends keyof typeof data>(name: T): LovesType<Person> {
  const person = data[name] as Person;
  return ('loves' in person ? person.loves : undefined) as LovesType<Person>;
}

const aliceLoves = personLoves('alice');
console.log(aliceLoves); // 3 (number)

const bobLoves = personLoves('bob');
console.log(bobLoves); // 'hippos' (string)

const charlieLoves = personLoves('charlie');
console.log(charlieLoves); // undefined

const deniseLoves = personLoves('denise');
console.log(deniseLoves); // (a: number) => string (function)

Answer 4

To streamline the process, it is recommended to define an intermediary type named LovesType, which can automatically deduce the type of the loves property from the given data object.

type LovesType<T> = T extends { loves: infer L } ? L : undefined;

function personLoves<T extends keyof typeof data>(name: T): LovesType<typeof data[T]> {
  const person = data[name];
  return ('loves' in person ? person.loves : undefined) as LovesType<typeof data[T]>;
}

Enhanced Clarity

In addition, introducing a middleman type like Person can represent an individual entry within the data structure effectively reducing repetition when declaring types.

type Person = typeof data[keyof typeof data];
type LovesType<T> = T extends { loves: infer L } ? L : undefined;

function personLoves<T extends keyof typeof data>(name: T): LovesType<Person> {
  const person = data[name] as Person;
  return ('loves' in person ? person.loves : undefined) as LovesType<Person>;
}

Detailed Example:

Here is a comprehensive illustration showcasing the utilization of both middleman types (Person and LovesType):

const data = {
  alice: { loves: 3 },
  bob: { loves: 'hippos' },
  charlie: { hates: 'toast' },
  denise: { loves: (a: number) => `hello` }
} as const;

type Person = typeof data[keyof typeof data];
type LovesType<T> = T extends { loves: infer L } ? L : undefined;

function personLoves<T extends keyof typeof data>(name: T): LovesType<Person> {
  const person = data[name] as Person;
  return ('loves' in person ? person.loves : undefined) as LovesType<Person>;
}

const aliceLoves = personLoves('alice');
console.log(aliceLoves); // 3 (number)

const bobLoves = personLoves('bob');
console.log(bobLoves); // 'hippos' (string)

const charlieLoves = personLoves('charlie');
console.log(charlieLoves); // undefined

const deniseLoves = personLoves('denise');
console.log(deniseLoves); // (a: number) => string (function)

Determine the appropriate data type for an object property using its key

Answer №1

Answer №2

Enhanced Clarity

Detailed Example:

Similar questions

Error: Failed to retrieve the name property of an undefined value within the Array.forEach method

The error "Failed to log in. Cannot read property getPackageManager of undefined in Angular 2

Error in Angular 7: Trying to assign a 'void' type to a 'ObservableInput<{}>' type

Guide on transferring map-marker from mapclick event to a function within the google-map component

Maintain the active tab selection in Angular 2 even after the page reloads

Using Tailwind classes as a prop functions correctly, however, it does not work when directly applied

What is preventing me from including a typescript file in a VS2015 folder?

Revamping Modal Interface for CRUD Operations (React / C# / Entity Framework Core)

Utilizing TypeScript to extract elements from nested arrays

When a const variable is declared within the composition-api setup(), it remains unchanged unless redeclared within the function scope

Creating a Redux slice with ENUM values can be done by defining an initial state with

Attempting to implement a typeguard in Typescript that relies on the presence of specific content within an element

Where is the optimal location for placing a JavaScript listening function within an Angular component?

Angular: Keeping array bindings synchronized and up-to-date

Receiving an error with React Proptypes when using the union type Breakpoint

Error in TypeScript: Module 'stytch' and its corresponding type declarations could not be located. (Error code: ts(2307))

Using Webpack and Typescript to Import Images

"Implemented a fresh pathway within the app-routing.module.ts file, but unfortunately, ngxAdmin is experiencing functionality issues

Securing your React app with private routes and context-based authentication

Choose the default setting if angular is null