バージョン

TypeScript で Ignite UI for jQuery を使用

トピックの概要

このトピックでは、Ignite UI for jQuery の型定義を TypeScript で使用する方法の概要を説明します。

前提条件

以下の表に、このトピックを理解するための前提条件として必要な情報を示しています。

概念

トピック

このトピックの内容

このトピックは、以下のセクションで構成されます。

概要

Ignite UI for jQuery® は、強い型付け、コンパイル時のチェック、intellisense 機能を利用できるように TypeScript の型定義を提供します。

コントロールの定義を NPM でインストールするには、npm install @types/ignite-ui コマンドを使用してください。TypeScript 用の定義は、jQuery と jQuery UI の定義を拡張しているため、元の定義に依存します。

構文

TypeScript アプリケーションで Ignite UI for jQuery コントロールを使用するための構文は、一般的な JavaScript アプリケーションの構文と同じです。したがって、コード スニペットのリファレンスは、Ignite UI for jQuery API ヘルプを参照できます。

Ignite UI for jQuery を使用した TypeScript アプリケーションの作成

要件

必要なリソースは、Ignite UI for jQuery での JavaScript リソースの使用 で説明している要件とオプションと同じです。その後に Ignite UI for jQuery Angular ディレクティブ モジュールも読み込む必要があります。アプリケーションにはいくつかのスタイルと共に、以下も含める必要があります。

手順

  1. Visual Studio で TypeScript を使用した新しい HTML アプリケーションを作成します。
  2. Ignite UI for jQuery のテーマと構造ファイルを含めます。

    HTML の場合:

     <!-- Ignite UI for jQuery Required Combined CSS Files -->
     <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
     <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    
  3. JavaScript ライブラリを追加します (modernizr はオプションです)。

    HTML の場合:

    <!-- JavaScript Library Dependencies -->
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    
  4. Ignite UI for jQuery スクリプトを含めます。必要に応じて、カスタム ダウンロードを使用しますが、いずれかの方法で Ignite UI for jQuery を含めることもできます。

    HTML の場合:

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
    <!-- Required by the data vizualization controls -->
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
    
  5. アプリケーション用の TypeScript ファイルの参照パスを追加します。

    HTML の場合:

     <script src="./TypeScript/sampleApp.js"></script>
    
  6. TypeScript 用の Ignite UI for jQuery と jQuery の型定義への参照パスを含めます。

    TypeScript の場合:

     /// <reference path="jqueryui.d.ts" />
     /// <reference path="jquery.d.ts" />
     /// <reference path="igniteui.d.ts" />
    

: TypeScript の 1.5 以前のバージョンでは、コンパイラがコンパイル中にプログラムに依存関係を組み込むため、型定義への参照パスは必須です。1.5 以降のバージョンでは、単独の tsconfig.json ファイルで定義することができます。詳細は、tsconfig.json wiki のページを参照してください。

  1. アプリケーションを実行する場所を、ビューで指示する必要があります。例:

    HTML の場合:

     <body>
         <!--...-->
         <div id="sampleAppID"></div>
         <!--...-->
     </body>
    
  2. 最後に、igDialog など、必要なコントロールを追加します。

    TypeScript の場合:

     $(function () {
       // Initialize the igDialog
       $("#sampleAppID").igDialog({
           state: "closed",
           modal: true,
           draggable: false,
           resizable: false,
           height: 500,
           width: 400
       });
     });
    

関連コンテンツ

サンプル

このトピックについては、以下のサンプルも参照してください。

オンラインで表示: GitHub