设置开发环境

TypeScript

由于 redi 的 API 使用 TypeScript 装饰器语法，因此你需要在 tsconfig.json 中启用 experimentalDecorators。

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

💡

特别注意：你需要保证是由 TypeScript 对你的源码进行翻译而不是 Babel，因为 Babel 对与装饰器的支持与 TypeScript 并不相同。请查看右边的文档 @babel/plugin-proposal-decorators 并在你的配置里启用 legacy 选项。或者你也可以不通过转译工具使用 redi。

脚手架工具

自己配置一套开发工具可能相当麻烦。为了让大家能够尽快开始享受用依赖注入的乐趣，我们准备了脚手架工具 redi-starter。

它提供了下列功能：

引入了 redi 并进行了正确的 TypeScript 配置
集成 Prettier / ESLint / webpack / Jest
支持按照不同的运行平台进行代码加载，例如手机上不会加载 PcPlatformService 的代码

使用

只需要将这个项目 clone 到本地：

git clone https://github.com/wzhudev/redi-starter.git

如果你不想保留 Git 历史，可以使用 degit 工具：

npx degit https://github.com/wzhudev/redi-starter

VSCode Snippets

你可以使用如下 snippets ，声明类的依赖时会更轻松：

{
  "Redi Injection Identifier": {
    "prefix": ["@I"],
    "body": [
      "@I${1:identifier} private readonly _${2:name}: I${1:identifier},"
    ],
    "description": "Inject an identifier with Redi."
  },
  "Redi Injection": {
    "prefix": ["@In"],
    "body": [
      "@Inject(${1:identifier}) private readonly _${2:name}: ${1:identifier},"
    ],
    "description": "Inject a class item with Redi."
  }
}

不使用装饰器语法

即使你没有使用 TypeScript 或者 babel，仍然可以使用 redi。

redi 对于 TypeScript 的语法依赖仅限于装饰器，而装饰器仅被用于在类上声明依赖关系。作为替代，你可以使用 setDependencies：

在 TypeScript 中的这样一段代码：

class MapService {
  constructor(
    @SkipSelf()
    @ISatelliteService
    private readonly satellite: ISatelliteService,
  ) {}
}

等价于 JavaScript 中这样一段代码：

class MapService {
  constructor(satellite) {
    this.satellite = satellite;
  }
}
 
setDependencies(MapService, [[new SkipSelf(), ISatelliteService]]);

可以看到，此时声明依赖的语法和对工厂函数声明依赖的语法是一致的。

在 React 中使用问题排查