vue-tsc

What is vue-tsc?

The vue-tsc npm package is a TypeScript type checker for Vue.js applications. It is used to perform type checking on Vue single-file components (SFCs) and their associated TypeScript code. It works alongside Vite and Vue 3 to provide a development experience with type safety.

What are vue-tsc's main functionalities?

Type Checking for Vue SFCs

This command performs type checking on Vue single-file components without emitting any code. It is typically used in a build or CI pipeline to ensure type safety before deployment.

vue-tsc --noEmit

Type Checking with Code Emission

This command performs type checking and also emits the compiled JavaScript code to the specified directory. This can be used as part of a build process that requires the compiled output.

vue-tsc --outDir dist

Other packages similar to vue-tsc

typescript

The TypeScript npm package is the core TypeScript compiler. It provides type checking and code compilation for TypeScript files. While it does not have built-in support for Vue SFCs, it is the underlying technology that vue-tsc leverages for type checking.

vls

VLS (Vetur Language Server) is part of the Vetur extension for Visual Studio Code and provides language support for Vue.js. It includes features like syntax-highlighting, snippet generation, Emmet, linting/error checking, formatting, and auto-completion. It is similar to vue-tsc in that it provides type checking for Vue files, but it is more focused on the in-editor experience rather than being a standalone CLI tool.

vetur

Vetur is a Visual Studio Code extension that provides tooling for Vue.js development, including syntax highlighting, IntelliSense, linting, and formatting. It is similar to vue-tsc in that it helps with type checking and error detection in Vue SFCs, but it is specifically designed as an integrated development environment (IDE) extension rather than a command-line tool.

README

vue-tsc

vue-tsc --noEmit && vite build

Vue 3 command line Type-Checking tool base on IDE plugin Volar.

Roadmap:

• Type-Checking with --noEmit
• Use released LSP module
• Make typescript as peerDependencies
• Cleaner dependencies (remove prettyhtml, prettier etc.) (with vscode-vue-languageservice version >= 0.26.4)
• dts emit support
• Watch mode support

Using

Type check:

vue-tsc --noEmit

Build dts:

vue-tsc --declaration --emitDeclarationOnly

Sponsors

This company is sponsoring this project to improve your DX. 💪

Changelog

0.28.7 (2021/10/18)

• fix: can't access $slots, $props... in template if no script block (#601)
• fix: defineEmit not working with type alias (#607)
• fix: GlobalComponents working for vue2 (#609)