A guide to setting properties using a Proxy object

Question

A guide to setting properties using a Proxy object

Within my class, I have included a Proxy which is structured as follows:

export class Row<T extends ModelItems> {

  private _row: T = <T>{}

  public constructor(rowItems?: T) {
    if (rowItems) { this._row = rowItems }
    return new Proxy(this, {
      get: function (target, prop) {
        return (<any>target)[prop] || target._row[prop] || ''
      }
      /* set(): snipped */
  }
}

My issue arises when using the code snippet below:

interface User {
    id: number
    first: string
    last: string
    username: string
}

let row = new Row<User>({/* My object */})

I am looking for a way to display items defined in the User interface when typing row. Currently, only the methods and properties at the root level of the object are suggested.

I attempted the following approach:

export interface Row<T extends ModelItems> {
  [key: string]: T 
}

However, this solution does not seem to be effective apart from highlighting that my methods are not properly defined.

javascript typescript

Answer 1

Answer №1

It appears that you are seeking for an instance of Row<T> to also act as a T itself; am I correct in assuming this? TypeScript does not allow you to create something like class Row<T> implements T, nor will it automatically deduce it. Instead, you could consider the following approach:

export class _Row<T> {
 // ... your definition above
}
// Row type alias
export type Row<T extends ModelItems> = _Row<T> & T;
// Row value alias
export const Row = _Row as {
  new <T>(rowItems?: T): Row<T>
  prototype: _Row<{}>
}

This setup essentially functions identically at runtime, but now TypeScript will recognize that an instance of Row<T> possesses all the attributes of T:

declare const u: User;
let row = new Row(u); // inferred as Row<User>
row.username // string

If your intention is to represent a scenario where a Row<T> mimics an object with all the keys of T but potentially empty-string properties, then you may substitute the // Row type alias section with the following:

// Row type alias
export type Row<T extends ModelItems> = _Row<T> &
  {[K in keyof T]: T[K] | ''};

You can then confirm that it operates as intended:

declare const u: User;
let row = new Row(u); // inferred as Row<User>
row.id // number || ''

I trust this information proves useful to you; best of luck!

Answer 2

It appears that you are seeking for an instance of Row<T> to also act as a T itself; am I correct in assuming this? TypeScript does not allow you to create something like class Row<T> implements T, nor will it automatically deduce it. Instead, you could consider the following approach:

export class _Row<T> {
 // ... your definition above
}
// Row type alias
export type Row<T extends ModelItems> = _Row<T> & T;
// Row value alias
export const Row = _Row as {
  new <T>(rowItems?: T): Row<T>
  prototype: _Row<{}>
}

This setup essentially functions identically at runtime, but now TypeScript will recognize that an instance of Row<T> possesses all the attributes of T:

declare const u: User;
let row = new Row(u); // inferred as Row<User>
row.username // string

If your intention is to represent a scenario where a Row<T> mimics an object with all the keys of T but potentially empty-string properties, then you may substitute the // Row type alias section with the following:

// Row type alias
export type Row<T extends ModelItems> = _Row<T> &
  {[K in keyof T]: T[K] | ''};

You can then confirm that it operates as intended:

declare const u: User;
let row = new Row(u); // inferred as Row<User>
row.id // number || ''

I trust this information proves useful to you; best of luck!

A guide to setting properties using a Proxy object

Answer №1

Similar questions

Invoking middleware within another middleware

Flat list in React Native is not showing any items on the screen

the angular variable scope has not been defined

Vuetify's autofocus feature is limited to functioning only when the modal is first opened

I am curious to know why my jQuery when().then() function is firing before the completion of the ajax request in the when clause

Using importXML with Internet Explorer 11

Is there a way to correct Typescript's misunderstanding of the interface from a JSON file that has been imported?

Challenges with Type Aliases when Using Typescript with MaterialUI Icons

Scripting events in JavaScript/jQuery are failing to trigger on elements located inside nested <div> containers

Together, we have a shared Yarn JS directory for both the client and server components,

What is the process for exporting Three.js files to .stl format for use in 3D printing?

Express server controller encountering premature return from locally executed async function

Pass the response from a JavaScript confirm dialog to a Ruby program

Exploring VSCode Debugger with Typescript: Traversing through Step Over/Into leads to JavaScript file路径

Visual Studio Code encounters a JavaScript NPM error that is causing unexpected issues

Header formatting issue when attempting to implement tablesorter plugin

How can items be categorized by their color, size, and design?

Optimizing workflow with express.js, backbone.js, and connect-assets for maximum efficiency

Ways to avoid extra function loads in JavaScript

Activate scroll function exclusively upon hovering over specific object