vue-type-check-hapyharshit 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.
Also covers few of the needs to control CI/CD pipeline based on the unwanted code.
- type checking template code.
- type checking script code.
- exit on 1st error based on flag
- validate only the input files
- exclude multiple files/locations
npm i -g vue-type-check-hapyharshityarn add vue-type-check-hapyharshitUsage: vue-type-check-hapyharshit or vtch
Options:
--workspace root directory which contains vue components
--srcDir path to the folder which contains your Vue components, will fallback to the workspace when not passed
--onlyTemplate will only check the html template and skip the the script code in a single file component
--excludeDir directory or file to exclude from the validation, also converts multiple values into an array of files
--failExit flag to exit early with error code 1 at the first error found. Helpful is optimising CI/CD pipelines
<file_names> apart from the options any other arguments passed will be considered as input for validation.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>
const { check } = require("vue-type-check-hapyharshit");
(async () => {
await check({
workspace: PATH_TO_WORKSPACE,
srcDir: PATH_TO_SRC_DIR,
excludeDir: PATH_TO_EXCLUDE_DIR,
onlyTemplate: TRUE_OR_FALSE,
onlyTypeScript: TRUE_OR_FALSE,
failExit: TRUE_OR_FALSE,
});
})();Currently, the implementation is heavily based on vetur's awesome interpolation feature.