无法使用 typescript 编译我的 vue 应用程序

Question

以前它工作正常，但当我尝试 npm run update 后，每当我尝试 npm run watch 时都会出现此错误。我使用 vue js 与 typescript 和 laravel-mix 。

TS2345: Argument of type '{ illness: { required: ValidationRuleWithoutParams<any>; }; relationship: { required: ValidationRuleWithoutParams<any>; }; description: { ...; }; }' is not assignable to parameter of type 'ValidationArgs<{ illness: string; relationship: string; description: string; }> | Ref<ValidationArgs<{ illness: string; relationship: string; description: string; }>>'.
  Type '{ illness: { required: ValidationRuleWithoutParams<any>; }; relationship: { required: ValidationRuleWithoutParams<any>; }; description: { ...; }; }' is not assignable to type 'ValidationArgs<{ illness: string; relationship: string; description: string; }>'.
    Types of property 'illness' are incompatible.
      Type '{ required: ValidationRuleWithoutParams<any>; }' is not assignable to type 'ValidationRule<string>'.

我厌倦了恢复我的 package.json 并删除了我的节点模块文件夹并重新安装了所有内容，但我仍然收到此错误。

这是我的 package.json

{
    "private": true,
    "name": "app",
    "version": "4.0.0",
    "description": "",
    "keywords": [
        "Pharmacy",
        "pos",
        "software"
    ],
    "author": "Muhammad",
    "license": "ISC",
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "dependencies": {
        "@chenfengyuan/vue-barcode": "^2.0.0",
        "@sideway/address": "^4.1.1",
        "@vuelidate/core": "^2.0.0-alpha.25",
        "@vuelidate/validators": "^2.0.0-alpha.21",
        "axios": "^0.21.1",
        "bootstrap": "^4.6.0",
        "chart.js": "^3.2.2",
        "chokidar": "^3.5.1",
        "core-js": "^3.9.0",
        "joi": "^17.4.0",
        "jquery": "^3.5.1",
        "laravel-mix": "^6.0.29",
        "moment": "^2.29.1",
        "popper.js": "^1.16.1",
        "primeflex": "^2.0.0",
        "primeicons": "^5.0.0",
        "primevue": "^3.12.1",
        "prosemirror-utils": "^0.9.6",
        "quill": "^1.3.7",
        "register-service-worker": "^1.7.1",
        "v-tooltip": "^2.1.2",
        "vue-axios": "^3.2.4",
        "vue-class-component": "^8.0.0-0",
        "vue-fullscreen": "^3.0.11",
        "vue-meta": "^2.4.0",
        "vue-router": "^4.0.4",
        "vue-toastification": "^2.0.0-rc.1",
        "vuelidate": "^0.7.6",
        "vuex": "^4.0.0",
        "webcam-easy": "^1.0.5",
        "webpack": "^5.69.1"
    },
    "devDependencies": {
        "@types/node": "^17.0.21",
        "@vue/compiler-sfc": "^3.0.2",
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "fork-ts-checker-webpack-plugin": "^7.2.1",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.0-beta.11",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.4",
        "resolve-typescript-plugin": "^1.1.5",
        "resolve-url-loader": "^2.3.1",
        "ts-loader": "^9.2.7",
        "typescript": "^4.6.2",
        "vue": "^3.0.2",
        "vue-loader": "^16.0.0-beta.9"
    }
}

这是指向错误的文件

export default class FamilyHistory extends Vue {
    private recordList = [];
    private recordID = 0;
    private submitted = false;
    private pService;
    private illnessList = [];
    private relationshipList = [];
    private toast;
    private componentName = "";
    private vuexStore = useStore();

    private state = reactive({
        illness: "",
        relationship: "",
        description: "",
    });

    private validationRules = {
        illness: {
            required,
        },
        relationship: {
            required,
        },
        description: {
            required,
        },
    };

    private v$ = useVuelidate(this.validationRules, this.state);
}

Answer 1

你的 package.json 搞砸了。

在依赖项中，您有两个包@vuelidate/core/@vuelidate/validators，即Vuelidate for Vue 3 和 "vuelidate": "^0.7.6" 这是package Vuelidate 0.x for Vue 2

要么你在某个地方导入了错误的类型，要么只是 TS 正在加载类型定义来自错误的包（由于重复）。如果没有看到所有代码，很难说...

只需删除 Vue 2 的包，因为您正在使用 Vue3

，顺便说一句 vue 应该可能在您的 依赖项 中，不是devDependency