More and more people are trying to write their Vue projects in Typescript, and Vue itself is increasingly supporting Typescript (vue-class-Component libraries, Vue 3.0 in Typescript, etc.). However, there are still significant limitations to type checking in the template part of a component.

To do this, we’ve opened source an easy-to-use Vue type checker: vue-type-Check, which checks both template and script parts of Vue components written in Typescript.

Vue-type-check provides both CLI and API usage modes, and outputs clear error messages to seamlessly integrate with existing workflows.

The sample

We type check the following Vue single-file components, which contain two type errors:

  • Variables used in the templatemsgIs not defined in the component.
  • printMessageMethod is incorrectly used for a value of type stringtoFixedMethods.
<template> <div id="app"> <p>{{ msg }}</p> </div> </template> <script lang="ts"> import Vue from "vue"; export default Vue.extend({ name: "app", data() { return { message: "Hello World!" }; }, methods: { printMessage() { console.log(this.message.toFixed(1)); }}}); </script>Copy the code

For more information, please refer to the documentation.

The working principle of

At present, vuE-Type-Check is completely based on the Interpolation feature of Vetur. The internal implementation of interpolation can be referred to this article.

Vue-type-check was developed on the basis of Vetur to avoid its limitations:

  • Vetur exists as a vscode editor plug-in that does not integrate well with continuous integration workflows and has limited usage scenarios.
  • Vetur Interpolation is an experimental feature at present, and due to its hack implementation, it lacks stability in use. In actual use, there will be a problem that vue Language Server crash needs to restart. In contrast, vue-type-check only checks the type of files that have been edited, which is more stable.
  • The vetur interpolation hasn’t done much performance optimization yet and in a project where we have a lot of auto-generated Typescript code it can cause vscode to be very slow.

We actually tried other implementations before, but ultimately we moved to vetur based development because we wanted to avoid duplication and keep applying the latest features and optimizations in Vetur to Vue-Type-Check.

On the other hand, Vetur also has plans for how to use the CLI, and we will try to feed back the work done in Vue-Type-Check to the community.

Other attempts to

Other attempts have been made in the Vue component template code type checking community, and we learned from Katashin’s article about the pros and cons of several ideas.

Method 1: Compile the Vue template and check it

Because Vue actually compiles templates to JS code, it is possible to implement a template -> TS compiler to type check the compiled results. The problem with this approach is that vue-template-Compiler does not provide source map support, and therefore cannot mark the error location after transformation.

Method two: Implement a type checker

Re-implementing a type checker in the Angular way takes advantage of some of the capabilities of the Typescript API, but it is still far from Typescript itself, making it difficult to implement complex type checking (such as function overloading and generics).

Option 3: Convert templates to Typescript AST

This approach takes full advantage of the capabilities of the Typescript compiler and correctly flags where errors occur. This is how Katashin finally used vetur’s patch, which is currently converted by Vue-eslint-Parser.