tsyringe container.resolve creates a new instance on call in custom decorator
Question
I'm trying to create a custom decorator for tsyringe to inject through properties.
My code:
import '@abraham/reflection';
import {container} from 'tsyringe';
/**
* Inject class through property
*
* @param targetClass
* @returns PropertyDecorator
*/
export const inject = (targetClass: new (...args: any[]) => any): PropertyDecorator => {
if (!targetClass || targetClass === undefined) {
throw new Error(`${targetClass} class is undefined`);
}
return (target: any, propertyKey: string | symbol): PropertyDecorator => {
return Object.defineProperty(target, propertyKey, {
get: () => container.resolve((targetClass))
});
};
};
Service
import { injectable } from 'tsyringe';
@injectable()
export class Test {
constructor() {
console.log('hi from test');
}
a(): void {
console.log('a');
}
b(): void {
console.log('b');
}
}
Calling Class
import React, { ReactElement } from 'react';
import Head from 'next/head';
import { Test } from '../_service/test.service';
import { inject } from '../decorators/inject';
/**
* @class Home
*/
export default class Home extends React.Component {
@inject(Test)
private readonly test!: Test;
/**
* Render Home
*
* @returns ReactElement<any>
*/
render(): ReactElement<any> {
this.test.a();
this.test.b();
return (
<div>
<Head>
<title>home</title>
</Head>
<main>
<p>test</p>
</main>
</div>
);
}
}
Console Output
hi from test
a
hi from test
b
Current behavior: Everytime I call a method of my injected class, my constructor gets called again. So that means my class gets new initialized on every new call.
When I use following code everything seems to be working
import React, { ReactElement } from 'react';
import Head from 'next/head';
import { Test } from '../_service/test.service';
import { container } from 'tsyringe';
/**
* @class Home
*/
export default class Home extends React.Component {
private readonly test: Test = container.resolve(Test);
/**
* Render Home
*
* @returns ReactElement<any>
*/
render(): ReactElement<any> {
this.test.a();
this.test.b();
return (
<div>
<Head>
<title>home</title>
</Head>
<main>
<p>test</p>
</main>
</div>
);
}
}
Console Output
hi from test
a
b
Any reasons why this is happening?
1 answers
solution1
0 ACCPTED 2020-12-22 07:17:28
After a hour of sleep and a lot of coffee with some research.... I found the solution!
I was trying to manipulate the getter instead of setting the property value. That resulted to the following code:
/**
* Inject dependency through property
*
* @param targetClass
* @returns PropertyDecorator
*/
export const inject = (targetClass: InjectionToken): PropertyDecorator => {
if (!targetClass || targetClass === undefined) {
throw new Error(`${targetClass} class is undefined`);
}
return (target: any, propertyKey: string | symbol): PropertyDescriptor | undefined => {
if (!Reflect.deleteProperty(target, propertyKey)) {
throw new Error(`Could not delete property ${String(propertyKey)} in class ${target.constructor.name}`);
}
const options: PropertyDescriptor = {
value: container.resolve(targetClass)
};
if (!Reflect.defineProperty(target, propertyKey, options)) {
throw new Error(`Could not define ${String(propertyKey)} property in class ${targetClass.toString()}`);
}
return Reflect.getOwnPropertyDescriptor(target, propertyKey);
};
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.