Universal function for selecting object properties

Question

Universal function for selecting object properties

I've recently delved into TypeScript coding and have run into a puzzling issue that has me stumped.

Take a look at the code snippet below:

interface testInterface {
  a: string;
  b: number;
  c?: number;
}

const testObject: testInterface = {
  a: "1",
  b: 2,
};

function selectorFunction<GenericKey extends keyof testInterface>(
  key: GenericKey
): Required<testInterface>[keyof testInterface] {
  if (testObject[key]) return testObject[key];
  throw new Error("Error");
}

To give you some context on what I'm aiming for: the selectorFunction is designed to fetch a value from testObject, based on the key it receives, while ensuring the correct data type. This is why the key property's type is set as generic.

Everything seems to work fine by itself, but things get complicated when optional properties are introduced, causing a conflict with the method's required return type to prevent undefined values.

In theory, it should be straightforward—just add an 'if' check to verify the property's existence, right? Despite attempting this fix, TypeScript continues to flag the following error:

Type 'string | number | undefined' is not assignable to type 'string | number'.
    Type 'undefined' is not assignable to type 'string | number'.
      Type 'testInterface[GenericKey]' is not assignable to type 'number'.
        Type 'string | number | undefined' is not assignable to type 'number'.
          Type 'undefined' is not assignable to type 'number'.ts(2322)

typescript typescript-typings typescript-generics

Answer 1

Answer №1

The code snippet below provides the functionality you are looking for. It also ensures that the return type is never when an error key is inputted. (Playground link)

interface testInterface {
    a: "a"
    b: "b"
    c?: "c"
}


const testObject: testInterface = {
    a: "a",
    b: "b",
}


type RequiredKeys<T> = {
    [k in keyof T]-?: undefined extends T[k] ? never : k
}[keyof T]


type GetSafely<T, K extends keyof T> =
    K extends RequiredKeys<T>
        ? T[K]
        : never


// Type examples:
    // ReqK will be 'a' | 'b'
    type ReqK = RequiredKeys<testInterface>
    // A will be 'a'
    type A = GetSafely<testInterface, "a">
    // B will be 'b'
    type B = GetSafely<testInterface, "b">
    // C will be 'never'
    type C = GetSafely<testInterface, "c">


const getSafely = <T extends {}>(obj: T) =>
    <K extends keyof T>(key: K): GetSafely<T, K> => {
        if (obj[key] !== undefined) {
            return obj[key] as GetSafely<T, K>
        }

        throw new Error("Error");
    }


const selectorFunction = getSafely(testObject);

    const a = selectorFunction("a")
    const b = selectorFunction("b")
    const c = selectorFunction("c")

Answer 2

The code snippet below provides the functionality you are looking for. It also ensures that the return type is never when an error key is inputted. (Playground link)

interface testInterface {
    a: "a"
    b: "b"
    c?: "c"
}


const testObject: testInterface = {
    a: "a",
    b: "b",
}


type RequiredKeys<T> = {
    [k in keyof T]-?: undefined extends T[k] ? never : k
}[keyof T]


type GetSafely<T, K extends keyof T> =
    K extends RequiredKeys<T>
        ? T[K]
        : never


// Type examples:
    // ReqK will be 'a' | 'b'
    type ReqK = RequiredKeys<testInterface>
    // A will be 'a'
    type A = GetSafely<testInterface, "a">
    // B will be 'b'
    type B = GetSafely<testInterface, "b">
    // C will be 'never'
    type C = GetSafely<testInterface, "c">


const getSafely = <T extends {}>(obj: T) =>
    <K extends keyof T>(key: K): GetSafely<T, K> => {
        if (obj[key] !== undefined) {
            return obj[key] as GetSafely<T, K>
        }

        throw new Error("Error");
    }


const selectorFunction = getSafely(testObject);

    const a = selectorFunction("a")
    const b = selectorFunction("b")
    const c = selectorFunction("c")

Universal function for selecting object properties

Answer №1

Similar questions

The React component fails to render when clicking on a Material-UI MenuItem

Guide to making a Typescript interface by combining elements from two separate interfaces without utilizing inheritance

Guide to accessing and modifying attributes of Ionic components in TypeScript file

Utilizing ResolveComponentFactory() with a String Key: A Step-by-Step Guide

"Typescript with React and Material-UI Table - A seamless user experience with no errors

Tips for refreshing a React component using incremental changes retrieved from an API

Remove an element from an array within objects

Angular: accomplish cascading requests to achieve desired outcomes

Troubleshooting: Vue and TypeScript Components Not Communicating

Ensure that missing types are included in a union type following a boolean evaluation

What is the reason that the command `npx create-react-app my-app --typescript` is not providing me with the expected TypeScript files?

Using create-react-app with TypeScript for server-side rendering

Guide on importing an ES6 package into an Express Typescript Project that is being utilized by a Vite React package

Update an API call to switch from promises to observables, implementing axios

When attempting to send a token from an account to a marketplace in ERC721, the transfer caller must either be the owner

Expanding material UI theme choices through module augmentation is currently ineffective with TypeText

Regular pattern with Kubernetes cluster endpoint utilizing either IP address or fully qualified domain name

Enhancing the default functionality of React.FC within Next.js

Creating a custom autocomplete search using Angular's pipes and input

Error Message: Module not found while using Node Express with TypeScriptIssue: A