obnizのアプリをTypeScriptで書く環境を作る
from ⬜obniz Board 1Yで遊ぶ
書いた日：2021/9/21
obnizはTypeScriptでかけるらしいので環境を作る
>obniz.jsをすべてTypeScriptに書き直しました。
できるようになること
PCで実行したTypeScriptのコードで、obnizを制御する
スキなエディタ・開発環境が使える
環境
TypeScript 4.4.3
node.js v13.7.0
以下、時系列にトラブルと対策を記述した
環境構築
TypeScript を使って obniz で Lチカ - Qiitaを参考に環境を構築する
サンプルコードのコードを参考に書いてみるとエラーObnizが読み込めずにエラー
このときtsconfigのtargetは
es6 import Obniz from 'obniz' に書き換える obniz.display がundefinedの警告が出る
guardを入れてエラーを消す
tsc でbuildしてrun（node dist/main.js）すると、ビルドではsrc/にmain.jsが生成されるのでmodule not foundになる解決策：tscのoutDirを
dist にするここまでのコード
tsimport Obniz from 'obniz'
function main() {
const obniz = new Obniz("OBNIZ_ID_HERE");
obniz.onconnect = async () => {
if(obniz.display === undefined){
return;
}
obniz.display.clear();
obniz.display.print('Hello World!');
};
}
main();実行するも、
invalid obniz id エラー原因は
OBNIZ_ID_HERE は手元では自動入力されないから環境変数にIDを入れたい
@types/node を入れているので、 process.env が使えるこれをTypeScriptで使うためには型定義を自分で書く必要がある
TypeScriptでのprocess.envの型定義の方法。このとおりに型定義する
環境変数を実行時にコマンドで指定するのはだるいのでファイルにする
>If you have multiple environment variables in your node project, you can also create an .env file in the root directory of your project, and then use the dotenv package to load them during runtime.
ということでdotenv - npmを入れ、読み出しのコードを追加する
最終的なコード。これを実行するとObniz本体に
Hello world! と出力されるpackage.json{
"dependencies": {
"dotenv": "^10.0.0",
"obniz": "^3.17.0"
},
"scripts": {
"build": "tsc",
"start": "node dist/main.js",
"clean": "rm -rf dist"
},
"devDependencies": {
"@types/node": "^16.9.4",
"typescript": "^4.4.3"
}
}globals.d.ts// @see https://maku.blog/p/r8iry9g/
declare namespace NodeJS {
interface ProcessEnv {
/** ObnizのID XXXX-XXXX */
readonly OBNIZ_ID: string;
}
}.envOBNIZ_ID=1234-5678src/main.tsimport Obniz from 'obniz'
import * as dotenv from "dotenv";
// 環境変数を.envから読み込む
// 読み込んだ変数はprocess.envで使えるようになる。
dotenv.config();
function main() {
const obniz = new Obniz(process.env.OBNIZ_ID);
obniz.onconnect = async () => {
if(obniz.display === undefined){
return;
}
obniz.display.clear();
obniz.display.print('Hello World!');
};
}
main();