#TypeScript+JQuery+jCanvas 複数ファイルのトランスパイル
(2019.5.26)
複数のTSファイルをトランスパイルしてメインファイルからサブファイルのクラス
などにアクセスしたい。jCanvasなどのライブラリも利用しながら。どうやって
TSファイルに記述すればいいのだろう？そんなまとめ記事です。
ローダーを利用するべきなのでしょうが、知識がないのでとりあえず愚直にHTML
に全スクリプトファイルを記述します。main.ts(js)からDraw.ts(js）のクラスを
利用しています。
本当はモジュール化したりするべきなのでしょうけど知(ry
・・・いつかモジュール化してimport,exportもできるようにします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>jQuery and jCanvas in TypeScript</title>
<link rel="stylesheet" href="./main.css"/>
<script src="src/jquery-3.4.1.js"></script>
<script src="src/jcanvas.min.js"></script>
<script src="Draw.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="main">
<p class="test"></p>
<canvas id="canv" width="350px" height="300px"></canvas>
</div>
</body>
</html>
///<reference path="src/jcanvas.d.ts"/>
///<reference path="Draw.ts"/>
// npm install --save @types/jquery ←Jquery.d.tsの設定
/* jQuery と jCanvas の型定義ファイルを設定することで、
トランスパイルが通るようにします。
tsc -m commonjs -t ES6 jqjc.ts
*/
//jCanvas描画起点を中心からではなく左上からにする
$.jCanvas.defaults.fromCenter = false;
$(function(){
console.log("jQuery is alive!");
$("#test").text("testtest");
var d = new Draw(10,20,"#CCAC26"); //Draw.tsファイルのクラスを利用！
d.draw();
})
１行目はjCanvasを利用しているファイルのトランスパイルを通すための型定義ファイルの読み込みです。
２行目が肝。他のTSファイルを参照しています。この記述により、トランスパイル時に自動で
Draw.tsもトランスパイルされてDraw.jsが生成されます。
//Draws.ts
class Draw{
public x:number;
public y:number;
public c:string;
constructor(x?:number,y?:number,c?:string){
this.x = x || 0;
this.y = y || 0;
this.c = c || "#000000";
}
draw(){
$("#canv").drawRect({ //jCanvas利用
fillStyle: this.c,
x: this.x, y: this.y,
width: 200,
height: 100,
draggable:true
});
$("#canv").drawText({
fillStyle: '#9cf',
strokeStyle: '#25a',
strokeWidth: 2,
x: 150, y: 100,
fontSize: 48,
fontFamily: 'Verdana, sans-serif',
text: 'Hello'
}
}
}
読み込むファイルであるDraw.tsでもjCanvas関数を利用していますが、
///<reference path="src/jcanvas.d.ts"/>
の記述は不要。main.tsをトランスパイルするとDraw.tsも自動でトランスパイルされ、
tsc main.ts -m commonjs -t ES6
結果としてmain.js とDraw.jsが生成されます。あとはHTMLファイルの適切な場所で、
これらをスクリプトとして読み込めば稼働させることができます。
##参考まで
トランスパイルされたmain.js とDraw.jsのソースファイルです。
///<reference path="src/jcanvas.d.ts"/>
///<reference path="Draw.ts"/>
// npm install --save @types/jquery ←Jquery.d.tsの設定
/* jQuery と jCanvas の型定義ファイルを設定することで、
トランスパイルが通るようにする。
tsc -m commonjs -t ES6 jqjc.ts
*/
//jCanvas描画起点を中心からではなく左上からにする
$.jCanvas.defaults.fromCenter = false;
$(function () {
console.log("jQuery is alive!");
$("#test").text("testtest");
var d = new Draw(10, 20, "#CCAC26"); //Draw.tsファイルのクラスを利用！
d.draw();
});
main.jsはmain.tsから変更されてる部分が無いですね。
一方、Draw.tsではクラスを利用しているので、jsファイルになると変更点が見られます。
//Draw.js
var Draw = /** @class */ (function () {
function Draw(x, y, c) {
this.x = x || 0;
this.y = y || 0;
this.c = c || "#000000";
}
Draw.prototype.draw = function () {
$("#canv").drawRect({
fillStyle: this.c,
x: this.x, y: this.y,
width: 200,
height: 100,
draggable: true
});
$("#canv").drawText({
fillStyle: '#9cf',
strokeStyle: '#25a',
strokeWidth: 2,
x: 150, y: 100,
fontSize: 48,
fontFamily: 'Verdana, sans-serif',
text: 'Hello'
});
};
return Draw;
}());
前記事：[JQuery,JCanvas を TypeScript でエラー無くトランスパイルするまで]
https://qiita.com/purejihacker/items/330a33d2e57e8aa2e607
ぷれじ（2019.5.26最終編集）