VueプロジェクトをTypeScript7に対応させる- Side-by-Side戦略による一部高速化 -

TypeScript7をVueプロジェクトで使いたいけどどうすれば良いか？一部だけでも使えないか？というLT発表の資料です。

Transcript

1. 2026.08.31 / 【非公式】Vue Fes Japan 2026 機運醸成勉強会 by hokkaido.js VueプロジェクトをTypeScript7に対応させる - Side-by-Side戦略による一部高速化 - 三浦 恒樹 (MIURA KOUKI) / 医療ITエンジニア
2. 自己紹介 - ドゥウェル株式会社 に所属（マネージャー） 医療ITエンジニア / 診療情報管理士 / 上級医療情報技師 / 医用画像情報専門技師 TypeScript / Vue.js / Node.js / Java / C# / PHP - 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 TypeScript 7とは何か Vueで何が起きたか Side-by-Sideで共存させる Goで書き直されたNative Compiler vue-tscが動かなくなる理由 変えられるところから変える
4. 今日話したいこと TypeScript 7、速いらしい。 Vueプロジェクトも TypeScript 7に上げればいいのでは？ なぜ？ 実際にやってみると…… ERR_PACKAGE_PATH_NOT_EXPORTED そして、どうする？
5. TypeScript 7とは？ 「TypeScriptの高速化」ではなく「TypeScriptの実装基盤の変更」 TypeScript 6.0 まで TypeScript 7 TypeScript compiler Compiler Language Service Language Service JavaScript implementation Native implementation JavaScript Go TypeScript 7 は Go で実装された Native TypeScript compiler / language service
6. どれくらい速い？ TypeScript公式ブログでの説明 高速化される処理 10x faster native port of TypeScript 出典：TypeScript 7.0 公式ブログ • 実際には処理によって差がある（すべてが10倍になるわけではない） • 大規模プロジェクトほど恩恵を受けやすい Parsing Type checking Emit Language Server
7. ただし、Vueには問題がある TypeScript 7 は、まだ安定した Programmatic API を提供していない 普通のTypeScriptプロジェクト Vueプロジェクト .vue tsc Vue Language Tools Virtual TypeScript TypeScript 7 TypeScript これで済む Vue toolingがTypeScript compilerを 「プログラムから利用」している
8. 実際にTypeScript 7へ上げてみる { "devDependencies": { "typescript": "^7.0.2", "vue-tsc": "^3.3.11" } } $ pnpm type-check すると…… やったこと • typescript を 7系に更新 • vue-tsc は最新（3.3.11） • 型チェックを実行
9. ERROR Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: ポイント Package subpath './lib/tsc' is not defined by "exports" in .../typescript/package.json 型チェックで エラーになった のではない スタックトレースには… そもそも起動していない resolveExports › resolveTscPath › vue-tsc/index.js
10. 何が起きているのか？ vue-tsc は単純に tsc を実行しているわけではない vue-tsc がやっていること 1 .vue を解析する 2 Virtual TS code を生成する 3 TypeScript compiler を利用する TypeScript API TypeScript 7 では typescript/lib/tsc のような内部実装への依存が、そのま ま成立しない vue-tsc TypeScript 7 ERR_PACKAGE_PATH_NOT_EXPORTED
11. ここでTypeScript公式の戦略を見る TypeScript 7 に用意された移行戦略 Side-by-Side TypeScript 7 + TypeScript 6 2つのTypeScriptを、同時にインストールして使い分ける
12. なぜ2つ必要なのか？ 役割分担で考える TypeScript 7 TypeScript 6 tsc tsc 高速な Native Compiler 既存の Programmatic API コンパイル・型チェックを速く ツールがAPI経由で使う Compilerとしては 7 を使いたい。 でも、まだ 6 のAPIに依存するツールがある。 この状態を、公式にサポートする
13. npm alias による Dual Install TypeScript公式の例 { "devDependencies": { "@typescript/native": "npm:typescript@^7.0.2", "typescript": "npm:@typescript/typescript6@^6.0.2" } こう解決される @typescript/native } TypeScript 7 → tsc typescript npm alias を使って、パッケージ名と中身をずらす。 TypeScript 6 → tsc6 「typescript」という名前で 6 を、別名で 7 をインストールする。 2つのTypeScriptを別名で共存させる
14. Vueの場合はどうする？ ここが今回の本題 Vue Language Tools 側も、この問題に対応している TypeScript 7 + @typescript/typescript6 を前提とした Dual-Install 対応が進められている PR #6123 vuejs/language-tools github.com/vuejs/language-tools/pull/6123
15. Vue Language Tools の Dual-Install Vue Project vue-tsc tsc TypeScript 6 API TypeScript 7 Vue Language Tools Native Compiler 型チェックはこちら ここが速くなる 「全部 TypeScript 7 にする」のではなく、「TypeScript 7 を使えるところから使う」
16. Side-by-Sideの本質 単なる「一時的な回避策」ではない TypeScript 7 は 大きなアーキテクチャ変更 TypeScript 7 Compiler 直接利用できるツール 7 Language Service 6 API に依存するツール 6 Programmatic API → 段階的な移行が可能になる アーキテクチャが変わったからこそ、共存が「公式の移行パス」になっている
17. では、何が高速化される？ Vueプロジェクト全体が 「全部 10x faster！」になるわけではない TypeScript 7 を利用できる経路から、 段階的に高速化する。 Vue project vue-tsc Vue Language Tools → TS 6 API そのまま tsc TypeScript 7 → Native Compiler 高速化 other tooling TS 6 / TS 7 ツール次第 ※ vue-tsc 経由の型チェックは TypeScript 6 のままなので、そこは速くならない
18. 今回のエラーから学べること 「vue-tscが古い」で終わらせない TypeScript 7 Vue は SFC を扱う Vue SFC API境界が変わった Vue Language Tools Toolingが内部APIに依存していた Virtual TypeScript TypeScript Vue Language Toolsとの互換性問題 「TypeScriptそのもの」だけでは完結しない Tooling Architecture になっている コンパイラと Tooling の依存関係を見るきっかけになる
19. まとめ TypeScript 7 しかし そこで • GoベースのNative Compiler • • Side-by-Side（6と7の共存） • 大幅なパフォーマンス改善 安定したProgrammatic APIがま だない • npm aliasによるDual Install • Vue Language Toolsは compiler APIを使う • Vue Language Toolsも対応中 • 単純な「7への置き換え」では動かな い • Compiler / Language Service の刷新 TypeScript 7 と TypeScript 6 を共存させる TypeScript 7 + TypeScript 6
20. References 1 TypeScript 7.0 devblogs.microsoft.com/typescript/announcing-typescript-7-0/ 2 Running Side-by-Side with TypeScript 6.0 devblogs.microsoft.com/typescript/announcing-typescript-7-0/#running-side-by-side-with-typescript-6.0 3 Vue Language Tools #6123 github.com/vuejs/language-tools/pull/6123 4 Vue Language Tools CHANGELOG github.com/vuejs/language-tools/blob/master/CHANGELOG.md
21. ご清聴ありがとうございました。