Declaring a knockout computed observable in typescript

Question

I am new to typescript and would like to combine it with the goodness of knockout. I have a computed observable, which currently works, but want to know is this the right way about it or is there a better way.

I am using the knockout definition file from nu-get. In it there are 4 KnockoutComputed(x) definitions.

1. KnockoutComputed
2. KnockoutComputedDefine
3. KnockoutComputedFunctions
4. KnockoutComputedStatic

I like the {} method of declaring observable's and would like to keep this. So long story short is this the correct method of declaring observables or is there an alternate way (maybe with intlisense in the function)

I am using the first like so:

class PersonViewModel {
    public firstname: KnockoutObservable<string>;
    public lastname: KnockoutObservable<string>;
    public fullname: KnockoutComputed<string>;
    constructor() {
        this.firstname = ko.observable('');
        this.lastname = ko.observable('');
        this.fullname = ko.computed({
            owner: this,
            read: function () {
                return this.firstname() + " " + this.lastname();
            }
        });
    }
}

with the html snippet of:

<h2>Type Script and Knockout.</h2>
<input data-bind="value: firstname" />
<input data-bind="value: lastname" />
<div data-bind="text: fullname"></div>

Answer 1

Recommendation is to use arrow functions for computed. It will give you the desired intellisence as well:

this.fullname = ko.computed({
        owner: this,
        read:  () => {
            return this.firstname() + " " + this.lastname();
        }
    });

Basically that captures this using closure so it doesn't matter who calls back the function. this will continue to mean PersonViewModel instead of any . More : http://basarat.github.io/TypeScriptDeepDive/#/this

Try the intellisense in TypeScript Playground. You should get intellisense when you press this.