打字稿：$rootScope（Angularjs）上不存在属性答案

【问题标题】：Typescript: Property doesn't exist on the $rootScope (Angularjs)打字稿：$rootScope（Angularjs）上不存在属性
【发布时间】：2015-12-26 05:24:15
【问题描述】：

在 Typescript 中向根作用域添加值时出错。

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

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

【问题讨论】：

标签： angularjs visual-studio service typescript

【解决方案1】：

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

interface MyRootScope extends ng.IRootScopeService {
  val1: string
}

那么你就可以在你的类中使用这个接口了：

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

【讨论】：

【解决方案2】：

其他选择是：

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

【讨论】：

【解决方案3】：

您可能正在使用开始捕获此类错误的 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;

【讨论】：

查看选项 3，如何将其注入控制器？

【解决方案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 关键字的声明文件。为了保持模块化，此文件将仅用于使用app.IRootScopeService 访问interface。

现在，在控制器文件中，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，它为我们提供了我们想要的$rootScope 的type。现在$rootScope.currentState 和$rootScope.previousState 不会在typescript 中报错。

第 2 部分

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

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

现在，我们有两个个性化/定制界面app.IRootScopeService和app.IState，我们可以在其中继续添加新的properties，我们希望添加到$rootScope和$scope。

请注意，我们没有在$root: IRootScopeService; 中添加ng. 前缀，因为我们是从module app 内部访问app.IRootScopeService。

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

【讨论】：