reactjs - 使用 tsyringe 与 TypeScript 反应以进行依赖注入
问题描述
我目前在使用 React TypeScript 项目时遇到问题。
我创建了我的项目npx create-react-app my-app --template typescript
。
我最近为依赖注入添加了 tsyringe,并试图为 apiService 实现它。按照自述文件(https://github.com/microsoft/tsyringe#injecting-primitive-values-named-injection)添加原始值后,我遇到了障碍。我已经将实验性装饰器和发射装饰器元数据添加到我的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 配置。
网络服务.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{}
解决方案
React-Scripts 管理与项目相关的许多配置。在许多情况下,这很好,实际上是一个不错的功能。但是,因为 React-Scripts 使用 Babel 作为其开发环境并且不公开配置。
您必须运行 npm run eject
以公开配置。
请注意,这是一种单向操作,无法撤消。就个人而言,我更喜欢对我的配置进行更多控制。
在此之后,您可以在新创建的配置文件夹中编辑webpack.config.js 。
在dev-environment中找到与babel-loader相关的部分并添加到plugins 数组中。 'babel-plugin-transform-typescript-metadata'
推荐阅读
- java - 总和存储在哪里?
- java - 如何为在一个模拟器中作为 RandomWaypoint 移动运行的节点组设置不同的区域
- django - 如何获取当前用户的 slug?
- javascript - 我可以在渲染时使用捆绑的 Javascript 文件操作 popup.html DOM 吗?
- python - 使用烧瓶中sqlalchemy的create_engine创建的引擎连接()时出现内存错误
- asp.net-mvc - 为什么 .NET Core Web API 调用 AddMVC() 和 UseMVC()?
- jquery - 如何仅显示最近的 i 元素?
- javascript - 显示带有数据信息的标记弹出窗口
- python - Pandas Dataframe 的困难嵌套字典
- java - 如何管理自定义处理器所需的外部 jar 依赖项