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();
})