Question

在Typescript中向rootscope添加值时出错。

class TestClass{
   this.rootScope: ng.IRootScopeService;
   constructor($rootScope){
       this.rootScope = $rootScope;
    }

    addValueToRoot=()=>{
       this.rootScope.val1 = "something";    //Error: Property doesn't exist on the IRootScopeService
    }
}

Answer 1

这是因为（正如编译器所说）val1上不存在ng.IRootScopeService。您需要对其进行扩展以使其适应您的需求，例如

interface MyRootScope extends ng.IRootScopeService {
  val1: string
}

然后你可以在你的班级中使用这个界面：

class TestClass {
  this.rootScope: MyRootScope;
  ...
}

Answer 2

您可能正在使用TypeScript 1.6，它开始捕获此类错误。

我通常做的是：

使用$rootScope: any
执行($rootscope as any).val1 = ...
使用$rootScope: ng.IRootScopeService & { [name:string]: any };

No.3为该类型添加了额外属性的余量。您甚至可以将其保存在类型名称下以便重复使用：

type IExpandable = { [name:string]:any };

$rootScope: ng.IRootScopeService & IExpandable;

Answer 3

其他替代方案是：

this.rootScope["val1"] = "something";
(<any>(this.rootScope)).val1 = "something";

Answer 4

这对我有用：

在单独的文件中，我declare module app：

// IRootScopeService.d.ts
declare module app {
    interface IRootScopeService extends ng.IRootScopeService {
        //
        $state: ng.ui.IState
        //
        previousState: any;
        currentState: any;
    }
}

我将此IRootScopeService.d.ts命名为，因为它是使用declare关键字的声明文件。为了使其保持模块化，此文件仅用于访问interface app.IRootScopeService。

现在，在控制器文件中，controller函数是这样的：

//CoreCtrl-ctrl.ts
...
function CoreCtrl(
        $state: angular.ui.IState,
        $rootScope: app.IRootScopeService
    ) {
        var vm = this;

        $rootScope.previousState = undefined;
        $rootScope.currentState = undefined;
        $rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams) {
            $rootScope.previousState = from.name;
            $rootScope.currentState = to.name;
        })
        // $rootScope.previousState = undefined;
        // $rootScope.currentState = undefined;
    }
    ...

请注意app.IRootScopeService为我们type提供了$rootScope。现在$rootScope.currentState和$rootScope.previousState不会在typescript中出错。

第2部分

我们可以在新文件interfaces中向模块app添加更多IScope.d.ts，以保持模块化：

// IScope.d.ts
declare module app {
    interface IScope extends ng.IScope {
        // 
        $root: IRootScopeService;
        // 
        greet:string;
        name:string;
        address:string;
    }
}

现在，我们有两个个性化/自定义界面app.IRootScopeService和app.IState，我们可以继续添加新properties我们要添加到{{1} }和$rootScope。

请注意，我们在$scope中没有ng.前缀，因为我们正在$root: IRootScopeService;内访问app.IRootScopeService。

希望这会有所帮助。祝你好运。

打字稿：物品不存在于$ rootScope（Angularjs）上

4 个答案: