Why does an error about an 'Invalid property descriptor' occur when utilizing a custom decorator on a get accessor?

Whenever I apply a decorator to a get accessor in my TypeScript code, everything compiles fine but at runtime I consistently encounter the error message:

Uncaught TypeError: Invalid property descriptor. Cannot specify both accessors and a value or writable attribute

What causes this issue and how can I resolve it? Just to clarify, I am using only a getter and not a setter.

Here is an example of my code:

class ThingBox {
    private things = [1,2,3,4,5]

    @MyDecorator
    get totalTings(): number { return this.things.length }
}

Example Playground Link

Answer №1

An issue has been identified with your get method and value in the descriptor, as both cannot be used simultaneously (you must choose between accessors or value). To resolve this, you should modify the get method within the decorator instead of using value.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Solving automatically generated TypeScript MongoDB types for GraphQL results

Utilizing the typescript-mongodb plugin along with graphql-codegen to automatically generate Typescript types enables easy data retrieval from MongoDB and GraphQL output via Node. The initial input schema in GraphQL format appears as follows: type User @ ...

Are there any drawbacks to exclusively opting for BehaviorSubject over Subject in RxJs/Angular?

I've been diving into a project where BehaviorSubject is heavily utilized throughout the codebase. It seems to be used even when there isn't an initial state, or when there's a need for a value outside of the first explicit "onNext/emit". I ...

Type `MockObject` as "{[key: string]: Information}|undefined" in Typescript

Hello, I've encountered this type mentioned in the title {[id: string]: Details}|null and the Details interface is defined as follows: export interface Details { id: number; name: string; info: string; } I'm wondering how I can mock this. ...

The issue with Rxjs forkJoin not being triggered within an Angular Route Guard

I developed a user permission service that retrieves permissions from the server for a specific user. Additionally, I constructed a route guard that utilizes this service to validate whether the user possesses all the permissions specified in the route. To ...

Unable to instantiate a Vue reference with a potential null type

When working in Vue v3, I encountered a situation where I needed to create a ref with a type that could possibly be null. This specific scenario in my app involves data that starts off as null and then gets populated after loading completes. Just to illus ...

Developing a MEAN-based calendar application that is constantly monitoring for updates

I am considering developing a calendar web app to enhance my web development skills. After carefully planning the structure and technologies, I have decided to use the MEAN stack. However, I have encountered a challenge: I want the angular front-end to a ...

Leveraging Angular directives for shared functionality

I am faced with the challenge of multiple components sharing common logic, and I am looking for a way to centralize this logic in one file to avoid duplicating code in each component. One solution that comes to mind is using a directive. Do you think this ...

Leverage Angular's interpolation feature to display data in tippy-content

Currently, I am working on an Angular project and successfully implemented tippy.js, which you can find working perfectly at this link: . However, the issue arises when I attempt to populate the tooltips with JSON data using Angular's interpolation. ...

Modify the height of React Cards without implementing collapse functionality

Currently, I am in the process of developing a web interface that displays various processes and services. The information is presented in React cards that support expand/collapse functionality. However, I am facing an issue where expanding one card affect ...

Efficiently organizing items within a list on Ionic

Currently, I have an ion-list structured as follows: <ion-list *ngFor = "let chat of Chats"> <ion-item (click) = "openChat(chat.id)"> <ion-label> <h2> {{chat.username}} </h2> ...

Setting a value to an optional property of an inherited type is a simple task that can

export interface CgiConfiguration { name: string, value?: string } export interface CgiConfigurationsMap { [configurationName: string]: CgiConfiguration } const createCGI = <T extends CgiConfigurationsMap>(configurations: T) => configur ...

Why am I not receiving recommendations for the data types of a function parameter when there are multiple variations available?

I'm currently navigating a JavaScript codebase that utilizes Sequelize models with documented types specified in TypeScript declaration files (.d.ts). Within my code, I am utilizing model.update() to modify certain properties on the object: To replic ...

Stylishly incorporating components in higher-order components

Trying to enhance my component wrapper with styles using a higher order component has led to Typescript flagging an error with ComponentWithAdddedColors. type Props = { bg?: string; }; function withColors<TProps>( Component: React.ComponentType ...

Encountering Gyp Errors During NPM Install in an Angular 5 Project

I encountered some gyp errors when trying to run "npm install" in my Angular 5 project. I'm not sure why these errors are occurring; perhaps someone here has seen similar issues before. https://i.stack.imgur.com/mMRO4.png I attempted various trouble ...

Exploration of narrowing union types in React with TypeScript

import { Chip } from "@mui/material"; type CourseFilterChipsRangeType = { labels: { from: string; to: string }; values: { from: number; to: number }; toggler: (from: number, to: number) => void; }; type CourseFilterChipsCheckType = { ...

A comprehensive guide on sending Expo push notifications to the iOS simulator in a React Native application

I am encountering a challenge with my react native app that utilizes the expo-notifications library for sending notifications to users on iOS and android devices. The issue lies in the notification functionality specifically on the iOS simulator. While I h ...

Angular 12's BehaviorSubject should have been empty object array, but it unexpectedly returns undefined

Exploring different scenarios with a livesearch functionality: No user input (observable = undefined) No results found (observable = empty array) Results found (observable = non-empty array) The issue lies in how my behavior subject interprets an empty a ...

Navigating the use of a getter property key within a generic method signature

What I want to do is create a class with descendants that have a method signature that can adapt based on a compile-time fixed property, which can also be overridden. Here's an example: class Parent { public get config() { return { foo: & ...

Using arrow functions with CRM WebApi version 9 and typescript is not supported

I am currently in the process of upgrading the JavaScript code to the latest V9 version of Dynamics 365, and I am facing an issue where I cannot utilize arrow functions when working with Xrm.WebApi (also transitioning from JavaScript to TypeScript). For i ...

Check the connectivity of Angular 2 application

I currently have an Angular 2 application running on one server, and a Java application on another server. My goal is to be able to ping the Angular application from the Java application in order to check its status (whether it is up or down). Would it b ...