TypeScript と JavaScript を相互依存可能な状態で開発する
ふとした時に「rollup で bundle している JavaScript の中で TypeScript を部分的に適応させたい」といったニーズが発生してしまったため, 実現方法について調べたみた.
TL;DR
- rollup の TypeScript plugin を使う
- ↑ の設定で JS の read/compile を許可する
typescript({ include: ["*.(j|t)s+(|x)", "**/*.(j|t)s+(|x)"] }),
tsconfig.js
を適宜設定するoutDir
を指定していないと tmp file(JS) の書き出しが override 扱いになってしまって faile するので指定必須
Implemet Sample
実装です.
https://github.com/lidqqq/apps/tree/tsjs
FYI: 手元で動かしてみたい方向け
npx degit "lidqqq/apps#tsjs" my-app
cd my-app && npm ci && npm run start
解説
下記のように .ts
, .js
が入り乱れており, TS からの JS の import, JS から TS の import を経た上で, index.js
から end.ts
まで parameter をバケツリレーしているだけ.
index.js
import hoge from '@src/hoge.ts';
console.log(hoge(['🎉🎉🎉']));
end.ts
export default (param: string) => {
return `received at the end: ${param}`;
};
build && run
$ nr start
> npm run build
> rollup -c
src/index.js → dist...
created dist in 1.3s
> node dist/index.js
received at the end: 🎉🎉🎉
pros and cons
pros
- 既存 JS 開発に負荷ゼロで TS を 即時適応できる
- JS 開発のメンタルモデルは据置
- vscode を使っていると TS 側の定義を読み取って JS 側でも補完してくれるので最高(多分他の editor もそう)
cons
.ts
,.js
が Project 内に入り乱れる- 拡張子警察がいる場合は気をつけること