React+TypeScriptで、自作のjsモジュール読込みやってみた。

Abstract

どうしてもWebAssembly(c/c++)でやりたい処理があって、ところがWebAssembly(c/c++)は、jsモジュールしか出力せんくって、で、TypeScriptな僕にどげんせろって!!
というモチベーションで、React+TypeScriptなWebアプリで、jsモジュールの読込みをやってみた。

結論

今回の成果物はココ↓
https://github.com/aaaa1597/ReactTs-WebAsm001

前提

• windowsだよ。
• React+Typescriptの開発環境は構築済 [環境構築]WindowsにVSCode+React+TypeScriptの開発環境を構築してみた。
• React+TypeScriptのボイラーテンプレートReact-Ts-Templateから。

ざっくり手順

1. 適当にjsモジュール作成
2. jsモジュールに対応した、d.tsファイルを作成
3. React+TypeScriptでimportして呼び出す。
4. 実行

手順詳細

1. 適当にjsモジュール作成

   cd React-Ts-Template/src   # プロジェクトフォルダに移動
   mkdir libs                 # jsモジュール置き場を作成
   type nul > aaaaa.js        # aaaaa.jsを自分で生成
   

   aaaaa.tsの中身

   export function aaa00(name, years) {
     console.log(`00 ${name}.`, ` ${years}th.`);
     return 'aaa-00';
   }
   

2. jsモジュールに対応した、d.tsファイルを作成

   cd                        # 現在のパスを確認
   D:\Products\React.js\ReactTs-WebAsm001_2
   type nul > aaaaa.d.js     # aaaaa.d.jsを自分で生成
   

   aaaaa.d.jsの中身

   declare export function aaa00(name: string, years: number): string;
   

3. React+TypeScriptでimportして呼び出す。

   App.tsx

   import React from 'react';
   import './App.css';
   +import { aaa00, aaa01, aaa02 } from './libs/aaaaa';
   
   function App() {
   + console.log('---- ret00 = ', aaa00('aaa000', 0))
   + const persons = aaa01(['aaa001', 'bbb002'], 1)
   + console.log('---- ret01 = ', ...persons)
   + const argbuf = new Uint8Array([11, 22, 33])
   + const ret02 = aaa02(argbuf, 2)
   + console.log('---- ret02 = ', ret02)
   
     return (
       <div className="App">
         hello world!!
       </div>
     );
   }
   
   export default App;
   

4. 実行
   
   出来た!!
   配列の引数も、戻り値も、TypedArrayの引数も、戻り値も、できたから良しとする。

ホントはsrc/@types配下に、aaaaa.d.tsファイルを置いて実行させたかったんだけどね...
動いたからいいや。