在前端开发中，我们经常需要使用依赖注入来管理代码之间的关系。而在 TypeScript 中，由于其强类型特性，我们可以使用装饰器来实现依赖注入。而 @ts-ioc/annotations 就提供了这样的功能。
什么是 @ts-ioc/annotations
@ts-ioc/annotations 是一个基于 TypeScript 的依赖注入库，它提供了一套装饰器，可以让我们在 TypeScript 中轻松实现依赖注入。
安装 @ts-ioc/annotations
我们可以通过 npm 安装 @ts-ioc/annotations：
npm install @ts-ioc/annotations
使用 @ts-ioc/annotations
1. 定义服务
在使用 @ts-ioc/annotations 时，我们需要先定义服务。一个服务可以看做是一个类，需要提供一个标识符，以便其他地方可以识别出它的身份。我们可以使用 @Service 装饰器来定义一个服务：
import {Service} from '@ts-ioc/annotations';
@Service('myService')
export class MyService {
//...
}这里我们定义了一个名为 MyService 的服务，并使用标识符 'myService' 来唯一识别它。
2. 注入服务
在需要使用服务的地方，我们可以使用 @Inject 装饰器来注入服务：
import {Inject} from '@ts-ioc/annotations';
import {MyService} from './my-service';
export class MyComponent {
@Inject() myService?: MyService;
//...
}在这个例子中，我们使用 @Inject 装饰器来注入 MyService。由于 TypeScript 会自动识别出 MyService 的类型，因此我们不需要指定其类型。
注：需要注意的是，@Inject 装饰器默认会使用服务的标识符来查找对应的服务。
3. 注册服务
在使用 @ts-ioc/annotations 时，我们需要先将服务注册到容器中。我们可以使用 @ContainerConfig 装饰器来定义一个该模块的容器，并使用 register 方法来注册服务：
-- -------------------- ---- -------
------ ----------- ---------------- ---- ---------------
------ ----------- ---- ---------------
------------------
---------- -
---------
-
--
------ ----- --------- -
------ --------- - --- ------------
-在这个例子中，我们定义了一个名为 AppModule 的容器，并将 MyService 注册到了容器中。我们还需要在 AppModule 中创建一个 container 实例。
4. 获取服务
在需要使用服务的地方，我们可以通过容器来获取该服务：
import {Container} from '@ts-ioc/core';
import {MyComponent} from './my-component';
import {AppModule} from './app-module';
const container = AppModule.container;
const myComponent = container.get(MyComponent);在这个例子中，我们通过 AppModule.container 实例来获取 MyComponent。在获取 MyComponent 时，@ts-ioc/annotations 会自动查找其依赖的服务，并将它们注入到 MyComponent 中。
5. 生命周期钩子
在使用 @ts-ioc/annotations 时，我们可以使用 @OnInit 和 @OnDestroy 装饰器来定义组件的生命周期钩子：
-- -------------------- ---- -------
------ --------- ------- ---------- ---- ----------------------
---------------------
------ ----- --------- ---------- ------- --------- -
--------- ---- -
-----
-
------------ ---- -
-----
-
-在这个例子中，我们将 MyService 定义为 OnInit 和 OnDestroy 的实现类，并在 onInit 和 onDestroy 中分别定义了组件的初始化和销毁逻辑。
示例
-- -------------------- ---- -------
------ --------- ------- ---- ----------------------
--------------------
------ ----- --------------- -
--------- ------ - --------
----------- -------- ---- -
------------------------------ ----------
-
-
-----------------------
------ ----- ----------- -
------------------- ----------------- ----------------
----------- -------- ---- -
----------------------------------
-
-在这个例子中，我们定义了一个 GreetingService，用来实现打招呼的逻辑。GreetingService 提供了一个 greet 方法，用来输出打招呼的内容。
我们还定义了一个 MyComponent，用来调用 GreetingService 中提供的 greet 方法，并输出打招呼的内容。在 MyComponent 中，我们使用了 @Inject('greeting') 来注入 GreetingService。
在使用时，我们可以这样创建一个容器实例，然后获取 MyComponent 并调用它的 greet 方法：
import {Container} from '@ts-ioc/core';
import {MyComponent} from './my-component';
const container = new Container();
const myComponent = container.get(MyComponent);
myComponent.greet('TypeScript');
//输出：Hello, TypeScript结论
通过本篇文章的介绍，我们了解了 @ts-ioc/annotations 库的使用方法。该库可以帮助我们实现依赖注入功能，使得我们的代码更加模块化和可复用。如果你在 TypeScript 开发中需要使用依赖注入，@ts-ioc/annotations 库是一个值得尝试的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d09270238225a0