obnizのソースをTypeScriptで書いたメモ

obnizのソースをTypeScriptで書いたメモです。

obnizのTypeScriptがちゃんと書けそう

以前リリースノートを見かけたんですが、

Release v2.1.0 · obniz/obniz

どうもTypeScriptまわりも取り込んでいるんだなということを知りました。

さらに言うと、自分でつくったいくつかのGrove系のプログラムをライブラリ化して、いつかパーツライブラリに上げてみたいなーと思ってまして、そこでも *.d.ts ファイルが存在してて「うお、これはちゃんと理解して書いてからPullRequestしないととダメっすね」ってなっているので、そう意味でも、腰を据えてやってみねばなあと思いました。

obnizでTypeScriptが使えるとよさそうなこと

なによりも、デバイスから来るデータって、いろんな状態なんですよね。

温度であれば数字ですが、アナログ値であれば0~255の整数ですし、ON/OFFだったらBooleanですし。ひょっとすると、Buffer値だってあり得るかもしれない。

といった状況を考えると、JavaScriptでのゆるい型よりも強めなものが欲しいときもある。そのあたりの期待を込めてobnizでTypeScriptが使えると分かりやすくなります。

Visual Studio Code 準備

image

フォルダを作ります。

image

TypeScriptの恩恵を受けやすくするため、Visual Studio Codeで進めます。Visual Studio Code でフォルダを開きます。

インストール

npm init -y

Node.js の環境を準備。

npm i obniz

obniz をインストール。

npm i typescript

TypeScriptもインストール。

コードを書く

概要 | obniz.js | obniz

こちらの 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 the lib 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

起動してみると、

image

組んだ通り、hello! TypeScript! とメッセージが出ました。

image

image

スイッチを操作してみると。

image

無事、stateがキャッチできてログが出ました。

ということで、だいたい雰囲気がつかめたので、しっかりした仕組みや、データが多めのコードを書くときに、使ってみようと思います!