読者です 読者をやめる 読者になる 読者になる

nprogram’s blog

フロントエンド開発の学習内容を記載していきます。

KnockoutComputedプロパティをJavaScript記載からTypeScript記載に変換!

はじめに

Knockoutの公式ページ[http://knockoutjs.com/]

のTutorialであるWorking with Lists and CollectionsをTypeScriptを使って記載しています。ソースコードは、GitHubにアップしています。

KnockoutComputedプロパティ

型を意識しないといけないので、注意しましょう。例のごとく、私は詰まりました。

computed() に渡された評価関数を実行する。 実行中に呼び出された Obervable を依存対象として記録するため、正常に動作するためには、 以下の例では、KnockoutObservableArrayプロパティであるseatsが定義されている必要があります。

self.totalSurcharge = ko.computed(function() {
   var total = 0;
   for (var i = 0; i < self.seats().length; i++)
       total += self.seats()[i].meal().price;
   return total;
});
seats: KnockoutObservableArray<SeatReservation> = ko.observableArray<SeatReservation>();

totalSurcharge: KnockoutComputed<number> = ko.computed(() =>
    {
        var total = 0;
        for (var i = 0; i < this.seats().length; i++)
            total += this.seats()[i].meal().price;
        return total;
    });

computed の仕組みについては以下のサイトがおすすめです。

Knockout.js 使い方メモ - Qiita