Vue3 + TypeScript 使用PropType定义prop类型出现解析错误如何解决？

你使用了TypeScript专属的as类型断言语法实现PropType类型标注，但项目的webpack编译链路、ESLint校验规则均未适配TypeScript语法，导致代码解析失败。

• 确认TypeScript相关依赖安装完整
  需要安装typescript、@vue/cli-plugin-typescript两个核心依赖，执行命令安装即可：

npm install typescript @vue/cli-plugin-typescript --save-dev

同时确认你的.vue文件script标签已经正确添加lang="ts"声明。

• 配置tsconfig.json
  在项目根目录新建tsconfig.json文件，参考配置如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

• 调整ESLint配置
  修改项目根目录的.eslintrc.js，使用TS专属解析器，参考配置如下：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020
  },
  rules: {}
}

如果缺少相关ESLint依赖，执行以下命令安装：

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin @vue/eslint-config-typescript --save-dev

• 重启开发服务
  所有配置修改完成后，重新执行vue-cli-service serve启动项目即可。

如果你不需要使用TypeScript，只是要实现复杂Prop校验，可以直接使用Vue原生的validator规则，不需要用到PropType：

export default {
  props: {
    numbers: {
      type: Array,
      validator: (val) => val.every(item => typeof item === 'number')
    }
  }
}

内容的提问来源于stack exchange，提问作者dragonmnl