TypeScript Vue Plugin is also needed to get type support for *.vue imports in TS files. If you have Vetur currently installed, make sure to disable it in Vue 3 projects. Volar replaces Vetur, our previous official VSCode extension for Vue 2. Volar is the official VSCode extension that provides TypeScript support inside Vue SFCs, along with many other great features. Visual Studio Code (VSCode) is strongly recommended for its great out-of-the-box support for TypeScript. Vue CLI also provides TypeScript support, but is no longer recommended. You can run vue-tsc in watch mode in parallel to the Vite dev server, or use a Vite plugin like vite-plugin-checker which runs the checks in a separate worker thread. It works largely the same as tsc except that it supports Vue SFCs in addition to TypeScript files. vue-tsc is a wrapper around tsc, TypeScript's own command line interface. If using SFCs, use the vue-tsc utility for command line type checking and type declaration generation. This ensures the Vite dev server stays blazing fast even when using TypeScript.ĭuring development, we recommend relying on a good IDE setup for instant feedback on type errors. With a Vite-based setup, the dev server and the bundler are transpilation-only and do not perform any type-checking. Project Setup Ĭreate-vue, the official project scaffolding tool, offers the options to scaffold a Vite-powered, TypeScript-ready Vue project. All official Vue packages come with bundled type declarations that should work out-of-the-box. Vue is written in TypeScript itself and provides first-class TypeScript support. TypeScript also improves developer ergonomics via type-based auto-completion in IDEs. This reduces the chance of runtime errors in production, and also allows us to more confidently refactor code in large-scale applications. A type system like TypeScript can detect many common errors via static analysis at build time.

Jetbrains webstorm 2021