javascript - 使用 JavaScript 和 TypeScript 进行 Angular 1 依赖注入(inject)

Question

我正在尝试弄清楚如何在现有的 Angular 1.5 应用程序中使用 TypeScript。我不知道如何注入(inject)自定义服务。 Angular 服务和第三方服务运行良好。我需要注入(inject)的服务仍然是普通的 JS 服务。在下面的示例中，我需要注入(inject)reportService。

我得到的错误是 getReportById 不是一个函数。

class ReportController implements IReportController {

    static $inject = ['$stateParams', 'reportService'];


    constructor(private $stateParams: angular.ui.IStateParamsService, private reportService) {

        this.getReport($stateParams.id);
    }

    getReport(id: number): object {
        reportService.getReportById(id)
            .then(function(res) {
                console.log(res)
            });
    }

}

这是服务。

angular.module('reportsServiceModule', [])
    .factory('reportsService', [
        '$http',
        reportsService
    ]);

function reportsService(
        $http
) {

    'use strict';

    var service = {};

    service.getReportById = function(reportID) {
        return 'A promise';
    };

    return service;
}

Answer 1

AngularJS 中 JS 和 TS 开发之间的唯一真正区别在于单位可以输入。除了类型安全之外，这不会影响任何其他内容。

这里是

interface IReportService {
 getReportById: (someType) => string;
}

...
constructor(
  private $stateParams: angular.ui.IStateParamsService,
  private reportService: IReportService
) {
...

依赖注入(inject)没有问题。如果您在 Angular 中遇到 DI 问题，您会收到来自注入(inject)器的错误。

这里真正的问题是没有使用严格模式。使用 use strict 语句或 alwaysStrict TS option该错误将显示真正的错误 - reportService 变量未在 getReport 方法中定义。

相反，它应该是

getReport(id: number): object {
    this.reportService.getReportById(id)
    ...