JQuery,JCanvas を TypeScript でエラー無くトランスパイルするまで

#jCanvasとJQueryをTypeScriptでトランスパイル
(2019.5.26)
※編集中ですので内容などに誤りがある場合があります。

(2019/06/03追記）
jCannvas も

```
npm i --save jcanvas @types/jcanvas
```

することでreferenceタグ不要で利用することができました。
近々記事を修正します。

（以上追記）

jCanvas

|環境|バージョン|
|:---|:---|
|さくらVPS |512MB SSd 20GB|
|CentOS|6.10|
|Node.js| v10.15.0|
|npm|6.9.0|
|typescript|v3.4.5|

|ライブラリ|バージョン|リンク|
|:---|:---|:---|
|jQuery|v3.4.1|[jQuery]https://jquery.com/download/|
|jCanvas|v21.0.1|[Jcanvas] https://projects.calebevans.me/jcanvas/|

Canvasへの描画がとても簡単になるjCanvasライブラリ。
JavaScript（＋JQuery）で書いていた時はとてもお世話になりました。
TypeScriptでクラス別に描画処理を行いたい・・・そんな気持ちが強くなりました。

※例


```HTML:main.html
<!DOCTYPE html>
<html lang="ja">
   <head>
      <title>jQuery and jCanvas </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="main.js"></script>
   </head>
   <body>
      <div id="main">
         <p class="test"></p>
         <canvas id="canv" width="350px" height="300px"></canvas>
      </div>
   </body>
</html>
```
注意点として、canvas はCSSでwidthやheightを設定すると
伸縮されてうまく表示されません。attr属性でwidthやheightを設定
するか、上記のようにタグに記載すると良いです。


```main.js
//main.js
//jCanvas描画起点を中心からではなく左上からにする
$.jCanvas.defaults.fromCenter = false;
$(function () {
    var xx = 100;
    var yy = 100;
    var cc = "#CCAC26";
    $("#test").text("testtest"); //jQuery  
    $("#canv").drawRect({
        fillStyle: cc,
        x: xx, y: yy,
        width: 200,
        height: 100,
        draggable: true 
    });
});
```
##TypeScriptだとどう書くべきか

Jcanvasを利用するコードをTypeScriptで書きたい！そんな気持ちが
強くなっていろいろ調べたけれどjQueryとJcanvasのd.tsのトランス
パイルが通らないこと数時間。

拾い物のJQuery.d.tsとJcanvas.d.tsをmain.tsの先頭で

```typescript:main.ts
    ///<reference path="jquery.d.ts"/>
    ///<reference path="jcanvas.d.ts"/>
```
としてもダメ。調べながら試行錯誤すること半日・・・
そんな私への備忘録がこの記事です。

***
フォルダ構成例

```
/var/www/html/main
|--main.css
|--main.html
|--main.ts  //tsc main.ts -m commonjs -t ES6　（１）
|--main.js  //tsc で生成されたjsファイル （２）
|--node_modules //npm install --save @types/jquery で生成される
| |--@types
| | |--jquery
| | | |--JQuery.d.ts
| | | |--JQueryStatic.d.ts
| | | |--LICENSE
| | | |--README.md
| | | |--dist
| | | | |--jquery.slim.d.ts
| | | |--index.d.ts
| | | |--legacy.d.ts
| | | |--misc.d.ts
| | | |--package.json
| | |--sizzle
| | | |--LICENSE
| | | |--README.md
| | | |--index.d.ts
| | | |--package.json
|--package-lock.json　　//npm install --save @types/jquery で生成される
|--src
| |--jcanvas.d.ts  　　 //jCanvas用 jcanvas.d.tsファイル （０）
| |--jcanvas.min.js　　 //jCanvas 本体jsファイル
| |--jquery-3.4.1.js    //jQuery 本体jsファイル
```

結論としては
####1. jQuery.d.tsはnpm経由で@types/jquery をインストールするだけでいい

/var/www/htmlにて

```
mkdir tttt
cd tttt
npm install @types/jquery --save
```

####2.jCanvas.d.ts はエントリーポイントのtsファイルの先頭で

```typescript:main.ts（１）
  ///<reference path="src/jcanvas.d.ts"/>
```

とすればいいとわかりました。型定義ファイルの jcanvas.d.tsの編集
にも時間がかかりました・・・

```typescript:jquery.d.ts（０）
// jcanvas.d.ts
// 2019.5.25 ぷれじ改
// 改変元ファイル様：
// https://github.com/uestla/convex-hull/blob/master/ConvexHull/jcanvas.d.ts
//
// main.ts の先頭にて
// <reference path="src/jcanvas.d.ts" /> を追記すること(トリプルスラッシュ)
// なお、jQuery.d.tsは
// npm install --save @types/jquery を推奨

interface JQuery {
	drawLayers(): JQuery;
	clearCanvas(): JQuery;
	removeLayers(): JQuery;
	drawArc(options: any): JQuery;
	drawLine(options: any): JQuery;
	drawText(options: any): JQuery;
	drawRect(options: any): JQuery; //無かったので追記
  	removeLayer(name: string): JQuery;
	removeLayerGroup(name: string): JQuery;
	setLayer(name: string, options: any): JQuery;
	setLayerGroup(name: string, options: any): JQuery;

	attr(name: string, value: boolean): JQuery;
}

//追記
//$.jCanvas.defaults.fromCenter = false; を通すため
interface JQueryStatic{
	jCanvas:any;
}
```

```typescript:main.ts（１）
///<reference path="src/jcanvas.d.ts"/>
//main.ts
//jCanvas描画起点を中心からではなく左上からにする
$.jCanvas.defaults.fromCenter = false;

$(function(){
  var xx = 100;
  var yy = 100;
  var cc = "#CCAC26";

  $("#test").text("testtest"); //jQuery  
  $("#canv").drawRect({  //jCanvas
     fillStyle: cc,
     x: xx, y: yy,
     width: 200,
     height: 100,
     draggable:true  //ドラッグ可能！
  });
});

```

トランスパイルすると

```
tsc main.ts -m commonjs -t ES6
```

```typescript:main.js（２）
///<reference path="src/jcanvas.d.ts"/>
//main.ts
//jCanvas描画起点を中心からではなく左上からにする
$.jCanvas.defaults.fromCenter = false;
$(function () {
    var xx = 100;
    var yy = 100;
    var cc = "#CCAC26";
    $("#test").text("testtest"); //jQuery  
    $("#canv").drawRect({ //jCanvas
        fillStyle: cc,
        x: xx, y: yy,
        width: 200,
        height: 100,
        draggable: true  //ドラッグ可能！
    });
});
```
クラスなどを利用してないのでほぼ同じ内容ですね。
しかし、JQueryやJCanvasに関するトランスパイル時のエラーが出ません。
（エラーが出てもjsへの変換はされてるけど・・・これならスッキリ）
ホスト名/main/main.html で問題なく描画されていればＯＫ。

ちなみにjCanvasの力で、描画された黄色っぽい四角形はドラッグで移動できます。
draggable : true; するだけ。jCanvasすごい。

TypeScriptを勉強したての方にとって、d.tsファイルの取扱いは鬼門。
敷居が高くなってしまう一因ではないかと思い筆を執りました。上級者の方から
みれば簡単な設定でも、初心者にとっては一苦労。

他にも、TypeScriptでのライブラリ利用や、複数ファイル間の読み込みなども
理解の難しい点だと思います（というか私が全部ハマったポイント）。

複数ファイルで、TypeScriptでコードを書き、tsc トランスパイル時にエラーを出さない。
これでやっとTypeScriptでのゲーム開発の土俵に立てたような気がしてます。あとはmysqlや
Express,WebSocketなどをTypeScript上で書けるようにしないとなぁ・・・。

ソースコードは下記GitHubにて公開してます。
次は複数のTSファイルをまとめてトランスパイルする際のTIPS記事を書こうと思っています。

[TypeScript+JQuery+jCanvas 複数ファイルのトランスパイル]
https://qiita.com/purejihacker/items/b47f021608fb043f74af

ぷれじ(2019.5.26最終更新)
[GitHub]https://github.com/pureji1980/S_JQuery_and_JCanvas