TypeScript_jQueryの利用



環境準備

jQuery本体と型定義を取得する。

npm init -y
npm install jquery --save
npm install @types/jquery -save


TSD(TypeScript Definition manager for DefinitelyTyped)とは

TSDはTypeScriptの型定義ファイル管理ツールです。

外部JSライブラリをTypeScriptで容易に利用できる管理マネージャー機能を提供します。

なお、TypeScript 2.0からはのtsdが非推奨となり、利用は控えたほうがよいといえます。

管理ツール導入
$ npm install tsd -g
インストール
$ tsd install jquery --save
使用方法
/// <reference path="../typings/jquery.d.ts" />

typingsとは

typingsは、tsdと同じくTypeScriptの型定義ファイルを管理するツールです。

npmやbowerなどhttp経由で型定義ファイルを容易に取得できる特長がありました。

なお、TypeScript 2.0からはのtsdが非推奨となり、利用は控えたほうがよいといえます。

管理ツール導入
npm i --global typings
インストール
typings install dt~jquery --global --save
使用方法
/// <reference path="../typings/tsd.d.ts" />


HTMLで実行する

htmlを用意

body内にjQueryがターゲットにするIDを記述しておきます。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>TypeScript - jQuery</title>
  <script src="./node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
  <h1>jQuery - TypeScript</h1>
  <div id="content"></div>
  <script src="./app.js"></script>
</body>
</html>

tsファイルを用意

/// <reference path="./node_modules/@types/jquery/index.d.ts" /> 

class Toppage {
  private msg: string;

  constructor(msg: string) {
    $('#content').append('<p>constructor</p>');
    this.msg= msg;
  }

  public print(): void {
    $('#content').append('<p>' + this.msg + '</p>');
  }
}

$(function () {
  $('#content').append('<p>document.ready</p>');

  const obj: Toppage = new Toppage('TypeScript - jQuery');
  obj.print();
})

関連ページ




スポンサード リンク