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 内に入り乱れる
    • 拡張子警察がいる場合は気をつけること