TypeScript と JavaScript を相互依存可能な状態で開発する

March 8, 2020

ふとした時に「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 するので指定必須

実装です.

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: 🎉🎉🎉