Running TypeScript 7 in Vue via .tsx, no waiting required

TypeScript 7's new Go-based compiler just launched, but tools built around custom file formats — Vue's .vue, Svelte, Astro, MDX — can't use it yet. The reason: language services like Volar rely on a shim that hooks into TypeScript's internal APIs, and that shim hasn't caught up with TypeScript 7's new architecture. The author describes writing Vue components directly in .tsx files instead of .vue, which let their production app adopt TypeScript 7 immediately, with zero shims or waiting.

This works because Vue has always treated .vue files as optional — render functions and JSX are officially supported. A properly configured .tsx file (via the jsx and jsxImportSource compiler options) is just ordinary TypeScript, understood natively by the compiler, linter, and editor, bypassing the elaborate filesystem interception Volar performs for SFCs.

Importantly, writing JSX doesn't cost Vue its reactivity model: unlike React's manual dependency arrays and effect hooks, Vue automatically tracks reactive dependencies at runtime. In a real Nuxt application with roughly eight hundred TSX components, the switch to TypeScript 7 was a one-line version bump, with full type-checking completing in about 46 seconds.