vscodeでのTypeScriptのライブラリ開発とかでJSから参照するとき型を表示させる方法

今回は発見したライフハックを紹介します。
前提として、Visual studio codeに以下拡張機能を入れてください。

TL;DR

TSで作ったライブラリを外部からJSで参照するときはindex.jsとindex.tsを用意すると型補完(?)ができる

フォルダ構成

dist
- bundle.js
src
- index.ts
- ...
...

このような構成のライブラリとかを他フォルダから参照する場合はフォルダ配下に以下を追加します。

index.ts
index.js

そしてその内容を以下にします。

index.js

export * from "./dist/bundle.js"

index.ts

export * from "./src/index.ts"

何をしたか

拡張子以外同じJS/TSで同じ内容(バンドルされたもの/生)をエクスポートするようにしました

何が良いか

なんとindex.tsでエクスポートした内容がTypeScriptで宣言した型にしたがって補完の所に型が表示されます！

良いJS型ライフを！