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