Skip to content
a type checker for typescript written Vue components
TypeScript JavaScript
Branch: master
Clone or download
Latest commit f7c24fa Oct 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets update bin path and some assets Oct 2, 2019
src add CLI usage and improve printer Oct 1, 2019
.gitignore rewrite in typescript Oct 1, 2019
README.md add blog post link Oct 2, 2019
package-lock.json update bin path and some assets Oct 2, 2019
package.json update bin path and some assets Oct 2, 2019
tsconfig.json rewrite in typescript Oct 1, 2019

README.md

vue-type-check

vue-type-check is a type checker for typescript written Vue components.

It provides both a CLI wrapper and a programmatically API which is easy to integrate with your current workflow.

Features

  • type checking template code.
  • type checking script code.

Usage

CLI

Install: npm i -g vue-type-check

Usage: vue-type-check or vtc
Options:
  --workspace        path to your workspace, required
  --srcDir           path to the folder which contains your Vue components, will fallback to the workspace when not passed
  --onlyTemplate     whether to check the script code in a single file component

Example

We are going to check a simple Vue component with two type errors:

<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>

example.gif

Programmatical API

const { check } = require("vue-type-check");

(async () => {
  await check({
    workspace: PATH_TO_WORKSPACE,
    srcDir: PATH_TO_SRC_DIR,
    onlyTemplate: TRUE_OR_FALSE
  });
})();

How it works

Currently, the implementation is heavily based on vetur's awesome interpolation feature.

If you are interested in the design decisions and the attempts on other approaches, they can be found in this post.

You can’t perform that action at this time.