In Typescript, a type that is a union of object keys cannot be utilized as a key within the object

Question

In Typescript, a type that is a union of object keys cannot be utilized as a key within the object

One of the challenges I am facing involves a function that takes an object as a parameter and returns another object, with one of its properties being the value of a key in the original object. When attempting to retrieve this value using obj[key] notation, I encounter an issue.

I understand that the key must be of the proper type in order to use it like this. I cannot simply use a string as the key if the interface does not have [key: string]: any. However, my key is a union of strings that were keys in the passed object, such as 'user' or 'name'.

interface Twitter<T> {
  name: T;
  user: T;
  sex: T extends string ? boolean : string;
}
interface Facebook<T> {
  appName: T;
  whatever: T;
  imjustanexample: T;
}

type TwFbObjKeys = keyof Twitter<string> | keyof Facebook<string>

The function in question looks like this:

public static getArrayOfObjects(
        queryParameters: Twitter<string> | Facebook<string>,
    ) {
        const keys = Object.keys(queryParameters) as TwFbObjKeys[];
        return keys.map((paramId) => ({
            paramId,
            value: queryParameters[paramId],
        }));
    }

I expected that using paramId, which is of type 'name' | 'sex' | 'appName' | ..., as a key for an object containing these keys would not result in an error. Unfortunately, I receive the following error:

This issue has consumed several hours of my time. Any suggestions on how to resolve it?

typescript

Answer 1

Answer №1

To optimize the function parameter queryParameters, it is recommended to define it as a generic type T with the constraint

<T extends Twitter<string> | Facebook<string>>

rather than a union type

Twitter<string> | Facebook<string>

:

function getArrayOfObjects<T extends Twitter<string> | Facebook<string>>(
    queryParameters: T
) {
    const keys = Object.keys(queryParameters) as (keyof T)[];
    return keys.map((paramId) => ({
        paramId,
        value: queryParameters[paramId],
    }));
}

Playground

Explanation:

Using generics ensures that the type of the argument passed in for queryParameters will be maintained, while also guaranteeing that it will be a subtype of

Twitter<string> | Facebook<string>

. The use of paramId with type keyof T allows access to the properties of queryParameters.

If a union type

Twitter<string> | Facebook<string>

was used, queryParameters would remain undetermined within the function and could potentially still be either Twitter<string> or Facebook<string>, leading to issues with the keyof operator and property access. This limitation arises from the lack of common properties between Twitter<string> and Facebook<string>.

To highlight this issue further, consider attempting to define TwFbObjKeys as

// "name" | "user" | "sex" | "appName" | "whatever" | "imjustanexapmle"
type TwFbObjKeys = keyof Twitter<string> | keyof Facebook<string>

// not this: keyof only applies to Twitter<string> here: "name" | "user" | "sex" | Facebook<string>
type TwFbObjKeys_not = keyof Twitter<string> | Facebook<string>

However, merely defining TwFbObjKeys alone does not resolve the underlying issue. For instance:

declare const queryParameters: Twitter<string> | Facebook<string>

// type keysOfQueryParameters = never
type keysOfQueryParameters = keyof typeof queryParameters

// error: doesn't work either
queryParameters[unionKeys]

// this would work, if both Twitter and Facebook have "common" prop
queryParameters["common"]

Playground

By utilizing a generic type, we are able to safely access the keys of the passed-in queryParameters.

Answer 2

To optimize the function parameter queryParameters, it is recommended to define it as a generic type T with the constraint

<T extends Twitter<string> | Facebook<string>>

rather than a union type

Twitter<string> | Facebook<string>

:

function getArrayOfObjects<T extends Twitter<string> | Facebook<string>>(
    queryParameters: T
) {
    const keys = Object.keys(queryParameters) as (keyof T)[];
    return keys.map((paramId) => ({
        paramId,
        value: queryParameters[paramId],
    }));
}

Playground

Explanation:

Using generics ensures that the type of the argument passed in for queryParameters will be maintained, while also guaranteeing that it will be a subtype of

Twitter<string> | Facebook<string>

. The use of paramId with type keyof T allows access to the properties of queryParameters.

If a union type

Twitter<string> | Facebook<string>

was used, queryParameters would remain undetermined within the function and could potentially still be either Twitter<string> or Facebook<string>, leading to issues with the keyof operator and property access. This limitation arises from the lack of common properties between Twitter<string> and Facebook<string>.

To highlight this issue further, consider attempting to define TwFbObjKeys as

// "name" | "user" | "sex" | "appName" | "whatever" | "imjustanexapmle"
type TwFbObjKeys = keyof Twitter<string> | keyof Facebook<string>

// not this: keyof only applies to Twitter<string> here: "name" | "user" | "sex" | Facebook<string>
type TwFbObjKeys_not = keyof Twitter<string> | Facebook<string>

However, merely defining TwFbObjKeys alone does not resolve the underlying issue. For instance:

declare const queryParameters: Twitter<string> | Facebook<string>

// type keysOfQueryParameters = never
type keysOfQueryParameters = keyof typeof queryParameters

// error: doesn't work either
queryParameters[unionKeys]

// this would work, if both Twitter and Facebook have "common" prop
queryParameters["common"]

Playground

By utilizing a generic type, we are able to safely access the keys of the passed-in queryParameters.

Answer 3

Answer №2

It seems like the issue lies within this specific line of code

type TwFbObjKeys = keyof Twitter<string> | Facebook<string>
// is of type type TwFbObjKeys = "name" | "user" | "sex" | Facebook<string>

You may need to update it to

type TwFbObjKeys = keyof Twitter<string> | keyof Facebook<string>
// of type type TwFbObjKeys = "name" | "user" | "sex" | "appName" | "whatever" | "imjustanexapmle"

Answer 4

It seems like the issue lies within this specific line of code

type TwFbObjKeys = keyof Twitter<string> | Facebook<string>
// is of type type TwFbObjKeys = "name" | "user" | "sex" | Facebook<string>

You may need to update it to

type TwFbObjKeys = keyof Twitter<string> | keyof Facebook<string>
// of type type TwFbObjKeys = "name" | "user" | "sex" | "appName" | "whatever" | "imjustanexapmle"

Answer 5

Answer №3

(Let's assume you're talking about

type TwFbObjKeys = keyof Twitter<string> | keyof Facebook<string>

)

In Typescript, an error is raised because paramId has a type that includes all the keys from both interfaces:

however, queryParameters can only belong to one of these types:

'name' | 'user'| 'sex'

or

'appName' | 'whatever' | 'imjustanexapmle'

To resolve this issue, it's necessary to separate these types into distinct interfaces:

interface Twitter<T> {
  name: T;
  user: T;
  sex: T extends string ? boolean : string;
}
interface Facebook<T> {
  appName: T;
  whatever: T;
  imjustanexapmle: T;
}

function isTwitter<T>(val: Twitter<T> | Facebook<T>): val is Twitter<T> {
  return (
    'name' in (val as Twitter<T>) &&
    'user' in (val as Twitter<T>) &&
    'sex' in (val as Twitter<T>) 
  )
}

function isFacebook<T>(val: Twitter<T> | Facebook<T>): val is Facebook<T> {
  return (
    'appName' in (val as Twitter<T>) &&
    'whatever' in (val as Twitter<T>) &&
    'imjustanexapmle' in (val as Twitter<T>) 
  )
}

function getValue<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

function getArrayOfObjects(
    queryParameters: Twitter<string> | Facebook<string>,
) {
  if (isTwitter(queryParameters)) { // if queryParameters is of type Twitter<string>
    const keys = Object.keys(queryParameters);
    return keys.map((paramId) => ({
      paramId,
      value: getValue(queryParameters, paramId as keyof Twitter<string>)
    }));
  } else if (isFacebook(queryParameters)) { // if queryParameters is of type Facebook<string>
    const keys = Object.keys(queryParameters);
    return keys.map((paramId) => ({ 
      paramId,
      value: getValue(queryParameters, paramId as keyof Facebook<string>)
    }));
  } else {  // if queryParameters is invalid
    throw new Error("invalid queryParameters!")
  }
}

Answer 6

(Let's assume you're talking about

type TwFbObjKeys = keyof Twitter<string> | keyof Facebook<string>

)

In Typescript, an error is raised because paramId has a type that includes all the keys from both interfaces:

however, queryParameters can only belong to one of these types:

'name' | 'user'| 'sex'

or

'appName' | 'whatever' | 'imjustanexapmle'

To resolve this issue, it's necessary to separate these types into distinct interfaces:

interface Twitter<T> {
  name: T;
  user: T;
  sex: T extends string ? boolean : string;
}
interface Facebook<T> {
  appName: T;
  whatever: T;
  imjustanexapmle: T;
}

function isTwitter<T>(val: Twitter<T> | Facebook<T>): val is Twitter<T> {
  return (
    'name' in (val as Twitter<T>) &&
    'user' in (val as Twitter<T>) &&
    'sex' in (val as Twitter<T>) 
  )
}

function isFacebook<T>(val: Twitter<T> | Facebook<T>): val is Facebook<T> {
  return (
    'appName' in (val as Twitter<T>) &&
    'whatever' in (val as Twitter<T>) &&
    'imjustanexapmle' in (val as Twitter<T>) 
  )
}

function getValue<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

function getArrayOfObjects(
    queryParameters: Twitter<string> | Facebook<string>,
) {
  if (isTwitter(queryParameters)) { // if queryParameters is of type Twitter<string>
    const keys = Object.keys(queryParameters);
    return keys.map((paramId) => ({
      paramId,
      value: getValue(queryParameters, paramId as keyof Twitter<string>)
    }));
  } else if (isFacebook(queryParameters)) { // if queryParameters is of type Facebook<string>
    const keys = Object.keys(queryParameters);
    return keys.map((paramId) => ({ 
      paramId,
      value: getValue(queryParameters, paramId as keyof Facebook<string>)
    }));
  } else {  // if queryParameters is invalid
    throw new Error("invalid queryParameters!")
  }
}

In Typescript, a type that is a union of object keys cannot be utilized as a key within the object

Answer №1

Answer №2

Answer №3

Similar questions

Validating mixed types and generics within an array using Typescript's type checking

Looking for a regular expression to verify if the URL inputted is valid in TypeScript

Using Cypress.Promise in a Cypress command causes type conflicts

For every piece of information in the reply

Utilizing RxJs operators in Angular: utilizing async pipe and tap does not fill data

Is it feasible to securely remove an item from an array within an object without the need for any assertions in a single function?

What is the process for accessing my PayPal Sandbox account?

Problems with the duration of Shadcn Toasts (Inspired by the react-hot-toast library)

Using a module without a declaration file: tips for troubleshooting

TypeScript enabled npm package

Retrieve only data that results in either a 1 or 0 when filtering

Deleting specific URLs in Markdown using TypeScript

Troubleshooting: Angular 6 Renderer2 Issue with Generating Dynamic DOM Elements for SELECT-Option

Determine whether an interface includes a mandatory field

Is it possible to pass a JSON key as a string in the @Input() decorator in Angular?

The animation feature of the CountTo Module fails to function properly once the currency pipe is included

Why is TypeScript unable to locate the identifier 'Express'?

The task of mapping an array of objects with nested values using JavaScript is proving to

Exploring the functionalities of React Native with react-hook-form and implementing them with TypeScript

How to retrieve the default type returned by a function using a custom TypeMap