Как реализовать DI как в ангуляре?

Question

[historydev]

Интересует @Injectable()

@Injectable() class A { }
class B { constructor(private a: A) {} }

Следом тебе не нужно передавать new A(), за тебя это делает angular, но как и где?

В модуль мы передаём этот сервис, что происходит дальше?

Answer 1

[Дмитрий Еремин]

а вам надо DI реализовать самому или вы его в проекте своем хотите..?

https://blog.logrocket.com/top-five-typescript-dep...

Comments

[historydev]

И то, и другое

Answer 2

[Дмитрий Беляев]

Интересует @Injectable()

Эта штука называется "декоратор".
Декоратор - это по сути просто функция, которая принимает на вход другую функцию или класс или метод класса или свойство класса и может его подменить или модифицировать.
То есть Injectable - это просто функция, которая возвращает другую функцию, в которую передается ссылка на класс A, и она может сделать с ним что угодно. Например в данном случае она просто запоминает этот класс в DI контейнере.
Надо учитывать, что декораторы являются экспериментальной фичей TypeScript, их нужно включить в tsconfig, а так же никто не гарантирует, что декораторы всегда будут работать так как работают сейчас, тем более декораторы из TypeScript конфликтуют с декораторами из пропозала в ECMAScript (стандарт JS).
Подробнее про декораторы можно почитать тут: https://www.typescriptlang.org/docs/handbook/decor...

Ну а про устройство Dependency Injection лучше нагуглить какую-либо статью и почитать, ибо в рамках ответа не распишешь всех тонкостей.
Но если вкратце, нам нужен некоторый контейнер, в котором мы отобразим все injectable сущности и их зависимости, а в последствии сможем их оттуда извлекать по запросу, в идеале по типу данных (хотя в TS с этим туго, ибо типы живут только в compiletime), но можно и по классу (которые в TS представлены и типом и runtime значением).

Comments

[historydev]

Я знаю что такое декоратор, читал доки и статьи. У меня довольно специфичная задача, мне нужно при компиляции тс внедрять не только классы, а допустим json схемы в местах, где указан соответствующий интерфейс

[Дмитрий Беляев]

Владимир, тогда, я думаю, Вам лучше посмотреть в сторону transformer api в TypeScript
https://habr.com/ru/post/457770/
https://viktorlove.medium.com/typescript-transform...
https://www.npmjs.com/package/ttypescript

Answer 3

[Aetae]

Во первых DI в js\ts - полная бессмысленная хуита. Просто импортируй по-человечески что надо и используй.

Но если очень хочется - это сложно. Механизм DI не предусмотрен в парадигме языка. Тебе придётся использовать свою особую надстройку над системой сборки, которая найдёт в файлах подобные DI и заменит их на обычные человеческие импорты. Сделать можно это тремя основными способами: как трансформермер для typescript, как трансформермер для babel и как кастомный loader для webpack. Во всех случаях это включает в себя работу с AST и кодогенерацию на этапе сборки.

Впрочем, в залежах npm наверняка можно нарыть что-то готовое, чтоб не писать самому.

Comments

[historydev]

В гугле есть инфа старая, что кто-то выгрузил di из angular/core в пакет, мне для другой задачи придётся юзать один из методов которые вы перечислили.

Могли бы вы подсказать с чего начать, если есть задача допустим подменять переменные с присвоенным интерфейсом на json схемы?

[Aetae]

Владимир,
ts - https://github.com/nonara/ts-patch#recommended-reading
babel - https://github.com/jamiebuilds/babel-handbook/blob...
webpack - https://webpack.js.org/contribute/writing-a-loader/