vue-tsc x TypeScript7

vue-tsc と TypeScript7の問題点と、今できる3つの対応策、typescript-native-bridgeについてのLT発表資料です。

Transcript

1. 2026.10.28 / VueSapporo#5 vue-tsc が TypeScript 7 で動かない！ - 3つの解決策と typescript-native-bridge の仕組み - 三浦 恒樹（MIURA KOUKI）/ 医療ITエンジニア
2. 自己紹介 - 医療ITエンジニア / 診療情報管理士 / 上級医療情報技師 / 医用画像情報専門技師 TypeScript / Vue.js / Node.js / Java / C# / PHP 2026.10～ フクダ電子株式会社に所属 - 3兄弟の父、休日は習い事の送り迎えとか... - 参加している勉強会 札幌PHP勉強会 ゆるWeb勉強会 JBUG札幌 JavaDO えびてく クラメソ札幌IT勉強会（仮） AWS初心者LT会in札幌 札幌すごいAI会 札幌IT石狩鍋 hokkaido.js 函館本線沿線勉強会 JPUG-Ezo VueSapporo さっぽろ医療IT勉強会 ※運営 - コーディングBGM ラックライフ BLUE ENCOUNT SHANK Dizzy Sun Fist - Naru, 名前を呼ぶよ, 初めの一歩, 変わらない空 - Survivor, ポラリス
3. 話すこと 01 02 03 Vue + TypeScript 7 問題 3つの解決策 TNB の仕組み vue-tsc が動かなくなる理由 現時点で取れる選択肢 typescript-native-bridge
4. TypeScript 7 がリリースされた 2026.07.08 正式リリース（GA）― コンパイラが Go 製の tsgo に 10x 高速化される処理 Parsing Type checking Emit Language Server faster native port of TypeScript 出典：TypeScript 7.0 公式ブログ ・ TypeScript 6.0 が JavaScript 製コンパイラ最後のメジャーリリース ・ CI の型チェック待ちが一気に短くなる…はずだった
5. Vue プロジェクトで上げてみると… TypeScript を 7 系に更新して、いつも通り型チェック { やったこと "devDependencies": { "typescript": "^7.0.2", "vue-tsc": "^3.3.11" } ・ typescript を 7 系に更新 ・ vue-tsc は最新（3.3.11） ・ pnpm で型チェックを実行 } 型チェックが 実行すらできない $ pnpm exec vue-tsc -b --noEmit ERR_PACKAGE_PATH_NOT_EXPORTED Package subpath './lib/tsc' is not defined by "exports" in node_modules/typescript/package.json
6. vue-tsc はなぜ動かないのか TypeScript とツールの「境界」の問題 TypeScript 7.0 は、まだ安定した Programmatic API を提供していない 普通の TypeScript プロジェクト Vue プロジェクト（vue-tsc） .vue tsc Vue Language Tools（Volar） Virtual TypeScript TypeScript 7 これで済む TypeScript Programmatic API vue-tsc は TypeScript を「プログラムから利用」している
7. Microsoft の公式見解 TypeScript 7.0 のリリースアナウンスより Vue / Svelte / Astro は、当面 TypeScript 6 のままで 今後の予定 Vue 側の対応 安定した Programmatic API は vuejs/language-tools #5381 TypeScript 7.1 で提供予定 で対応を追跡中 7.1 まで待つしかない？ いえ、3つの解決策があります
8. 解決策① TS6 互換パッケージで振り分ける Microsoft 公式の Side-by-Side（TypeScript 6 と 7 の共存） メリット vue-tsc tsc・その他 TypeScript 6 ・ Microsoft 公式の方法 @typescript/typescript6 ・ tsc は TypeScript 7 で高速化 TypeScript 7 typescript@7（tsgo） 導入のポイント ・ .vue の型チェックは TS6 のまま ・ 2つのバージョンを並べて管理
9. 解決策② 次世代統合ツールチェーン Vize Rust 製の Vue.js ツールチェーン（作者：ubugeeei さん） メリット ・ Rust 製で高速 $ pnpm add -D vize $ pnpm exec vize build $ pnpm exec vize fmt $ pnpm exec vize lint $ pnpm exec vize check # インストール # SFC コンパイル # フォーマット ・ ビルド・Lint・型チェックを 1つのツールに統合 # Lint # 型チェック 導入のポイント ・ 活発に開発が進行中（0.x） ・ lint や check から小さく試せる
10. 解決策③ typescript-native-bridge（TNB） TypeScript 7 へのブリッジ（作者：johnsoncodehk さん / Volar の作者） メリット typescript パッケージを ・ vue-tsc・ESLint・CI はそのまま ・ .vue の型チェックも tsgo で 差し替えるだけ 導入のポイント typescript typescript-native-bridge ・ TypeScript のフォークとして配布 ・ 公式 API（TS 7.1）までのつなぎ
11. TNB の仕組み TypeScript 7 のラッパー：TS6 の API を実装し、処理を tsgo に委譲 TypeScript 6 まで typescript-native-bridge vue-tsc vue-tsc（そのまま） TypeScript API（createProgram など） TS6 互換 API（JavaScript） 型チェッカー（JavaScript 実装） ネイティブブリッジ（cgo・プロセス内） JavaScript tsgo（Go） 外側は TS6 の API のまま、型チェックの中身だけを tsgo に委譲（IPC なし）
12. 導入は pnpm-workspace.yaml だけ overrides でリポジトリ全体の typescript を差し替える # pnpm-workspace.yaml overrides: typescript: npm:typescript-native-bridge@<version> ポイント ・ vue-tsc も ESLint の parser も 自動で TNB を使う ・ catalog: を使っている場合は catalog 側も書き換える $ pnpm install $ pnpm exec vue-tsc -b --noEmit ・ 実行時に「TNB ACTIVE」と 表示されれば OK
13. create-vue でも選べる！ npm create vue@latest の実験的機能に typescript-native-bridge が登場 ポイント ・ create-vue 3.24.0 で確認 ・ Experimental features から選択できる ・ 新規プロジェクトなら 最初から TNB で開始 ・ pnpm なら pnpm create vue@latest
14. まとめ 目的に合わせて選べる3つの選択肢 ① TS6 互換パッケージ ② Vize ③ TNB ・ 公式の方法で TS7 を ・ Vue のツールチェーン全体を ・ 今の vue-tsc の構成のまま 取り入れたい ・ tsc は TS7、vue-tsc は TS6 で共存させたい Rust で高速化したい ・ ビルド・Lint・型チェックを まとめて扱いたい 型チェックを速くしたい ・ .vue の型チェックも tsgo で回したい 本命は TypeScript 7.1 の公式 API ― それまでは目的に合わせて選ぼう
15. ご清聴ありがとうございました。