Typescript interface syntax not working in controller

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>

Slava Utesinov · Accepted Answer · 2015-12-03 07:01:37Z

1

I think you should initialize variable vm.pageSettings:

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

before setting it's fields: pageTitle and pageDesc

answered Dec 3, 2015 at 7:01

Slava Utesinov

13.5k2 gold badges22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1752532 Over a year ago

Cool, that works as well. Would this be considered better practice within typescript?

Slava Utesinov Over a year ago

I think it's not very important how you will initialize fields, I, for example, prefer your solution, that you specified in your question. I only show you how to fix problem, not more.

Collectives™ on Stack Overflow

Typescript interface syntax not working in controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related