什么是依赖注入？
依赖注入（DI）是一种设计模式，它可以帮助我们解耦组件之间的依赖关系。在传统的编程模式下，组件之间的关系往往是紧耦合的，意味着它们相互依赖并难以修改。而在 DI 模式下，我们可以将组件的依赖关系委托给第三方对象，使得组件之间的耦合度降低，可维护性增强。
TypeScript 中的装饰器
在 TypeScript 中，我们可以使用装饰器来实现依赖注入。装饰器是一种特殊的语法，它可以用来扩展类、方法、属性等等。我们可以使用装饰器来表示一个类或函数需要注入哪些依赖项。
下面是一个简单的例子，使用装饰器来注入依赖项：
class Foo {
bar: Bar;
constructor(@Inject('Bar') bar: Bar) {
this.bar = bar;
}
}
const foo = new Foo();在上面的例子中，我们使用 @Inject('Bar') 装饰器来表示 Foo 类依赖于 Bar 类，并且需要将 Bar 的实例注入到 Foo 类的构造函数中。此时，我们需要一个可以提供 Bar 实例的对象，通常我们可以使用类似于 DI 容器的工具来实现这个目标。
如何进行依赖注入？
当前，我们可以使用 TypeScript 的官方依赖注入工具 @angular/core 来实现依赖注入。下面是使用 @angular/core 工具来实现依赖注入的代码示例：
首先，我们需要定义一个服务提供者：
import { Injectable } from '@angular/core';
@Injectable()
export class Bar {
func() {
console.log('Bar');
}
}在上面的代码中，我们使用 @Injectable() 装饰器来表示这是一个服务提供者，并且可以被注入到其他的类中。而 Bar 类就是需要注入的类，它需要使用 Bar 的实例来完成一些逻辑。
接下来，我们需要定义一个消费者：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --- - ---- ----------------
------------
--------- -----------
--------- -
------ --------
--
--
------ ----- ------------ -
------------------------ ------- ---- ---- --
---------- -
---------------- -- -- -----
-
-在上面的代码中，我们使用 @Component() 装饰器来表示这是一个组件，并且需要注入 Bar 类的实例。在组件的构造函数中，我们使用 @Inject(Bar) 装饰器来表示需要注入 Bar 类的实例。这样，在组件初始化完成后，我们就可以正常地使用 Bar 的实例来完成一些逻辑。
结论
在 TypeScript 中使用装饰器进行依赖注入，可以帮助我们解耦组件之间的依赖关系，提高代码的可维护性。通过使用 @angular/core 工具，我们可以很容易地实现依赖注入，并且提高开发效率。在实际开发中，我们应该熟练掌握装饰器的使用方法，以便更好地完成任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674f20b3e884a3e30f2c462d