5편 - Reactant 의 Dependency Injection 알아보기

 

Dependency Injection

Reactant는 TypeScript (JavaScript 지원)를 지원하는 의존성 주입을 제공합니다. 의존성 주입 메타 데이터를 기록하기 위해 Reflect.metadata뿐만 아니라 TypeScript에 근거 experimentalDecorators 기능을 권장합니다.

데코레이터의 실험적인 지원을 활성화하려면 tsconfig.json 명령 줄 또는 experimentalDecorators 컴파일러 옵션을 활성화해야합니다.

 

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

 

@injectable()

@injectable() 를 사용하면, Reactant을 사용하여 현재 모듈을 주입 가능한 모듈로 바꿉니다.

 

@injectable()
class Foo {}

@injectable()
class Bar {
  constructor(public foo: Foo) {}
}

 

다른 모듈에 의존하지 않는 경우 실제로는 현재 모듈의 @injectable() 한정자를 생략 할 수 있습니다. Reactant 그것을 주입 가능한 모듈로 변환하고 createApp 실행시 자동으로 주입합니다.

 

@injectable() for JavaScript

 

JavaScript에는 TypeScript 데코레이터와 같은 의존성 주입의 처리를 지원하는 뛰어난 기능이 없기 때문에 JavaScript로 Reactant 의존성 주입을 사용하려면 @ injectable() 와 의존성 주입의 정보를 사용해야 사용할 수 있습니다.

 

@injectable()
class Foo {}

@injectable({
  deps: [Foo],
})
class Bar {
  constructor(foo) {}
}

 

@inject()

@inject ()를 사용하여 해당 식별자 매개 변수를 의존성 주입 관리로 사용합니다.

interface Bar {
  text: string
}

@injectable()
class Foo {
  constructor(@inject('Bar') public bar: Bar) {}

  get text() {
    return this.bar.text;
  }
}

JavaScript 에선 지원하지 않습니다. 그래서 아래와 같이 구현해야 합니다.

@injectable({
  deps: [{ provide: 'Bar' }],
})
class Foo {
  constructor(bar) {
    this.bar = bar;
  }

  get text() {
    return this.bar.text;
  }
}

 

@optional()

 

옵션 모듈을 삽입하는 데 사용할 수있는 종속성 식별자와 함께 optional ()를 사용합니다.

종속성 식별자로서 자기 자신만 필요한 경우 @optional(Bar) public bar?: Bar to @optional() public bar?: Bar 처럼 단축 할 수 있습니다.

 

interface Bar {
  text: string
}

@injectable()
class Foo {
  constructor(@optional('Bar') public bar?: Bar) {}

  get text() {
    return this.bar?.text;
  }
}

 

이는 javascript 지원하지 않으므로 아래와 같이 구현합니다.

@injectable({
  deps: [{ provide: 'Bar', optional: true }],
})
class Foo {
  constructor(bar) {
    this.bar = bar;
  }

  get text() {
    return this.bar === null || this.bar === undefined ? undefined : this.bar.text;
  }
}