Issue with generic types being utilized as object identifiers

Question

Issue with generic types being utilized as object identifiers

When using a variable as an object key with generics, I encountered an issue where TypeScript does not allow assigning values from one object to another. In this scenario, I have two objects declared with some shared keys and some unique keys. I also have a function with a generic type that must be a key present in both objects.

Here are some conditions under which it works:

If the object being assigned to does not have any unique keys.
If all shared keys have the same type in both objects.
When generics are not used.

For example:

// types declared here are not crucial, as long as they are not mutually assignable (with strictNullCheck: true)
type A = number;
type B = string;
type C = boolean;
type D = null;
type E = undefined;

type Test1 = {
    a: A;
    b: B;
    c: C;
    d: D;
};
declare const test1: Test1;

type Test2 = {
    b: B;
    c: C;
    d: D;
    e: E;
};
declare const test2: Test2;

function testFn<T extends keyof Test1 & keyof Test2>(t: T) {
    test1[t] = test2[t];
//  ^^^^^^^^
    // Type 'Test2[T]' is not assignable to type 'Test1[T]'.
    // Property 'a' is missing in type 'Test2' but required in type 'Test1'. ts(2322)
}

const key = 'b';
test1[key] = test2[key]; // works fine with keys b, c, d

typescript typescript-generics

Answer 1

Answer №1

Issue:

The testFn function faces a problem of not being type-safe due to the constraint of the T type parameter to keys of both Test1 and Test2. However, Test2 lacks a property named 'a', leading to a compilation failure with the error message Type 'Test2[T]' cannot be assigned to type 'Test1[T]'. 'a' property is absent in 'Test2' but required in 'Test1'

Resolution:

Modify the type parameter T to be keyof Test2. This adjustment will allow the function to work with any Test2 property but will compromise type safety for Test1.
Implement a type guard within the function to validate if the 't' parameter is a Test1 key. If valid, the function can safely assign test2[t] to test1[t].
Utilize the ? operator to assign a value to a property that may be absent in the type. This operator informs TypeScript that the property is optional.

Resolution

 //Type guard:

function testFn<T extends keyof Test1 & keyof Test2>(t: T): void {
          if (t in Test1) {
            test1[t] = test2[t];
          }
        }



 //Using as :
     function testFn<T extends keyof Test2>(t: T): void {
          test1[t] = test2[t] as Test1[T] | undefined;
        }

Result

testFn('b'); // execution successful
testFn('c'); // execution successful
testFn('d'); // execution successful
testFn('a'); // execution successful, with the value of 'test1.a' being 'undefined'

Answer 2

Issue:

The testFn function faces a problem of not being type-safe due to the constraint of the T type parameter to keys of both Test1 and Test2. However, Test2 lacks a property named 'a', leading to a compilation failure with the error message Type 'Test2[T]' cannot be assigned to type 'Test1[T]'. 'a' property is absent in 'Test2' but required in 'Test1'

Resolution:

Modify the type parameter T to be keyof Test2. This adjustment will allow the function to work with any Test2 property but will compromise type safety for Test1.
Implement a type guard within the function to validate if the 't' parameter is a Test1 key. If valid, the function can safely assign test2[t] to test1[t].
Utilize the ? operator to assign a value to a property that may be absent in the type. This operator informs TypeScript that the property is optional.

Resolution

 //Type guard:

function testFn<T extends keyof Test1 & keyof Test2>(t: T): void {
          if (t in Test1) {
            test1[t] = test2[t];
          }
        }



 //Using as :
     function testFn<T extends keyof Test2>(t: T): void {
          test1[t] = test2[t] as Test1[T] | undefined;
        }

Result

testFn('b'); // execution successful
testFn('c'); // execution successful
testFn('d'); // execution successful
testFn('a'); // execution successful, with the value of 'test1.a' being 'undefined'

Answer 3

Answer №2

This issue has been identified and documented at microsoft/TypeScript#32693.

When trying to assign an indexed access to another indexed access in TypeScript, such as o1[k1] = o2[k2], even if the objects and keys are of the same type, it is not permitted. The reason behind this restriction is that the type alone does not necessarily ensure safety. If the keys are part of a union type, like

"b" | "c" | "d"

, there is a possibility of inadvertently assigning k1 as "b" and k2 as "c". Although this enhanced type safety was introduced in microsoft/TypeScript#30769 to prevent errors, it may also restrict valid assignments. Particularly, in cases where o1[k] = o2[k] where the keys on both sides are not only the same type but also the same value, it should be considered safe. However, TypeScript currently does not track the identity of keys, only their types.

At present, the only approved method is to use generic keys (as already done) and objects of the same type (where the issue arises). This is detailed in this comment in ms/TS#30769. To resolve the error, one of the objects should be expressed as having a type compatible with the other. For example:

function testFn<T extends keyof Test1 & keyof Test2>(t: T) {
  const t1: Omit<Test1, "a"> = test1
  t1[t] = test2[t]
}

This is a secure widening of test1 from type Test1 to Omit<Test1, "a"> using the Omit utility type. By utilizing a type annotation instead of a type assertion, the compiler can issue a warning if any unsafe operations occur. Subsequently, t1[t] = test2[t] functions because test2 is also perceived as being of type Omit<Test1, "a">.

While it would be ideal if this process were automated, it is not currently the case. Additionally, it would be beneficial if the compiler considered the identity of t, yet that is also not implemented. Even the workaround is not foolproof as similar issues can arise with generic keys like k1 and k2. Therefore, there is a considerable amount of complexity involved to achieve what many would expect to work seamlessly. Nevertheless, this is the current status of the situation.

Playground link to code

Answer 4

This issue has been identified and documented at microsoft/TypeScript#32693.

When trying to assign an indexed access to another indexed access in TypeScript, such as o1[k1] = o2[k2], even if the objects and keys are of the same type, it is not permitted. The reason behind this restriction is that the type alone does not necessarily ensure safety. If the keys are part of a union type, like

"b" | "c" | "d"

, there is a possibility of inadvertently assigning k1 as "b" and k2 as "c". Although this enhanced type safety was introduced in microsoft/TypeScript#30769 to prevent errors, it may also restrict valid assignments. Particularly, in cases where o1[k] = o2[k] where the keys on both sides are not only the same type but also the same value, it should be considered safe. However, TypeScript currently does not track the identity of keys, only their types.

At present, the only approved method is to use generic keys (as already done) and objects of the same type (where the issue arises). This is detailed in this comment in ms/TS#30769. To resolve the error, one of the objects should be expressed as having a type compatible with the other. For example:

function testFn<T extends keyof Test1 & keyof Test2>(t: T) {
  const t1: Omit<Test1, "a"> = test1
  t1[t] = test2[t]
}

This is a secure widening of test1 from type Test1 to Omit<Test1, "a"> using the Omit utility type. By utilizing a type annotation instead of a type assertion, the compiler can issue a warning if any unsafe operations occur. Subsequently, t1[t] = test2[t] functions because test2 is also perceived as being of type Omit<Test1, "a">.

While it would be ideal if this process were automated, it is not currently the case. Additionally, it would be beneficial if the compiler considered the identity of t, yet that is also not implemented. Even the workaround is not foolproof as similar issues can arise with generic keys like k1 and k2. Therefore, there is a considerable amount of complexity involved to achieve what many would expect to work seamlessly. Nevertheless, this is the current status of the situation.

Playground link to code

Issue with generic types being utilized as object identifiers

Answer №1

Issue:

Resolution:

Resolution

Result

Answer №2

Similar questions

Could you lend a hand in figuring out the root cause of why this Express server is constantly serving up error

Leveraging .tsx components within nested .tsx components in React Native

Issue: formGroup requires an input of type FormGroup. Please provide one; Error: Unable to access property 'controls' as it is undefined

Typescript and the way it handles responses from REST APIs

Display a semantic-ui-react popup in React utilizing Typescript, without the need for a button or anchor tag to trigger it

Vue and TypeScript: The elusive 'exports' remains unidentified

Unexpected directory structure for internal npm module

Angular is having trouble with the toggle menu button in the Bootstrap template

Ways to store data in the localStorage directly from a server

The pathway specified is untraceable by the gulp system

What is the best way to add all IDs to an array, except for the very first one

The Angular Compiler was identified, however it turned out to be an incorrect class instance

Enhance the design of MDX in Next.js with a personalized layout

One cannot use a type alias as the parameter type for an index signature. It is recommended to use `[key: string]:` instead

How can I ensure that a user variable stored in an Angular6 service remains defined and accessible from other components?

Jest Matcher issue: the value received must either be a promise or a function that returns a promise

Changing Angular code to vanilla JavaScript

Visual Studio Code's Intellisense is capable of detecting overloaded functions in JavaScript

Navigate to the logout page upon encountering an error during the request

Angular: The component is missing a provider, and the [multiple Angular HTML elements] are unrecognized