吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【TypeScript】外部ライブラリ(jQueryなど)を使用する方法をまとめてみる

2017年6月29日 / category : lab, typescript

TypeScriptで外部ライブラリ(jQueryなど)を読み込む方法をまとめておこうと思います。
開発環境は、npm + webpackです。

package.jsonでパッケージ定義して読み込む

jqueryをインストールします。

npm
npm install jquery --save

インストールに成功すると、package.jsonに次の記述が追加されます。

package.json
{
  "dependencies": { "jquery": "^3.2.1" }
}

ts側に次のコードを記述します。

main.ts
declare var require: any;
import $ = require('jquery');

(function() {
	console.log( 'jquery', $.fn.jquery ); //jquery 3.2.1
}());

jqeuryをimportすれば、通常通りjqueryが使用できます。
webpackのProvidePluginを使用するともう少し簡潔に使用することができます。

webpackのProvidePluginを使用したjqueryの使い方

webpack.config.jsに次の記述を追加します。

webpack.config.js
const webpack = require('webpack');

module.exports = {
	plugins: [
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: "jquery"
		})
	]
}

ProvidePluginを使用することで、ライブラリを変数で認識することができるようになります。
上の例では、$とjQueryがjqueryのライブラリであることを宣言しています。

tsファイルでの使い方は、次の通りです。

main.ts
declare var $: any;

(function() {
	console.log( 'jquery', $.fn.jquery );
}());

若干スマートになりました。
こちらで問題なく、jqueryが使用できます。

上の2つの例には、問題が出てくるケースがあります。
importするたびに、コンパイルされるjsファイルにjquery本体のコードもコンパイルされますので、
tsファイルが複数あって、別々にjsファイルをコンパイルする必要があるケースでは、jquery本体のコードが重複してしまいます。

jqueryファイルを外部化し、重複させない方法を次にまとめます。

jqueryファイルを外部読み込みにして、tsファイル側でjqueryを使用する

Typingsを使用します。
Typingsとは、TypeScriptの型定義ファイル管理ツールです。

Typingsのインストールは、次の通りです。

npm
npm install -g typings

続いて、Typingsの管理ファイルtypings.jsonを生成します。

npm
typings init

上のコードで、typings.jsonが生成されたかと思います。

続いて、jqueryの型定義をインストールします。

npm
typings install dt~jquery --save --global

インストールがうまくいけば、typingsディレクトリが生成され、
/typings/globals/jquery/index.d.ts
こちらにjqueryの定義ファイルが生成されたかと思います。
typings.jsonも更新されます。

typings.json
{
  "name": "sample",
  "dependencies": {},
  "globalDependencies": {
    "jquery": "registry:dt/jquery#1.10.0+20170310222111"
  }
}

これで準備は整いました。
先ほどインストールした/typings/globals/jquery/index.d.tsは、型定義ファイルなので、
htmlに、実際のjqueryファイルのパスを通す必要があります。

index.html
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

tsは次のような記述になります。

main.ts
/// <reference path="../../typings/globals/jquery/index.d.ts" />

(function() {
	console.log( '$', $.fn.jquery );
}());

以上が、外部ライブラリを使用する方法となります。