What is the reason for the failure of the "keyof" method on this specific generic type within a Proxy object created by a class constructor?

Question

What is the reason for the failure of the "keyof" method on this specific generic type within a Proxy object created by a class constructor?

I'm encountering difficulties when utilizing a generic type in combination with keyof inside a Proxy():

The following example code is not functioning and indicates a lack of assignable types:

interface SomeDataStructure {
    name?: string;
}

class DataWrapper<T extends SomeDataStructure> {
    data: T;
    
    constructor(data: T) {
        this.data = data;

        return new Proxy(this, {
            get: (target: this, property: keyof T): any => {
                return target.data[property];
            }
        });
    }
}

The error message (on get):

Type '(target: this, property: keyof T) => any' is not compatible with type '(target: this, p: 
string | symbol, receiver: any) => any'.
  Parameters 'property' and 'p' have incompatible types.
    Type 'string | symbol' cannot be assigned to type 'keyof T'.
      Type 'string' cannot be assigned to type 'keyof T'.
        Type 'string' cannot be assigned to type '"name"'.ts(2322)

If I directly use keyof SomeDataStructure, instead of keyof T, the error vanishes and everything seems to work fine:

interface SomeDataStructure {
    name?: string;
}

class DataWrapper<T extends SomeDataStructure> {
    data: T;
    
    constructor(data: T) {
        this.data = data;

        return new Proxy(this, {
            get: (target: this, property: keyof SomeDataStructure): any => {
                return target.data[property];
            }
        });
    }
}

Alternatively, specifying

keyof T extends SomeDataStructure

(similar to the class definition) also resolves the issue. The usage of keyof T in general for class methods outside of the Proxy() functions smoothly.

It appears that the type of T gets lost when wrapping things within new Proxy(). How can I maintain the reference to T for keyof T in this scenario?

typescript typescript-generics

Answer 1

Answer №1

One should not assume that the property is always of type keyof T, as TypeScript tends to allow get handlers to make risky assumptions about the property. The error occurs because keyof T poses an unsafe condition that confuses the compiler.

To begin with, it is not safe to presume that property belongs to the type keyof T.

The generic type parameter T is restricted to SomeDataStructure, which implies it could potentially be a subtype of SomeDataStructure containing additional properties unknown to SomeDataStructure:

const dw = new DataWrapper({
  name: "abc",
  otherProp: 123,
  4: true,
}); // compiles okay

Moreover, the provided data might be a subtype of T with properties not defined within T:

interface Foo extends SomeDataStructure {
  name: string
  otherProp: number,
  4: boolean
}
const bar = { name: "abc", otherProp: 123, 4: true, yetAnotherProp: "hello" };
const foo: Foo = bar; // okay
const dw2 = new DataWrapper(foo);
// const dw2: DataWrapper<Foo>

In this scenario, dw2 is considered to be of type DataWrapper<Foo>, despite the actual data containing a property named

yetAnotherProp</code which is absent in <code>Foo

. This aligns with how structural typing operates in TypeScript, and it's by design.

Hence, your proxy handler should be able to handle any property key, rather than just assuming it's keyof T. According to the TypeScript ProxyHandler typings for get, the property parameter is expected to be of type string | symbol.

However, due to its declaration using method syntax ({ get(⋯): ⋯ }) instead of function property syntax ({ get: (⋯) => ⋯ }), TypeScript treats it as being bivariant in its parameter types, accommodating both safer and riskier assumptions regarding the type of property.

This manifests as an error when using keyof T since it neither widens nor narrows to string | symbol, making it ineligible according to the current TypeScript setup.

To resolve this issue, it is advised to develop code capable of handling any string | symbol property effortlessly. If you are unconcerned about extra keys, consider Exclude-ing number from keyof T to provide a narrower interpretation resulting in proper bivariant behavior:

interface SomeDataStructure {
  name?: string;
}

class DataWrapper<T extends SomeDataStructure> {
  data: T;

  constructor(data: T) {
    this.data = data;

    return new Proxy(this, {
      get: (target: this, property: Exclude<keyof T, number>): any => { // okay
        return target.data[property];
      }
    });
  }
}

This resolves the issue effectively.

Playground link to code

Answer 2

One should not assume that the property is always of type keyof T, as TypeScript tends to allow get handlers to make risky assumptions about the property. The error occurs because keyof T poses an unsafe condition that confuses the compiler.

To begin with, it is not safe to presume that property belongs to the type keyof T.

The generic type parameter T is restricted to SomeDataStructure, which implies it could potentially be a subtype of SomeDataStructure containing additional properties unknown to SomeDataStructure:

const dw = new DataWrapper({
  name: "abc",
  otherProp: 123,
  4: true,
}); // compiles okay

Moreover, the provided data might be a subtype of T with properties not defined within T:

interface Foo extends SomeDataStructure {
  name: string
  otherProp: number,
  4: boolean
}
const bar = { name: "abc", otherProp: 123, 4: true, yetAnotherProp: "hello" };
const foo: Foo = bar; // okay
const dw2 = new DataWrapper(foo);
// const dw2: DataWrapper<Foo>

In this scenario, dw2 is considered to be of type DataWrapper<Foo>, despite the actual data containing a property named

yetAnotherProp</code which is absent in <code>Foo

. This aligns with how structural typing operates in TypeScript, and it's by design.

Hence, your proxy handler should be able to handle any property key, rather than just assuming it's keyof T. According to the TypeScript ProxyHandler typings for get, the property parameter is expected to be of type string | symbol.

However, due to its declaration using method syntax ({ get(⋯): ⋯ }) instead of function property syntax ({ get: (⋯) => ⋯ }), TypeScript treats it as being bivariant in its parameter types, accommodating both safer and riskier assumptions regarding the type of property.

This manifests as an error when using keyof T since it neither widens nor narrows to string | symbol, making it ineligible according to the current TypeScript setup.

To resolve this issue, it is advised to develop code capable of handling any string | symbol property effortlessly. If you are unconcerned about extra keys, consider Exclude-ing number from keyof T to provide a narrower interpretation resulting in proper bivariant behavior:

interface SomeDataStructure {
  name?: string;
}

class DataWrapper<T extends SomeDataStructure> {
  data: T;

  constructor(data: T) {
    this.data = data;

    return new Proxy(this, {
      get: (target: this, property: Exclude<keyof T, number>): any => { // okay
        return target.data[property];
      }
    });
  }
}

This resolves the issue effectively.

Playground link to code

Answer 3

Answer №2

The error message you're receiving is valid: TypeScript doesn't consider a string | symbol to be compatible with keyof T. These are indeed two distinct types. ("Compatible" means that string | symbol must be the same as or narrower than keyof T - which is not the case.)

The issue of not being able to specify to TypeScript that it should always anticipate a keyof T to be provided is due to what I believe is a poorly defined type for ProxyHandler. You can see this by accessing the definition of the get function in your editor.

Currently, the typing is:

get?(target: T, p: string | symbol, receiver: any): any;

What you actually want is:

get?<K = keyof T>(target: T, p: K, receiver: any): T[K];

If you had the second typing, you could interact with TypeScript more accurately:

get: <K extends keyof T>(target: this, property: K): T[K] => {
  const value = target.data[ property ];
  return value; // correctly resolves to `T[K]`
}

You can try this out in your editor by modifying your lib.es20XX.proxy.d.ts file and inserting the alternative typing there:

    /**
     * A trap for getting a property value.
     * @param target The original object being proxied.
     * @param p The name or `Symbol` of the property to retrieve.
     * @param receiver The proxy or an object extending from the proxy.
     */
    get?(target: T, p: string | symbol, receiver: any): any;
    get?<K = keyof T>(target: T, p: K, receiver: any): T[K];

I'm afraid my expertise on this particular topic is limited to this point. I'm uncertain if there's a quick fix that would allow you to refine the default typings without introducing your own .d.ts files. Perhaps someone else can provide more actionable guidance.

Answer 4

The error message you're receiving is valid: TypeScript doesn't consider a string | symbol to be compatible with keyof T. These are indeed two distinct types. ("Compatible" means that string | symbol must be the same as or narrower than keyof T - which is not the case.)

The issue of not being able to specify to TypeScript that it should always anticipate a keyof T to be provided is due to what I believe is a poorly defined type for ProxyHandler. You can see this by accessing the definition of the get function in your editor.

Currently, the typing is:

get?(target: T, p: string | symbol, receiver: any): any;

What you actually want is:

get?<K = keyof T>(target: T, p: K, receiver: any): T[K];

If you had the second typing, you could interact with TypeScript more accurately:

get: <K extends keyof T>(target: this, property: K): T[K] => {
  const value = target.data[ property ];
  return value; // correctly resolves to `T[K]`
}

You can try this out in your editor by modifying your lib.es20XX.proxy.d.ts file and inserting the alternative typing there:

    /**
     * A trap for getting a property value.
     * @param target The original object being proxied.
     * @param p The name or `Symbol` of the property to retrieve.
     * @param receiver The proxy or an object extending from the proxy.
     */
    get?(target: T, p: string | symbol, receiver: any): any;
    get?<K = keyof T>(target: T, p: K, receiver: any): T[K];

I'm afraid my expertise on this particular topic is limited to this point. I'm uncertain if there's a quick fix that would allow you to refine the default typings without introducing your own .d.ts files. Perhaps someone else can provide more actionable guidance.

What is the reason for the failure of the "keyof" method on this specific generic type within a Proxy object created by a class constructor?

Answer №1

Answer №2

Similar questions

What is the best way to iterate through all class properties that are specified using class-validator?

The evaluation of mongodb-memory-server is experiencing issues with either failing or timing out

Show all span elements in a map except for the last one

A method for modifying the key within a nested array object and then outputting the updated array object

Is it possible to import the identical file twice consecutively using html and typescript?

Dynamically attach rows to a table in Angular by triggering a TypeScript method with a button click

Asynchronous NestJs HTTP service request

Injecting a component in Angular 2 using an HTML selector

What could be the reason for the tsc command not displaying compilation errors when compiling a particular file?

Oops! Looks like there's an issue with the type error: value.forEach is

How to use Angular template syntax to assign an async array to multiple variables

Using arrays as props in React with Typescript

What is the best way to enable code sharing between two TypeScript projects housed within the same repository?

Utilizing union type return values in Typescript

What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

Is it possible to create cloud functions for Firebase using both JavaScript and TypeScript?

Error: global not declared in the context of web3

During the compilation process, Angular could not locate the exported enum

Typescript Declarations for OpenLayers version 6

When a ListView item is clicked, a label will display text with text wrapping specific to the selected item in the list