uniapp-typescript-vue报错

Question

我用npx degit dcloudio/uni-template-vue3-ts my-uniapp-project 命令下载了一个基于uniapp+vue3+ts的项目

但是运行时警告

我的tsconfig.json文件如下

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    },
    "lib": ["esnext", "dom"],
    "types": [
      "vue",
      "src/**/*.vue",
      "@dcloudio/types",
      "miniprogram-api-typings",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ]
  },
  "vueCompilerOptions": {
    // experimentalRuntimeMode 已废弃，现调整为 nativeTags，请升级 Volar 插件至最新版本
    "nativeTags": ["block", "component", "template", "slot"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

导致我的vue文件会各种警告如

我的pakage.json如下

{
  "name": "uni-app-xiaotuxian",
  "version": "0.0.0",
  "author": {
    "name": "itheima",
    "url": "https://web.itheima.com/"
  },
  "scripts": {
    "dev:app": "uni -p app",
    "dev:app-android": "uni -p app-android",
    "dev:app-ios": "uni -p app-ios",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:app": "uni build -p app",
    "build:app-android": "uni build -p app-android",
    "build:app-ios": "uni build -p app-ios",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
    "tsc": "vue-tsc --noEmit --skipLibCheck",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  },
  "dependencies": {
    "@dcloudio/uni-app": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-app-plus": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-components": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-h5": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-alipay": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-baidu": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-jd": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-lark": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-qq": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-weixin": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-mp-xhs": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-3081220230802001",
    "@dcloudio/uni-ui": "^1.5.0",
    "pinia": "2.0.27",
    "pinia-plugin-persistedstate": "^3.2.0",
    "vue": "^3.2.47",
    "vue-i18n": "^9.2.2"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.4.3",
    "@dcloudio/uni-automator": "3.0.0-3090620231104002",
    "@dcloudio/uni-cli-shared": "3.0.0-3090620231104002",
    "@dcloudio/uni-stacktracey": "3.0.0-3090620231104002",
    "@dcloudio/uni-vue-devtools": "3.0.0-alpha-3080220230511001",
    "@dcloudio/vite-plugin-uni": "3.0.0-3090620231104002",
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/node": "^18.11.9",
    "@uni-helper/uni-app-types": "^0.5.12",
    "@uni-helper/uni-ui-types": "^0.5.11",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/runtime-core": "^3.2.45",
    "@vue/runtime-dom": "^3.4.20",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "husky": "^8.0.0",
    "lint-staged": "^13.0.3",
    "miniprogram-api-typings": "^3.12.0",
    "prettier": "^2.7.1",
    "sass": "^1.56.1",
    "typescript": "^5.1.6",
    "vite": "^4.0.3",
    "vue-tsc": "^1.8.8"
  }
}

然后VSCODE也安装了插件Volar(没有下载Vetur)

看了网上各种教程，node_modules 也删除了重装，还是警告。到底哪里出错了

Answer 1

引自免费微信小程序：皆我百晓生

在您的问题中，您下载了一个基于uni-app+vue3+ts的项目，并尝试运行它。出现的问题主要在于TypeScript编译器无法找到Vue提供的类型声明文件。

问题1：找不到@vue/tsconfig/tsconfig.json

在您的tsconfig.json中，第一行试图继承一个名为"@vue/tsconfig/tsconfig.json"的基础配置文件，但编译器找不到这个文件。这可能是因为在项目的依赖项中并未包含Vue官方提供的类型声明包。为了解决这个问题，请确保已经安装了@vue/types或@vue/compiler-sfc，它们通常会提供必要的TS配置文件。

npm install -D @vue/types

或者

npm install -D @vue/compiler-sfc

然后检查一下@vue/types或@vue/compiler-sfc对应的路径是否正确，根据实际安装情况调整extends字段。

问题2：Vue组件中的属性和方法引用警告

例如，"模块“'vue'”没有导出的成员'ref'" 和 "类型“{}”上不存在属性“bannerList”。ts(2339)" 这些警告表明TypeScript编译器在类型检查时没有识别到Vue提供的ref函数和其他组件属性的类型定义。

为了解决这类问题，除了确认已安装Vue3的类型声明（如上述），还需要确保Volar插件能够正确处理Vue3的模板和脚本中的类型信息。请检查Volar的版本是否与当前使用的Vue3版本兼容，并确保Volar是启用状态。

如果仍然存在问题，可以在src目录下创建一个shims-vue.d.ts文件，添加以下内容来手动引入Vue3的全局声明：

// shims-vue.d.ts
import Vue from 'vue'
import type { ComponentCustomProperties } from 'vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    // 假设你有全局注入的属性，例如这里的`$http`
    $http: any;
  }
}

// 添加对Vue3 Composition API的支持
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  export default defineComponent
}

同时，确保在.vue文件中正确导入并使用Composition API，如：

<script setup lang="ts">
import { ref } from 'vue'

const bannerList = ref<any>([])
</script>

另外，在tsconfig.json的types数组里，不需要直接引用vue，因为@vue/types或@vue/compiler-sfc应该已经包含了Vue相关的类型声明。如有需要，可以保持其他特定于uni-app和uni-ui的类型声明。