Description
-
Use class-based components, not Vue's proprietary data shape that gets passed to Vue.extend. (at least for Vue 2)
-
For Vuex support (types on your action / mutation payloads), use https://github.com/championswimmer/vuex-module-decorators.
-
Put
"vetur.experimental.templateInterpolationService": truein your VS Code settings to get TypeScript analysis on your<template>in .vue files. This only works inside VS Code with Vetur installed -vue-cli-service buildwon't show you type errors in your<template>. -
Don't forget that
@someEvent='someEventHandler'isn't type safe. This is the only major area where Vue and TypeScript don't play nice and you end up with a black hole of untyped data coming into your application. -
Unrelated to Vue - verify the data coming into your app using IO-TS: https://github.com/gcanti/io-ts
-
For linting, use ESLint + Prettier. Rather than wrestling with the setup, just use the Vue CLI (or run vue ui) and then choose to add TypeScript support to your project when initially creating it and choose ESLint + Prettier.
@ts-ignoreis banned by default. To change that, modify your eslintConfig.rules in yourpackage.jsonfile. Here's mine:
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint"
],
"parserOptions": {
"parser": "@typescript-eslint/parser",
"ecmaVersion": 2020
},
"rules": {
"no-debugger": 1,
"@typescript-eslint/ban-ts-ignore": 0,
"no-var": 1,
"@typescript-eslint/no-array-constructor": 1,
"@typescript-eslint/camelcase": 1,
"@typescript-eslint/no-use-before-define": 0,
"prefer-const": 1,
"@typescript-eslint/no-inferrable-types": 1,
"@typescript-eslint/no-this-alias": 1,
"@typescript-eslint/no-unused-vars": 1,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-empty-function": 0,
"no-console": 0,
"@typescript-eslint/no-non-null-assertion": 0
}
}