Add an additional boolean attribute called `_ro` as a suffix to a property

Question

Add an additional boolean attribute called `_ro` as a suffix to a property

Is it possible to add an additional property using a property decorator?

The current approach I am taking seems to be incorrect.

const RoProp = () => {
  return <T>(target: T, memberName: keyof T) => {
    const roPropName = `${String(memberName)}_ro`;
    let roPropVal = false;
    Object.defineProperty(target, roPropName, {
      set(v: boolean) {
        roPropVal = v;
      },
      get(): boolean {
        return roPropVal;
      },
      enumerable: true,
    });
  };
};

class ExampleClass {
  @RoProp() testProp: string;

  // Property 'testProp_ro' does not exist on type 'ExampleClass'.(2339)
  constructor({ testProp, testProp_ro }: ExampleClass) {
    this.testProp = testProp;
    this.testProp_ro = testProp_ro; // Property 'testProp_ro' does not exist on type 'ExampleClass'.(2339)
  }
}

const exampleInst = new ExampleClass({
  testProp: "a test",
  testProp_ro: false, // Argument of type '{ testProp: string; testProp_ro: boolean; }' is not assignable to parameter of type 'ExampleClass'. Object literal may only specify known properties, and 'testProp_ro' does not exist in type 'ExampleClass'.(2345)
});
exampleInst.testProp_ro = true; // Property 'testProp_ro' does not exist on type 'ExampleClass'.(2339)

Playground Link: Trying to create property with decorator

What is the correct way to achieve this task, if possible at all?

typescript

Answer 1

Answer №1

If I had the ability to enhance my class with a utility type?

While it is simple to add properties to types, the challenge lies in ensuring that classes declare these properties to prevent errors.

For example, when extending through implementation:

type Enrich<T extends object> = T & {
  [K in keyof T as `${Exclude<K, symbol>}_enriched`]: boolean;
}

interface ISampleClass {
  sampleProp: string;
}

class SampleClass implements Enrich<ISampleClass> {
  @EnrichedProp() sampleProp: string;

  // Still need to explicitly declare
  sampleProp_enriched: boolean;

  constructor({ sampleProp, sampleProp_enriched }: Enrich<ISampleClass>) {
    this.sampleProp = sampleProp;
    this.sampleProp_enriched = sampleProp_enriched;
  }
}

Encountering an issue arises when attempting to use a base class due to lack of initialization. To resolve this, one can make the property abstract, but then re-declaration of the original property is required:

abstract class SampleClassCore {
  // Error occurs without `abstract`
  @EnrichedProp() abstract sampleProp: string;
}

class SampleClass extends SampleClassCore
  implements Enrich<SampleClassCore> {
  // Still needs explicit declaration  
  sampleProp: string;
  sampleProp_enriched: boolean;

  constructor({ sampleProp, sampleProp_enriched }: Enrich<SampleClassCore>) {
    super();

    this.sampleProp = sampleProp;
    this.sampleProp_enriched = sampleProp_enriched;
  }
}

Exploring mix-in classes also led to confusion and multiple errors.

Perhaps there are some advanced type techniques that have escaped my notice or knowledge.

Answer 2

If I had the ability to enhance my class with a utility type?

While it is simple to add properties to types, the challenge lies in ensuring that classes declare these properties to prevent errors.

For example, when extending through implementation:

type Enrich<T extends object> = T & {
  [K in keyof T as `${Exclude<K, symbol>}_enriched`]: boolean;
}

interface ISampleClass {
  sampleProp: string;
}

class SampleClass implements Enrich<ISampleClass> {
  @EnrichedProp() sampleProp: string;

  // Still need to explicitly declare
  sampleProp_enriched: boolean;

  constructor({ sampleProp, sampleProp_enriched }: Enrich<ISampleClass>) {
    this.sampleProp = sampleProp;
    this.sampleProp_enriched = sampleProp_enriched;
  }
}

Encountering an issue arises when attempting to use a base class due to lack of initialization. To resolve this, one can make the property abstract, but then re-declaration of the original property is required:

abstract class SampleClassCore {
  // Error occurs without `abstract`
  @EnrichedProp() abstract sampleProp: string;
}

class SampleClass extends SampleClassCore
  implements Enrich<SampleClassCore> {
  // Still needs explicit declaration  
  sampleProp: string;
  sampleProp_enriched: boolean;

  constructor({ sampleProp, sampleProp_enriched }: Enrich<SampleClassCore>) {
    super();

    this.sampleProp = sampleProp;
    this.sampleProp_enriched = sampleProp_enriched;
  }
}

Exploring mix-in classes also led to confusion and multiple errors.

Perhaps there are some advanced type techniques that have escaped my notice or knowledge.

Add an additional boolean attribute called `_ro` as a suffix to a property

Answer №1

Similar questions

I'm confused why this particular method within a class is not being inherited by the next class. Rather than seeing the expected extension, I am presented with - [Function (

What is the process for integrating the node-menu package into my project without utilizing the require statement?

Discover the simple steps to include row numbers or serial numbers in an angular2 datagrid

Issue with populating virtual IDs in NestJS mongoose schema containing an array of schemas

"TypeScript error: Arrays in interfaces are found to be undefined and not compatible

The Action-Reducer Mapping feature is encountering a type error when handling multiple types of actions

Error: The argument provided cannot be assigned to a parameter that requires a string type, as it is currently a number

Having trouble implementing conditional rendering for components sourced from a .json/.ts file in Angular

Swapping Out Imports with Window Objects in TypeScript

The return type of a getter is `any` if the object contains a method and is processed by a generic function

Tips for adjusting the angle in SVG shapes

Enhance autocomplete functionality by incorporating a left icon feature for text fields within the autocomplete component

Having trouble getting my specialized pipe (filter) to function properly in Angular 2

Fastest method to invoke a potentially undefined function

How is it possible to access a variable in a function that hasn't been declared until later?

It is impossible to declare a class attribute that has the same type as the class itself, creating a self-referencing hierarchy

Issue with updating Angular list reference when deleting an item

Stuck at loading: Electron encountering issues with Aurelia Navigation Setup

The parameters provided in TypeScript do not align with any signature of the call target

Transmitting form data inputted by the user to a modal that resides in the same component, all without the need for child or parent components or