Saul-Mirone/milkdown: 🍼 Plugin driven WYSIWYG markdown editor framework.とjazz-soft/react-midi-player: React MIDI Playerを組み合わせて使おうとしたら、React MIDI PlayerがTypeScript未対応らしく、モジュール 'react-midi-player' の宣言ファイルが見つかりませんでした。とのこと。

react-midi-player.d.tsを作ったらそこのエラーは消えたけど、今度は@milkdown関連のimportが軒並みエラーになってしまった。

結局、いくつか動かして試してみた。additional-propertiesは無指定で。

• Documentation for the typescript-fetch Generator
  • ReferenceError: _ is not defined
• Documentation for the typescript-node Generator
  • Module not found: Can't resolve 'request'
  • requestパッケージはDeprecated!らしい。
• Documentation for the typescript-axios Generator
  • とりあえず動いた。
  • axiosパッケージの追加インストールが必要。

ということで、typescript-axios でやってみようと思う。

E2Eテスト書くなら、OpenAPIのクライアントコードジェネレータ使って出力したもの使えばよいのでは？ と思いついたので、どのクライアントにしようかとGenerators Listを眺める。

せっかくだからTypeScriptが良いなと思うが、11種類もあってどれが適切なのか判断付かない。 実際に生成して使って比較すればよいのだろうけど、そこまで詳しくない言語でそれをやろうとすると挫折する気しかしない。

MDMMLのTypeScript移植が大体できたので、HTMLから呼び出せるようにしたい。

先日はexportしてるはずなのに見つからないというエラーでどうしたら良いかわからず。

HTMLから外部のJavascriptファイルのfunctionを呼びたいはやりたいこととあっているように思える。

interface Window { Hello(): void; }
declare var window: Window;
window.Hello = () => {
    console.log(Buffer.from(MDtoSMF("cdefg")).toString("binary"));
};

としてみたら呼べたけれど、今度はBuffer is not definedだと。

いろいろやってみて、

import { MDtoSMF } from './mdmml';

interface Window { MDtoSMF(md: string): ArrayBuffer; }
declare var window: Window;
window.MDtoSMF = (md: string) => {
    return MDtoSMF(md);
};

これで動いた。正しい自信はない。。

もともとGoで書いていたテストがこんな感じだったのだけど、 こんな風に移植してて面倒だと感じていた。

TS と Jest で Table Driven Test をする · tblogを参考に書き換えて、こうなった。

マークダウンから変換したSMFデータを標準出力に書き出したいのだけれど、バイナリをそのまま出力する方法がわからず。。

console.logだと型情報とかついた普通のテキストになってしまう。

$ node dist/main.js
Uint8Array(45) [
  77,  84, 104, 100,  0,   0,   0, 6, 0,   1,  0,
   1,   3, 192,  77, 84, 114, 107, 0, 0,   0, 23,
   0, 255,   3,   0,  0, 255,  81, 3, 7, 161, 32,
   0, 255,  88,   4,  4,   2,  24, 8, 0, 255, 47,
   0
]

fsパッケージを使おうとしたけれど、Module not found: Error: Can't resolve 'fs'などと言われてbuildできず。

replaceAllを使いたくて、tsconfig.jsonに以下設定を追加した。

    "lib": [
      "ES2021.String"
    ]

replaceAllが使えるようになったが、TextEncoderを使っているところでエラーになるようになってしまった。

error TS2304: Cannot find name 'TextEncoder'.

定義がないのか？と思って@types/text-encoding - npmにあるとおり追加してみた。

npm install --save @types/text-encoding

別のエラーが出るようになった。