Reactjs 使用tsyringe对TypeScript进行依赖项注入

我目前在React TypeScript项目中遇到问题

我用

npx create react app my app--template typescript

创建了我的项目

我最近为依赖注入添加了tsyringe，并试图为一个API服务实现它。在遵循readme（）添加基本值之后，我遇到了一个问题。我已经向我的

tsconfig.json

文件添加了experimentalDecorators和emitDecoratorMetadata，但没有成功

我遇到的错误实际错误是：

./src/ts/utils/NetworkService.ts 9:14
Module parse failed: Unexpected character '@' (9:14)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| let NetworkService = (_dec = singleton(), _dec(_class = (_temp = class NetworkService {
>   constructor(@inject('SpecialString')
|   value) {
|     this.str = void 0;

我相当肯定这个问题是由Babel引起的，但是我用npm create react app——template typescript创建了这个问题，并且似乎没有访问Babel配置的权限

NetworkService.ts

调用方法

在index.ts中注册类

container.register('SpecialString', {useValue: 'https://myme.test'});


@registry([
    { token: NetworkService, useClass: NetworkService },
])
class RegisterService{}

---

React脚本管理与项目相关的许多配置。在很多情况下，这是一个不错的特性。但是，因为React脚本使用Babel作为其开发环境，并且不公开配置

您必须运行

npm run eject

以公开配置

请注意，这是一个单向操作，无法撤消。 就个人而言，我更喜欢对配置进行更多控制

之后，您可以编辑新创建的配置文件夹中的webpack.config.js

在开发环境中查找与babel加载程序相关的部分，并将

添加到插件数组中

bob() 
{
    const inst = container.resolve(NetworkService);
}

container.register('SpecialString', {useValue: 'https://myme.test'});


@registry([
    { token: NetworkService, useClass: NetworkService },
])
class RegisterService{}