obnizのソースをTypeScriptで書いたメモです。
obnizのTypeScriptがちゃんと書けそう
以前リリースノートを見かけたんですが、
どうもTypeScriptまわりも取り込んでいるんだなということを知りました。
さらに言うと、自分でつくったいくつかのGrove系のプログラムをライブラリ化して、いつかパーツライブラリに上げてみたいなーと思ってまして、そこでも *.d.ts ファイルが存在してて「うお、これはちゃんと理解して書いてからPullRequestしないととダメっすね」ってなっているので、そう意味でも、腰を据えてやってみねばなあと思いました。
obnizでTypeScriptが使えるとよさそうなこと
なによりも、デバイスから来るデータって、いろんな状態なんですよね。
温度であれば数字ですが、アナログ値であれば0~255の整数ですし、ON/OFFだったらBooleanですし。ひょっとすると、Buffer値だってあり得るかもしれない。
といった状況を考えると、JavaScriptでのゆるい型よりも強めなものが欲しいときもある。そのあたりの期待を込めてobnizでTypeScriptが使えると分かりやすくなります。
Visual Studio Code 準備
フォルダを作ります。
TypeScriptの恩恵を受けやすくするため、Visual Studio Codeで進めます。Visual Studio Code でフォルダを開きます。
インストール
npm init -y
Node.js の環境を準備。
npm i obniz
obniz をインストール。
npm i typescript
TypeScriptもインストール。
コードを書く
こちらの TypeScript のソースを参考にして app.ts をつくります。app.js じゃないのでご注意ください。
import * as Obniz from 'obniz' const obniz = new Obniz("0000-0000"); obniz.onconnect = async () => { obniz.display.clear(); obniz.display.print("hello! TypeScript!"); obniz.switch.onchange = (state: string) => { console.log("state:" , state); obniz.display.clear(); obniz.display.print(state); } }
TypeScript変換
グローバルインストールではないので、以下で直接実行してみます。
./node_modules/.bin/tsc app.ts
すると、
error TS2468: Cannot find global value ‘Promise’.
error TS2705: An async function or method in ES5/ES3 requires the ‘Promise’ constructor. Make sure you have a declaration for the ‘Promise’ constructor or include ‘ES2015’ in your
--lib
option.4 obniz.onconnect = async () => {
~~~~~~~~~~~~~
そうですね。ES2015をlibに加えてと出るので、
./node_modules/.bin/tsc --lib es2015 app.ts
で実行します。
error TS2584: Cannot find name ‘console’. Do you need to change your
target library? Try changing thelib
compiler option to include ‘dom’.8 console.log(state);
~~~~~~~
domも加えてねと言われるのでやります。
./node_modules/.bin/tsc --lib 'es2015,dom' app.ts
最終的にこちらで通りました。本来であれば、tsconfig.jsonで設定したり、watchで監視する流れですが、シンプルにやってみました。
実行してみる
node app.js
起動してみると、
組んだ通り、hello! TypeScript! とメッセージが出ました。
スイッチを操作してみると。
無事、stateがキャッチできてログが出ました。
ということで、だいたい雰囲気がつかめたので、しっかりした仕組みや、データが多めのコードを書くときに、使ってみようと思います!