vuejs with ts-check

vuejs-ts-check-tricks.md

ts check

ignore next ts check error

const app = new Vue({
  router,
  store,
  // @ts-ignore
  ...App
})

finding *.vue files

Use a file with any filename with content:

// vue-module.d.ts
declare module "*.vue" {
    import Vue from 'vue'
    export default typeof Vue
}

globals. e.g. from "extended-define-webpack-plugin"

File globals.d.ts in folder of file using globals:

  // interface APP_CONFIG {
//     myVar: string;
// }

declare var __BUILD_NO__: string;
declare var __appConst__: any;

In vue file using the global for Eslint

/* global __BUILD_NO__, __appConst__ */

import path alias

In vue file using import:

// import EditCard from "components/EditCard";
import EditCard from "@/components/EditCard.vue";

Ending .vue is necessary to trigger d.ts file from above containig declare module "*.vue"

In webpack.config.js

resolve: {
    extensions: [".js", ".vue", ".css", ".json"],
    alias: {
      root: path.join(__dirname, "../client/src"),
      components: path.join(__dirname, "../client/src/components"),
      "@": path.join(__dirname, "../client/src")
    },

In jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
     "paths": {
       "@/*": ["client/src/*"]
     }
  }
},

supressing arrow function error

like:

'Parameter 'state' implicitly has an 'any' type.'

In jsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
  }
}

dont use arrow function to return component data object

  data() {
    return {
      editCardOpen: false
    };
  },
  
  // Also OK
  // data: function () {
  //   return {
  //     editCardOpen: false
  //   };
  // },
  
  // Not OK, 
  // Finds: Type "'false' is not assignable to type 'boolean'", but not "Property 'varDoesNotExist' does not exist on type"
  // data: () => ({
  //   editCardOpen: false
  // }),

In this way ts check not only defined types like editCardOpen in this example, but throw erros on non existing properties:

  mounted: function() {
    this.varDoesNotExist = "false"; // <-- Property 'varDoesNotExist' does not exist on type 'CombinedVueInstance<Vue, [...]
    this.editCardOpen = "false"; // <-- Type "false" is not assignable to type 'boolean'.
    }

general jsconfig.json

{
  "compilerOptions": {
    "checkJs": true,
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "noUnusedLocals": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "baseUrl": "./",
    "paths": {
      "@/*": ["client/src/*"]
    },
    "lib": [
      "es5",
      "es2015.collection",
      "es2015.promise",
      "dom",
      "es2016.array.include"
    ]
  },
  "exclude": ["node_modules", "build", "dist", "docs", "misc", "scripts"],
  "include": ["client/src/**/*"]
}