Typescript接口语法在控制器中不起作用

Question

I have created a pageSettings interface

module app.common {
  export interface IPageSettings {
    pageTitle : string;
    pageDesc  : string;
  }

  export class PageSettings implements IPageSettings {
    constructor(public pageTitle : string,
                public pageDesc  : string
    ) {
    }
  }
}

In the controller i am then calling that interface

module app.home {
interface IKeysModel {
    pageSettings: app.common.IPageSettings;
}

class KeysCtrl implements IKeysModel {
    pageSettings: app.common.IPageSettings;

    static $inject = [];
    constructor() {
        var vm = this;
        vm.pageSettings.pageTitle = "Keys",
        vm.pageSettings.pageDesc = "List of your keys"
    }
  }
  angular.module("app").controller("keysCtrl", KeysCtrl);
}

This code does not work. However if i change the call to the interface properties to this

vm.pageSettings = {
     pageTitle: "Keys",
     pageDesc : "List Of Your Keys"
}

Then is works fine. Im just wondering why? I feel like the first assignment should work. Im fairly new to typescript, just trying to understand the language.

For further context . This is the view

<div class="page-title">
  <h2>{{::vm.pageSettings.pageTitle}}</h2>
  <h6>{{::vm.pageSettings.pageDesc}}</h6>
</div>

Answer 1

I think you should initialize variable vm.pageSettings:

vm.pageSettings = <app.common.IPageSettings>{};

before setting it's fields: pageTitle and pageDesc