TypeScriptでCanvasに描画する

コード補完がないとつらいので、TypeScriptで書くことにしました。
Canvasに描くことは、なんてことはなかったです。

フラクタルツリーを描いてみました。
http://techno-cat.github.io/fractal/tree/

ソースコード
https://github.com/techno-cat/techno-cat.github.io/tree/master/fractal/tree

フォルダ構成
.
├── js
│   ├── jquery-2.1.4.min.js
│   ├── tree1.js
│   └── tree1.ts
├── tree1.html
└── typings
├── jquery
│   └── jquery.d.ts
└── tsd.d.ts

作業手順は、
“tree1.ts”を編集して、その都度コンパイルしてました。

コマンドはこんな感じ。
$ tsc tree1.ts

コンパイルは、ファイルを監視して自動で実行しても良いのですが、
その都度、出力されたJSファイルを見て、JavaScriptの勉強をしてました。(*1)
もしくは、Visual Studio Codeの機能を使って、
ショートカットにコンパイルを割り当てることもできます。

TypeScriptで書いた感想

Visual Studio Code上で、あらかじめエラーが表示されるので便利でした。
TypeScriptからJavaScriptに変換するの掛かる時間がちょっと長いですね。
今回の場合だと、PointだのSegmentだのクラスを作って、
もう少しTypeScriptの恩恵を受けても良さそうです。

あと、WebMIDI APIを使ったサンプルもアップ済みです。

おしまい。

(*1) 特にクラスの書き方とか。

Leave a Comment