如何使tsyringe (dep注入库)解析具有依赖关系的类？

Question

显然，我误解了TSyringe应该如何解决带有依赖关系的类。

我创造了一个最小的复制。在我的index.tsx中，我按照文档中的指示进行操作，并导入reflect-metadata。如果我注入一个没有依赖项的singleton类，则此示例有效：

// index.tsx
import "reflect-metadata";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />,  document.getElementById('root'));

一个单例类：

// _A.ts
import {inject, singleton} from 'tsyringe';

@singleton()
export class A {    
    get_msg() {
        return "Worked!";
    }
}

以及使用它的组件：

// App.tsx
import React from 'react';
import './App.css';
import {container} from "tsyringe";
import {A} from "./_A";

interface Props {
  a?: A
}

function App({a = container.resolve(A)}: Props) {
  return (
    <div className="App">
          {a.get_msg()}
    </div>
  );
}

export default App;

当我运行这个应用程序时，它已经成功了！文本按预期打印。

但是，如果我创建了第二个名为B的单例：

// _B.ts
import {singleton} from 'tsyringe';

@singleton()
export class B {
    get_msg() {
        return "Worked!";
    }
}

然后将B注入A以获取消息：

// _A.ts
import {inject, singleton} from 'tsyringe';
import {B} from "./_B";

@singleton()
export class _A {
    constructor(private b: B) {
    }

    get_msg() {
        return this.b.get_msg();
    }
}

那么它在Uncaught Error: TypeInfo not known for "A"中失败了

我有：

"experimentalDecorators": true,
"emitDecoratorMetadata": true,

在我的tsconfig.ts上，正如他们在自述中所指出的那样。

注射器不应该自动解析B，将B注入A，然后注入A到我的应用程序组件中，这样我就可以打印消息了吗？

我遗漏了什么？

Answer 1

好吧，所以我想明白了。

为了保留类型记录元数据并允许反射元数据完成其任务，我们需要向项目中添加babel-plugin-transform-typescript-metadata。

然而，为了自定义创建-反应-应用程序，您需要craco库。有几个存在，但craco是我唯一可以支持CRA4.x的。您不能使用最新版本(CRA5.0)，因为这些库都不支持它。

所以：

1-安装Craco并设置它。

2-将babel-plugin-transform-typescript-metadata安装为dev依赖项

3-向项目中添加一个craco.config.js文件以加载此插件：

module.exports = function ({ env: _env }) {
    return {
        babel: {
            plugins: [
                "babel-plugin-transform-typescript-metadata"
            ]
        },
    };
};

4-确保更新您的package.json以便使用craco启动，以便进行配置覆盖：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

就这样，现在起作用了。希望它能帮上忙。