让我们来看看 InversifyJS 在 TypeScript 下的一些基本示例:
第一步:声明您的接口和类型
我们的目的是让开发者的代码能够遵循依赖倒置。这意味着我们应当“化具体为抽象”。首先我们应该声明一些(抽象)接口
// 文件📃 interfaces.ts
export interface Warrior {
fight(): string;
sneak(): string;
}
export interface Weapon {
hit(): string;
}
export interface ThrowableWeapon {
throw(): string;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
InversifyJS 需要在运行时(runtime)使用这些类型(type)作为标识符。这里我们使用了Symbol,但您也可以使用类或字符串。
// 文件📃 types.ts
const TYPES = {
Warrior: Symbol.for("Warrior"),
Weapon: Symbol.for("Weapon"),
ThrowableWeapon: Symbol.for("ThrowableWeapon")
};
export { TYPES };
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
注意:我们虽然推荐使用 Symbol 不过 InversifyJS 也是支持类和字符串的。
第二步:用 @injectable 和 @inject 装饰器声明依赖
让我们继续声明一些(具体)类。这些类是我们刚才所声明的接口的实现。所有的类都必须使用 @injectable 装饰器修饰。
当一个类依赖于依赖接口时,我们还需要使用 @inject 装饰器来定义一个在运行时可用的接口标识符。在这个例子中,我们使用了Symbol.for('weapon')
和Symbol.for('ThrowableWeapon')
作为运行时标识符
// 文件📃 entities.ts
@injectable()
class Katana implements Weapon {
public hit() {
return "cut!";
}
}
@injectable()
class Shuriken implements ThrowableWeapon {
public throw() {
return "hit!";
}
}
@injectable()
class Ninja implements Warrior {
private _katana: Weapon;
private _shuriken: ThrowableWeapon;
public constructor(
@inject(TYPES.Weapon) katana: Weapon,
@inject(TYPES.ThrowableWeapon) shuriken: ThrowableWeapon
) {
this._katana = katana;
this._shuriken = shuriken;
}
public fight() { return this._katana.hit(); }
public sneak() { return this._shuriken.throw(); }
}
export { Ninja, Katana, Shuriken };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
如果觉得还不错,您可以使用属性注入来代替构造函数注入,这样您就不必声明类构造函数了:
@injectable()
class Ninja implements Warrior {
@inject(TYPES.Weapon) private _katana: Weapon;
@inject(TYPES.ThrowableWeapon) private _shuriken: ThrowableWeapon;
public fight() { return this._katana.hit(); }
public sneak() { return this._shuriken.throw(); }
}
1
2
3
4
5
6
7
2
3
4
5
6
7
第三步:创建并配置一个容器
这里我们建议在一个名为inversify.config.ts
中执行该操作。这是唯一存在耦合的地方。在应用的其他部分中,不应该再存在任何对其他类的引用了。
// 文件📃 inversify.config.ts
import { Container } from "inversify";
import { TYPES } from "./types";
import { Warrior, Weapon, ThrowableWeapon } from "./interfaces";
import { Ninja, Katana, Shuriken } from "./entities";
const myContainer = new Container();
myContainer.bind<Warrior>(TYPES.Warrior).to(Ninja);
myContainer.bind<Weapon>(TYPES.Weapon).to(Katana);
myContainer.bind<ThrowableWeapon>(TYPES.ThrowableWeapon).to(Shuriken);
export { myContainer };
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
第四步:处理依赖关系
您可以使用容器类中的泛型方法 get<T>
来处理依赖关系。请注意,您应该仅在合成根中执行此类操作,从而避免服务定位器模式反转
import { myContainer } from "./inversify.config";
import { TYPES } from "./types";
import { Warrior } from "./interfaces";
const ninja = myContainer.get<Warrior>(TYPES.Warrior);
expect(ninja.fight()).eql("cut!"); // true
expect(ninja.sneak()).eql("hit!"); // true
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
于是我们就能够看到katana(太刀)
和shuriken(手里剑)
成功注入到Ninja(忍者)
这个类当中了。
InversifyJS 支持 ES5 和 ES6 并且并不一定要在 TypeScript 环境中。这里可以查看 JavaScript 的示例。