Knockout.jsで作成したサンプルをTypeScriptで書き直してみる

Knockout.jsで作成したサンプルをTypeScriptで書き直してみます。

サンプルは、前回の記事から流用します。
jQueryを使った動的ウェブサイトのサンプルをKnockout.jsで書き直してみる - プログラマーな日々
jQueryを使った動的ウェブサイトのサンプルをKnockout.jsで書き直してみます。 ...

検証環境

Visual Studio Express 2013 for Web Update 2
Web Essentials 2013 for Update 2

Knockout.jsで作成したサンプル

このサンプルをTypeScriptで書き直します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    シャンプーの残量：
    <span id="volume" data-bind="text:volume"></span>
    <button id="push" data-bind="click:push">プッシュする</button>
    <script src="Scripts/knockout-3.1.0.js"></script>
    <script type="text/javascript">
        function ShampooViewModel() {
            var self = this;
            self.volume = ko.observable(500);

            self.push = function () {
                if (self.volume() < 100) {
                    self.volume(0);
                    return;
                }
                self.volume(self.volume() - 100);
            }
        }

        var viewModel = ShampooViewModel();
        ko.applyBindings(viewModel);
    </script>
</body>
</html>

TypeScriptファイルの作成

[追加] - [新しい項目]でTypeScriptファイルを追加します。
f:id:JHashimoto:20140717034224p:plain
f:id:JHashimoto:20140717034252p:plain

型定義ファイルのインストール

f:id:JHashimoto:20140717034308p:plain

ソースコード

Shampoo.ts

observableをKnockoutObservableとして型指定できています。ジェネリクスも使えます。

class ShampooViewModel {
    public volume: KnockoutObservable<number> = ko.observable(500);

    public push(): void {
        if (this.volume() < 100) {
            this.volume(0);
            return;
        }

        this.volume(this.volume() - 100);
    }
}

var viewModel = new ShampooViewModel();
ko.applyBindings(viewModel);

Shampoo.js

tsファイルから出力されたjsファイルです。

var ShampooViewModel = (function () {
    function ShampooViewModel() {
        this.volume = ko.observable(500);
    }
    ShampooViewModel.prototype.push = function () {
        if (this.volume() < 100) {
            this.volume(0);
            return;
        }

        this.volume(this.volume() - 100);
    };
    return ShampooViewModel;
})();

var viewModel = new ShampooViewModel();
ko.applyBindings(viewModel);
//# sourceMappingURL=Shampoo.js.map

Shampoo.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    シャンプーの残量：
    <span id="volume" data-bind="text:volume"></span>
    <button id="push" data-bind="click:push">プッシュする</button>
    <script src="Scripts/knockout-3.1.0.js"></script>
    <script src="Scripts/Shampoo.js"></script>
</body>
</html>