Is there a way to create a TypeScript property descriptor that can override accessors and still be easily composed with other functionality?
Is there a way to create a TypeScript property descriptor that can override accessors and still be easily composed with other functionality?
The Decorators chapter in the TypeScript handbook suggests that achieving certain functionalities may be challenging or discouraged. According to the handbook...
...there is no current mechanism for describing an instance property when defining members of a prototype, and there isn't a way to observe or modify property initializers. Thus, a property decorator is limited to observing the declaration of a specific property name within a class.
However, my discovery of the `Object.getOwnPropertyDescriptor(target, key)` method seems promising in fulfilling these requirements.
Consider this code snippet as an example:
function decorator(name: string) {
return function (target: any, key: string) {
try {
console.log(`${name}...`);
let localValue = undefined;
let prev = Object.getOwnPropertyDescriptor(target, key);
let setter = function (newVal) {
try {
console.log(`${name} setter(${newVal}) called...`);
if (prev) prev.set(newVal);
localValue = newVal;
} finally {
console.log(`...${name} setter called`);
}
};
let getter = function () {
try {
console.log(`${name} getter(${localValue}) called...`);
if (prev) prev.get();
return localValue;
} finally {
console.log(`...${name} getter called`);
}
};
Object.defineProperty(target, key, {
get: getter,
set: setter,
enumerable: prev == null ? true : prev.enumerable,
configurable: prev == null ? true : prev.configurable
});
} finally {
console.log(`...${name}`);
}
}
}
class MyClass {
@decorator("decorator1")
@decorator("decorator2")
myProperty: string;
}
var mc = new MyClass();
mc.myProperty = "asdf";
console.log(mc.myProperty);
The output generated by the above script showcases the sequence of actions performed by each decorator.
decorator2...
...decorator2
decorator1...
...decorator1
decorator1 setter(asdf) called...
decorator2 setter(asdf) called...
...decorator2 setter called
...decorator1 setter called
decorator1 getter(asdf) called...
decorator2 getter(asdf) called...
...decorator2 getter called
...decorator1 getter called
asdf
I am uncertain whether this approach is optimal. Feedback and insights on this implementation are highly appreciated.
Let me make it clear: I'm brand new to AngularJS and pretty much any Web Technology. I consider myself a novice in the realm of Web Development. I attempted to install AngularJS, and truth be told, after numerous "Mysterious Button Clicks", I might ...
Incorporated within my component is a form that I'm utilizing with reactive form and my intention is to reach this form through my service. For example: const id = MyComponent.id and inside my component: @Output: public id: number = 7; ...
Currently, I am developing a Discord-bot using TypeScript which includes a command to retrieve information from an airport. To do this, users only need to provide the 4-character ICAO code that identifies the specific airport. However, due to potential use ...
Is there a way to pass a variable to the "shadowColor" property in my stylesheet from an array declared in the code above? I keep encountering a "Can't find name" error. Attempting to use a template literal has not resolved the issue. Any assistance w ...
export const useSpecificHook = () => { return useContext(OurContext); }; export const useCustomProcessor = () => { const [notes, setNotes] = useState([]); const removeItems = () => { setItems([]); }; return { clearNotes, } ...
I am attempting to achieve the following: <span *ngIf="heroForm?.dirty"> FOO </span> <form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm"> <div class="form-group"> <label for="name">Name</label& ...
*ngFor="let match of virtual | groupby : 'gameid' I have this code snippet that uses a pipe to group by the 'gameid' field, which consists of numbers like 23342341. Now, I need help sorting this array in ascending order based on the g ...
I need to authenticate a user's jwt token using middleware. This is the middleware I have: const authorized = (req: Request, res: Response, next: NextFunction) => { const token = req.header("token") if(!token){ return res.send("N ...
I attempted to retrieve my location by saving the latitude and longitude, but my declared variable isn't returning anything. Take a look at my code snippet: public device_location: any = {}; constructor(private geolocation: Geolocation) { this.s ...
I'm trying to implement a feature in my Angular component where I can create a list that displays content from other components. My current approach involves declaring an array that contains references to different Angular components: import { Compone ...
I have been attempting to upload a png file using Cypress and here is what I have tried so far: Cypress.Commands.add('upload_image', (fileName, selector) => { return cy.get(selector).then(subject => { return cy.fixture(fileName, &apo ...
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> ...
I am working with ng-dynamic-form (version 6.0.4) and NG Bootstrap in Angular 6. I have a simple question. When a button click event is triggered, I want to change the value in DynamicRadioGroupModel by using the "setValue()" method. However, I am facing ...
Within my VueJS application, I have implemented an API call to retrieve user statistics for display. The process involves a straightforward Java backend and utilizing an $axios get request. Upon initial page load, everything functions as anticipated. Howev ...
Having a tough time with this task. I'm attempting to execute ESM scripts on Node 14 (AWS Lambda) I am working on running this piece of code to convert 3D objects to THREE JSON. This involves using the command node -r esm fbx2three.js model.fbx. I ...
I'm currently tackling a project involving typescript & next.js, and I've run into an issue where function argument types aren't being checked as expected. Below is a snippet of code that illustrates the problem. Despite my expectation ...
Is there a way to implement SCSS that is dependent on the user's browser language? When I checked, I found the browser language specified in <html lang = "de"> and in the CSS code as html[Attributes Style] {-webkit-locale: "en&quo ...
I'm brand new to TypeScript. I decided to use WebStorm because I'm familiar with JetBrains tools. In other programming languages, I'm used to having a workflow that includes some kind of dependency management system like Maven, which allows ...
For my project, I am utilizing Angular Material's table to present data in a tabular format. However, due to a new requirement, I now need to enable in-line editing for the last 2 columns alongside highlighting another column when the user clicks on t ...
In our system, we have a state that contains an array of objects: interface Product { id: number; status: boolean; color: string; price: number; } const productList: Product[] = [ { id: 1, status: true, color: 'yellow', ...