web-dev-qa-db-ja.com

jQuery、RequireJS、およびKnockoutJSを使用して基本的なTypeScriptプロジェクトを作成する方法

RequireJS、jQuery、およびKnockoutJSを利用したVisual Studio 2012 TypeScriptプロジェクトの最も基本的な例を作成するための、簡単なハウツーを探していました。いくつかの例がありますが、私にとっては思ったよりも複雑なものもあるので、ハウツーの作成に着手し、公開調査のためにここに投稿しました。 Q＆Aスタイルの知識共有演習として自分の質問に答えました。

なじみのない人のために、ここに含まれているコンポーネントの簡単な内訳があります...

TypeScript -スクリプトでJavaScriptのスーパーセットである言語を介して.TSファイルを作成できるようにするVisualStudio拡張機能。これにより、メソッドと変数に関連付けられたデータ型を定義する機能が提供されます。それ以外の場合はJavaScriptにはありません。そうすることで、コンパイル時のチェックにより、実行時の競合を減らすために適切に使用できるようになります。 Visual Studioプロジェクトをビルドするとき、VisualStudio拡張機能はスクリプトを実際のJavaScriptにコンパイルします。そのため、この拡張機能には独自のコンパイラであるtsc.exeが付属しています。結果のJavaScriptファイルは、ソースコードの.tsファイルではなく、本番環境にデプロイされることが期待されます。

jQuery --HTMLドキュメントのトラバースと操作、イベント処理、アニメーション、およびAjaxインタラクションのためのJavaScriptフレームワーク。

RequireJS -依存関係ローダー。 JavaScriptの参照がおかしくなることがあります。これは、これらの懸念を支援しようとします。私の例は、多くのJavaScriptファイルが使用されているにもかかわらず、HTMLが参照するのは1つだけ、つまり他のファイルをロードするルートJavaScriptファイルであることを示しています。

KnockoutJS --MVVMパターンを利用したUIバインディング。 HTMLビューは、ビューモデルの変数とメソッドを参照します。ビューモデルはJavaScriptオブジェクトです（JavaScriptファイルは.tsファイルをコンパイルした結果である可能性があります-上記のTypeScriptを参照してください）。

DefinitelyTyped -2つのDefinitelyTypedNuGetパッケージも含まれています。 TypeScriptはデータ型の使用状況を確認しようとしているため、すべての参照を認識していることを確認するためのチェックを実行しています。 JavaScriptはそれよりも少し緩いです。 TypeScriptを満たすために（外部JavaScriptオブジェクトを参照する場合）、使用されると予想されるオブジェクトを（TypeScriptに）記述する方法が必要です。これらのDefinitelyTypedスクリプトは、この定義を提供します。これらは機能を提供せず、TypeScriptコンパイラを明確にするだけなので、これらのチェックを実行できます。

以下の例では、次のように表示されます。

/// <reference path="../Scripts/typings/requirejs/require.d.ts" />

これは、TypeScriptコンパイラがrequirejsDefinitelyTyped定義ファイルを含める方法です。これらのDefinitelyTypedスクリプトを作成している組織は、膨大なコレクションを作成しています。ここでは、KnockoutJSとRequireJSの2つだけを参照します（これがこのチュートリアルの範囲であるため）

javascriptmvvmknockout.jsrequirejstypescript
17
barrypicker

免責事項

このハウツーでは、TypeScript、jQuery、を使用して基本的なWebサイトを構築する方法 "a"を示します。 KnockoutJS、およびRequireJS。それを行うには他にも多くの方法があります。

入門

Visual Studio拡張機能をインストールします

Visual Studio2012拡張機能のインストール-MicrosoftVisual Studio 2012 PowerTool 1.0.1.0のTypeScript http://visualstudiogallery.msdn.Microsoft.com/ac357f1e-9847-46ac-a4cf-520325beaec1

新しいVisual Studioプロジェクトを作成します

  • Visual Studio2012を開始します。
  • メニュー項目 "ファイル"-> "新規"-> "プロジェクト...」
  • "テンプレート"-> "その他の言語"-> "TypeScript "（これは実際には拡張子.csprojのプロジェクトファイルを作成します-奇妙です）
  • プロジェクトタイプ「TypeScriptを使用したHTMLアプリケーション」を選択します

掃除

プロジェクトからファイルapp.css、app.tsを削除します

コンポーネントの追加

NuGetを使用して、追加...

  • RequireJS（このチュートリアルではバージョン2.1.15を選択しました）
  • KnockoutJS（このチュートリアルではバージョン3.2.0を選択しました）
  • jQuery（このチュートリアルではバージョン2.1.1を選択しました）
  • requirejs.TypeScript.DefinitelyTyped（バージョン0.2.0を選択しました
    このチュートリアルのJasonJarrett。 Josh BaldwinによるTypeScriptdefファイルをインストールしました-バージョン2.1.8）
  • knockout.TypeScript.DefinitelyTyped（バージョン0.5.7を選択しました
    このチュートリアルのJasonJarrett）

プロジェクトフォルダの設定

プロジェクトのルートにプロジェクトフォルダを作成します

  • 応用
  • モデル
  • ViewModels

基本的なTypeScriptモデルを作成する

TypeScriptファイルをプロジェクトフォルダ「Models」に追加します

  • ソリューションエクスプローラーで「モデル」フォルダーを右クリックします
  • コンテキストメニュー項目「追加」->「新規項目...」を選択します
  • 左側のペインで、[Visual C＃]を強調表示します
  • 右側のペインで、「TypeScriptファイル」を強調表示します
  • ファイル名のテキストボックスに「myTestModel.ts」と入力します。「追加」ボタンをクリックします。

ファイル「myTestModel.ts」を変更します

class myTestModel {
    public fieldZ: string;
    public fieldY: string;
    public fieldX: number;
}
export=myTestModel;

TypeScriptビューモデルを作成する

TypeScriptファイルをプロジェクトフォルダ「ViewModels」に追加します

  • ソリューションエクスプローラーで「ViewModels」フォルダーを右クリックします
  • コンテキストメニュー項目「追加」->「新規項目...」を選択します
  • 左側のペインで、[Visual C＃]を強調表示します
  • 右側のペインで、「TypeScriptファイル」を強調表示します
  • ファイル名のテキストボックスに「myViewModel.ts」と入力します
  • 「追加」ボタンをクリックします

ファイルmyViewModel.tsを変更します。

/// <reference path="../Scripts/typings/knockout/knockout.d.ts" />

import myTestModel = require("Models/myTestModel");
import ko = require("knockout");

class myViewModel {
    public myString: KnockoutObservable<string>;
    public myNumber: KnockoutObservable<number>;
    public myComplexObject: KnockoutObservable<myTestModel>;

    constructor() {
        this.myString = ko.observable("some test data");
        this.myNumber = ko.observable(987);

        var tempComplexObject = new myTestModel;
        tempComplexObject.fieldZ = "some bogus test data";
        tempComplexObject.fieldY = "another bogus test data";
        tempComplexObject.fieldX = 123;

        this.myComplexObject = ko.observable(tempComplexObject);
    }

    myButton_Click() {
        alert("I was clicked");
    }
}
export=myViewModel;

構成を追加する

RequireJS構成ファイルを追加します

  • ソリューションエクスプローラーでプロジェクトフォルダー「アプリケーション」を右クリックします
  • コンテキストメニュー項目「追加」->「新規項目...」を選択します
  • 左側のペインで、[Visual C＃]を強調表示します
  • 右側のペインで、「TypeScriptファイル」を強調表示します
  • [ファイル名]テキストボックスに「require-config.ts」と入力します
  • 「追加」ボタンをクリックします

ファイル「require-config.ts」を変更します

/// <reference path="../Scripts/typings/requirejs/require.d.ts" />

require.config({
    baseUrl: "",
    paths: {
        "jQuery": "Scripts/jquery-2.1.1",
        "knockout": "Scripts/knockout-3.2.0.debug",
        "myViewModel": "ViewModels/myViewModel"
    },
    shim: {
        "jQuery": {
            exports: "$"
        }
    },
});

require(["jQuery"], function ($) {
    $(document).ready(function () {
        require(["knockout", "myViewModel"], (knockout, myViewModel) => {
            var viewModel = new myViewModel;
            knockout.applyBindings(viewModel);
        });
    });
});

既存のファイルindex.htmlを変更します

ビューをビューモデルに合わせる必要があります。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>TypeScript HTML App</title>
        <script data-main="Application/require-config" src="Scripts/require.js"></script>
    </head>
    <body>
        <h1>TypeScript HTML App</h1>

        <div id="myStringTest" data-bind="text: myString"></div>
        <input id="myStringTest2" data-bind="value: myString" />
        <input id="myNumberTest" data-bind="value: myNumber" />
        <input id="myComplexObjectTest" data-bind="value: myComplexObject().fieldZ" />
        <button id="myMethodTest" data-bind="click: myButton_Click" >click me</button>
    </body>
</html>

それを実行します

OK-試してみる時間です。完了し、.tsファイルにいくつかのブレークポイントを設定して、F5キーを押します。

結論：

ご覧のとおり、この例には多くのコードはありません。例を実行してボタンをクリックすると、index.htmlのボタンがmyViewModel.tsのmyButton_Clickというメソッドにバインドされていることがわかります。また、テキストボックスmyStringTest2とmyNumberTestは、ビューモデルで定義された変数にバインドされます。

Require-config.tsファイルは、接続されている依存関係のリストを保持します。 「knockout.applyBindings（viewModel）」という行は、myViewModelのインスタンスをhtmlビューに関連付けます。

TypeScriptで変数をデータ型で宣言する方法に注目してください。

この入門書がお役に立てば幸いです。テーブルにいくつかの部品を置くだけで、これらのコンポーネントがどのように連携するかを視覚化するのに役立ちました。 KnockoutJSには、ノックアウトマッピングなどのいくつかの優れたプラグインがあります。これにより、Webサービスから取得したデータを、中間の変換や変換なしでビューモデルに直接バインドできます。また、knockoutjsはテンプレートをサポートできます-おそらくマスターページを実装できるようになります。

完全を期すために、Viewsというプロジェクトフォルダーを追加し、そこにHTMLを保持します。これはMVC/MVVM開発ではより伝統的だと思います。 .htmlを含むURLはまだ私を悩ませています。私はMVCスタイルのルーティング（ファイル拡張子なし）が好きですが、これもかなりクールです-特にHTMLとJavaScriptにすぎないので-本当にクロスプラットフォームです。 Webサービス呼び出し（例には含まれていません）を除いて、ポストバックはありません。クライアント側の処理は高速です。

コメントしてください...

37
barrypicker