使用 tsyringe 与 TypeScript 反应以进行依赖注入答案

【问题标题】：React with TypeScript using tsyringe for dependency injection使用 tsyringe 与 TypeScript 反应以进行依赖注入
【发布时间】：2021-08-07 07:54:32
【问题描述】：

我目前在使用 React TypeScript 项目时遇到问题。

我使用npx create-react-app my-app --template typescript 创建了我的项目。

我最近为依赖注入添加了 tsyringe，并试图为 apiService 实现它。在按照自述文件（https://github.com/microsoft/tsyringe#injecting-primitive-values-named-injection）添加原始值之后，我遇到了一个障碍。我已经将 experimentalDecorators 和 emitDecoratorMetadata 添加到我的 tsconfig.json 文件中，但没有成功。

我遇到的实际错误是：

./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

@singleton()
export default class NetworkService
{

    private str: string;
    constructor(@inject('SpecialString') value: string) {
        this.str = value;
    }
}

调用方法

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

在 index.ts 中注册类

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


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

【问题讨论】：

标签： reactjs typescript rest web tsyringe

【解决方案1】：

React-Scripts 管理许多与项目相关的配置。在许多情况下，这很好，实际上是一个不错的功能。然而，因为 React-Scripts 使用 Babel 作为它的开发环境并且不暴露配置。

您必须运行 npm run eject 以公开配置。

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

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

在dev-environment中找到与babel-loader相关的部分并添加'babel-plugin-transform-typescript-metadata'到 plugins 数组。

【讨论】：

【解决方案2】：

您可以使用“覆盖”某些参数的库来代替弹出。

我用过 craco：https://www.npmjs.com/package/@craco/craco

【讨论】：