obnizのアプリをTypeScriptで書く環境を作る
from ⬜obniz Board 1Yで遊ぶ
書いた日：2021/9/21
obnizはTypeScriptでかけるらしいので環境を作る
obniz.js 3.3.0 and m5stickc.js 0.2.0リリース - blog.obniz.com
obniz.jsをすべてTypeScriptに書き直しました。
できるようになること
PCで実行したTypeScriptのコードで、obnizを制御する
スキなエディタ・開発環境が使える
環境
TypeScript 4.4.3
node.js v13.7.0
以下、時系列にトラブルと対策を記述した
結論だけ知りたい人はobnizのアプリをTypeScriptで書く環境を作る#6148e7ec774b17000097f6db
環境構築
TypeScript を使って obniz で Lチカ - Qiitaを参考に環境を構築する
サンプルコードのコードを参考に書いてみるとエラーObnizが読み込めずにエラー
https://obniz.com/ja/doc/reference/common/#typescript
https://gyazo.com/c232b95553cae1fd769df249fa80c3c5
このときtsconfigのtargetはes6
import Obniz from 'obniz'に書き換える
原因：typescript - A namespace-style import cannot be called or constructed, and will cause a failure at runtime - Stack Overflow
obniz.displayがundefinedの警告が出る
https://gyazo.com/5fe4fdedbcf690367dfe6a3f48a73c47
guardを入れてエラーを消す
tscでbuildしてrun（node dist/main.js）すると、ビルドではsrc/にmain.jsが生成されるのでmodule not foundになる
解決策：tscのoutDirをdistにする
ここまでのコード
code:ts
import 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が使える
https://nodejs.org/docs/latest-v13.x/api/process.html#process_process_env
これをTypeScriptで使うためには型定義を自分で書く必要がある
TypeScriptでのprocess.envの型定義の方法。このとおりに型定義する
node.js - using process.env in TypeScript - Stack Overflow
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.
How to read environment variables from Node.js
ということでdotenv - npmを入れ、読み出しのコードを追加する
最終的なコード。これを実行するとObniz本体にHello world!と出力される
code: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"
}
}
code:globals.d.ts
// @see https://maku.blog/p/r8iry9g/
declare namespace NodeJS {
interface ProcessEnv {
/** ObnizのID XXXX-XXXX */
readonly OBNIZ_ID: string;
}
}
code:.env
OBNIZ_ID=1234-5678
code:src/main.ts
import 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();