TypescriptでJavascript
- まず初めに、Typescriptで直接Javascriptのモジュールは呼び出せない
- 対応策は以下のQiitaの記事にあるように
- TypeScript で型定義ファイル( d.ts )がないときの対処法
@types からインストールする
型定義ファイル( d.ts )を自作する
require でモジュール読み込み
@typesにはたいていライブラリがないので自分で型定義ファイル( d.ts )を自作することになる
型定義ファイル( d.ts )を自作する
-
src/@types ディレクトリを作成する。 - tsconfig.jsonのcompilerOptionsにて、"baseUrl": "src/typings"、"paths"に型定義するモジュール名称を指定するのがただしそう
- 参考
使ってみた感じdts-genのほうが良いように見えた。 そんなことはなかった。dts-gen実行してもコケて何も出力されないことが多い。
手順(dts-gen)
詳しくは
を参照
$ mkdir src/@types $ vim tsconfig.json # <-- typeRoots: ["src/@types"] を追記する $ npm i -D dts-gen $ npx dts-gen -m <モジュール名> $ tsconfig.jsonにTypeScriptオプションのbaseUrl, pathsの組み合わせで型定義ファイルへのパスを指定する
- これで型定義ファイルが生成され、TypescriptからJavascriptのモジュールが呼べるようになる
- ただし、試してみるとtypescriptにない定義でエラーはいて終了という場合もある
手順(dts-make)
実行例
// ライブラリのトップレベルの型定義生成 $ npx dtsmake --exportStyle "es6" --export \ -M electron-photon -n Photon \ --src ./node_modules/electron-photon/photon.js \ --dist src/typings/electron-photon/index \ # <--- ライブラリのtopとしてindex.d.tsを作らせる --extrafiles "$(find node_modules/electron-photon/dist/ -name \*.js -print | tr '\n' ',' | sed -e 's/,$//g')" // その他の型定義生成 $ npx dtsmake --exportStyle "es6" --export \ -M electron-photon -n "Photon.Button" \ --src ./node_modules/electron-photon/dist/xxx.js \ --dist src/typings/electron-photon/xxx \ --extrafiles "$(find node_modules/electron-photon/dist/ -name \*.js -print | tr '\n' ',' | sed -e 's/,$//g')"
- --exportStyle: "es6" を指定すべし
- --export (-e): を指定しないとjavascriptのmoduleがexportされない
- --exportModuleName (-M): -M EXAMPLE, とすると import example = require("EXAMPLE"); で使える
- --n (-n): -n Example, とすると, Exampleがコードで使えるようになる
- --src (-s): に多分トップレベルのjsファイルを渡す
- 新しめのプロジェクトの場合、それでいいでしょう
- --extrafiles (-x) で型の推論がされるらしい
- Unixコマンドでカンマ区切り(,)でjsファイルを渡すようにしている
バーっと全部作ってほしいが、そういうことはできないようだ。私の場合、シェルを実装して動的に生成するようにしたりした。