search

uni-helper / uni-app-types

为 uni-app 内置组件提供 TypeScript 类型
https://uni-helper.js.org/uni-app-types
MIT License
83 stars 13 forks source link

Vue - Official v2.0.28 导致view、button、image标签类型报错 #67

Closed lzy1960 closed 4 months ago

lzy1960 commented 4 months ago

描述问题

当前Vue - Official 最新版为 v2.0.28，目前仅此版本出现如图问题，低于此版本均正常，tsconfig.json 中已按照文档所述修改

image

复现

  1. 创建uniapp项目，使用vscode打开
  2. 安装插件 Vue - Official v2.0.28
  3. 新建vue文件，template中写view、button、image等标签，即可复现

系统信息

提示“操作已取消”，无法获取

"@uni-helper/uni-app-types": "^0.5.13"

使用的包管理器

pnpm

核对

ModyQyW commented 4 months ago

按照你的描述，2.0.28 之前都没有问题，那应该是插件的问题呀，为什么来这里提问题呢？现在还有 https://github.com/uni-helper/uni-app-types/issues/66 悬而未决，我也不清楚插件那边什么情况🤔

lzy1960 commented 4 months ago

按照你的描述，2.0.28 之前都没有问题，那应该是插件的问题呀，为什么来这里提问题呢？现在还有 #66 悬而未决，我也不清楚插件那边什么情况🤔

不是的，如果tsconfigs中不加uni-app-types，就会正常，只是会出现例如button.type类型不符的问题，所以我认为应该是这个库的问题

我可以先研究下具体的原因

ModyQyW commented 4 months ago

你可以比对一下四种情况

  1. 2.0.28，设置本库
  2. 2.0.28，不设置本库
  3. 2.0.28 前，设置本库
  4. 2.0.28 前，不设置本库

最近一直在加班，怕是暂时没时间看了

aceHubert commented 4 months ago

image image image

flatMap 逻辑修改导致的，之前是先 flat 然后 call plugin, 现在改成了先call plugin, 再 flat 2.0.26 (options)=>pluginInstance | [...(options)=>pluginInstance] 2.0.28 (options)=>[...pluginInstances]

aceHubert commented 4 months ago

image 2.0.21 image 2.0.22

2.0.22及以后，type 智能提示就识别不到了

ModyQyW commented 4 months ago

https://github.com/vuejs/language-tools/issues/4501

https://github.com/uni-helper/uni-app-types/issues/66

https://github.com/uni-helper/uni-ui-types/issues/60

目前是建议先降级，还在等官方回复

ModyQyW commented 4 months ago

我测试了一番，发现 vue2 + volar 2.0.22 或以上无法提供对应的组件支持，恐怕 uni-app-types 也需要放弃 vue2 支持。如果你们测试发现可以提供支持，请告诉我怎么做，我很乐意实现并继续在这个包内提供支持。

如果各位也没有找到可行的办法，那么我计划在 8 月初发布 v1 移除 vue2 支持，并将 uni-app-types@0.5.13 + volar 2.0.21 作为支持 vue2 的推荐记录在 README 中。

感谢各位的支持和理解🙏

ModyQyW commented 4 months ago

我在 volar 仓库中找到了相关的说明 https://github.com/vuejs/language-tools/issues/3738#issuecomment-1816684263

I do think so - Volar only supports Vue 2.7+ and 3.0+, otherwise you should use Vetur. Vetur's support for TS 5.0 is a Vetur issue, not Volar's.

Volar 并没有打算支持 Vue 2.6，建议使用 Vue 2.6 + Vetur 的组合，而 uni-app 并不支持 Vue 2.7+。

ywenhao commented 4 months ago

唉，volar每次更新体验都一言难尽，作者很难受，我们也很难受。。。

ywenhao commented 4 months ago

image

package.json

{
   "@uni-helper/eslint-config": "^0.0.6",
    "@uni-helper/uni-app-types": "^0.5.13",
    "@uni-helper/uni-cloud-types": "^0.5.3",
    "@uni-helper/uni-ui-types": "^0.5.15",
    "@uni-helper/unocss-preset-uni": "^0.2.9",
    "@uni-helper/vite-plugin-uni-components": "^0.0.9",
    "@uni-helper/vite-plugin-uni-layouts": "^0.1.10",
    "@uni-helper/vite-plugin-uni-manifest": "^0.2.6",
    "@uni-helper/vite-plugin-uni-middleware": "^0.0.1",
    "@uni-helper/vite-plugin-uni-pages": "^0.2.26",
    "@uni-helper/vite-plugin-uni-platform": "^0.0.4",
    "@uni-helper/vite-plugin-uni-platform-modifier": "^0.0.2",
    "@vue/runtime-core": "3.4.34"
}

tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": [
      "@dcloudio/types",
      "miniprogram-api-typings",
      "mini-types",
      "@uni-helper/uni-cloud-types",
      "@uni-helper/uni-ui-types",
      "@uni-helper/uni-app-types"
    ],
    "sourceMap": true
  },
  "include": [
    "**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "vueCompilerOptions": {
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
  }
}

Vue - Official v2.0.28

ModyQyW commented 4 months ago

发布了 @uni-helper/uni-types、@uni-helper/uni-app-types、@uni-helper/uni-cloud-types、@uni-helper/uni-ui-types v1.0.0-alpha.0，但还有一些问题，比如 view 这一类自带元素会出现 { class: string } 错误提示等，可能还要找 volar 那边看看为啥

mxp131011 commented 4 months ago

发布了 @uni-helper/uni-types、@uni-helper/uni-app-types、@uni-helper/uni-cloud-types、@uni-helper/uni-ui-types v1.0.0-alpha.0，但还有一些问题，比如 view 这一类自带元素会出现 { class: string } 错误提示等，可能还要找 volar 那边看看为啥

您因该发布错了，我看 npm 的包没有关键的 ts 定义文件 https://www.npmjs.com/package/@uni-helper/uni-app-types?activeTab=code

ModyQyW commented 4 months ago

发布了 @uni-helper/uni-types、@uni-helper/uni-app-types、@uni-helper/uni-cloud-types、@uni-helper/uni-ui-types v1.0.0-alpha.0，但还有一些问题，比如 view 这一类自带元素会出现 { class: string } 错误提示等，可能还要找 volar 那边看看为啥

您因该发布错了，我看 npm 的包没有关键的 ts 定义文件 npmjs.com/package/@uni-helper/uni-app-types?activeTab=code

迁移出错了，非常抱歉，感谢你的支出，已经发布 v1.0.0-alpha.1。近期加班有望结束，希望还能再添加一些新特性再发布正式版。最新代码可追踪 https://github.com/uni-helper/uni-types ，后续将 archive 相关几个仓库。🙏

mxp131011 commented 4 months ago

vue3.3+可以使用 https://gitee.com/mxp_open/mxp-uni-types 代替，注意pinia不要升级到 2.2.0就行，可不用配置

"vueCompilerOptions": {
    "plugins": [
      "mxp-uni-types/volar-plugin"
    ]
  },
mxp131011 commented 4 months ago

发布了 @uni-helper/uni-types、@uni-helper/uni-app-types、@uni-helper/uni-cloud-types、@uni-helper/uni-ui-types v1.0.0-alpha.0，但还有一些问题，比如 view 这一类自带元素会出现 { class: string } 错误提示等，可能还要找 volar 那边看看为啥

https://gitee.com/mxp_open/mxp-uni-types 请看这个解决方式,注意pinia不要升级到 2.2.0就行，而且我还新增 nvue 和微短剧相关的组件

PaperStrike commented 4 months ago

@ModyQyW 测试了下是 https://github.com/vuejs/language-tools/pull/4581 ，移除了对 (PluginContext => PluginReturn)[] 形式的插件的支持，新增了对 PluginContext => (PluginReturn | PluginReturn[]) 形式的插件的支持，需要修改 volar-plugin.ts。

mxp131011 commented 4 months ago

你能告诉我改怎么改吗，我在 https://gitee.com/mxp_open/mxp-uni-types 仓库中有一个解决方案，但是，不支持pinia 2.2.0+，

你能告诉我改怎么改吗，我在 https://gitee.com/mxp_open/mxp-uni-types 仓库中有一个解决方案，但是，不支持pinia 2.2.0+，

PaperStrike commented 4 months ago

@mxp131011 刚开了一个相关 PR，希望可以解决问题 https://github.com/uni-helper/uni-types/pull/10

mxp131011 commented 4 months ago

@mxp131011 刚开了一个相关 PR，希望可以解决问题 uni-helper/uni-types#10

目前没有我的解决方案好，你的解决方案会导致参数没有类型提示， 用我的解决方案，必须去掉 "plugins": [ "mxp-uni-types/volar-plugin" ]

你的： image

我的： image

mxp131011 commented 4 months ago

@mxp131011 刚开了一个相关 PR，希望可以解决问题 uni-helper/uni-types#10

目前没有我的解决方案好，你的解决方案会导致参数没有类型提示，但是我认为你的方案才是正确的解决方案，只是目前Vue - Official有bug

注意 用我的解决方案，必须去掉 "plugins": [ "mxp-uni-types/volar-plugin" ]

你的： image

我的： image

PaperStrike commented 4 months ago

目前没有我的解决方案好，你的解决方案会导致参数没有类型提示

我这边是有类型提示的，不清楚你那边出了什么问题 image image

mxp131011 commented 4 months ago

目前没有我的解决方案好，你的解决方案会导致参数没有类型提示

我这边是有类型提示的，不清楚你那边出了什么问题 image image

可以给我一份 package.json，vite.config.ts，tsconfig.json吗

mxp131011 commented 4 months ago

@mxp131011 刚开了一个相关 PR，希望可以解决问题 uni-helper/uni-types#10

可以给我一份 package.json，vite.config.ts，tsconfig.json吗

mxp131011 commented 4 months ago

@mxp131011 刚开了一个相关 PR，希望可以解决问题 uni-helper/uni-types#10

可以给我一份 package.json，vite.config.ts，tsconfig.json吗


{
  "name": "mywl_dsdj_app",
  "title": "袋鼠短剧",
  "description": "袋鼠短剧的用户端项目",
  "version": "10.00.01",
  "type": "module",
  "author": "mxp131011@qq.com",
  "scripts": {
    "运行": "uni",
    "build:h5": "uni build",
    "更新": "ncu -u  --reject vite,pinia,@dcloudio/vite-plugin-uni,@dcloudio/uni-components,@dcloudio/uni-app-harmony",
    "更新含测试版": "ncu --target newest",
    "uni更新": "npx @dcloudio/uvm@latest",
    "uni更新alpha": "npx @dcloudio/uvm@latest alpha",
    "安装": "pnpm install --force",
    "删除": "rimraf pnpm-lock.yaml && rimraf package-lock.json && rimraf yarn.lock && rimraf .yarn && rimraf node_modules",
    "tsc": "vue-tsc --noEmit --skipLibCheck",
    "prettier": "prettier --write \"{src,vite}/**/*.{js,json,vue,ts,jsx,cjs,mjs,tsx,cts,mts,wxss,wxml,wxs,css,scss}\" --ignore-path .prettierignore",
    "eslint": "eslint \"{src,vite}/**/*.{vue,js,ts,tsx}\" --fix",
    "stylelint": "stylelint \"{src,vite}/**/*.{css,scss,vue}\" --fix",
    "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-jd": "uni -p mp-jd",
    "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:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-jd": "uni build -p mp-jd",
    "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",
    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
    "@dcloudio/uni-app": "3.0.0-4020420240722002",
    "@dcloudio/uni-app-harmony": "3.0.0-4020420240722002",
    "@dcloudio/uni-app-plus": "3.0.0-4020420240722002",
    "@dcloudio/uni-components": "3.0.0-4020420240722002",
    "@dcloudio/uni-h5": "3.0.0-4020420240722002",
    "@dcloudio/uni-mp-alipay": "3.0.0-4020420240722002",
    "@dcloudio/uni-mp-baidu": "3.0.0-4020420240722002",
    "@dcloudio/uni-mp-jd": "3.0.0-4020420240722002",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-4020420240722002",
    "@dcloudio/uni-mp-lark": "3.0.0-4020420240722002",
    "@dcloudio/uni-mp-qq": "3.0.0-4020420240722002",
    "@dcloudio/uni-mp-toutiao": "3.0.0-4020420240722002",
    "@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
    "@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
    "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
    "crypto-js": "^4.2.0",
    "pinia": "2.1.7",
    "vue": "3.4.35",
    "vue-i18n": "^9.13.1"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.4.12",
    "@dcloudio/uni-automator": "3.0.0-4020420240722002",
    "@dcloudio/uni-cli-shared": "3.0.0-4020420240722002",
    "@dcloudio/uni-stacktracey": "3.0.0-4020420240722002",
    "@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002",
    "@eslint/js": "^9.8.0",
    "@rollup/rollup-darwin-x64": "^4.20.0",
    "@types/color": "^3.0.6",
    "@types/crypto-js": "^4.2.2",
    "@types/fs-extra": "^11.0.4",
    "color": "^4.2.3",
    "eslint": "^9.8.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-jsdoc": "^48.11.0",
    "eslint-plugin-vue": "^9.27.0",
    "fs-extra": "^11.2.0",
    "miniprogram-api-typings": "^3.12.2",
    "mxp-uni-types": "^1.0.40",
    "postcss": "^8.4.40",
    "postcss-html": "^1.7.0",
    "prettier": "^3.3.3",
    "sass": "^1.77.8",
    "stylelint": "16.8.1",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-standard-scss": "^13.1.0",
    "stylelint-order": "^6.0.4",
    "typescript": "5.5.4",
    "typescript-eslint": "^8.0.0",
    "vite": "5.2.8",
    "vite-auto-deploy": "^2.0.17",
    "vue-component-type-helpers": "^2.0.29",
    "vue-eslint-parser": "^9.4.3",
    "vue-tsc": "^2.0.29"
  },
  "volta": {
    "node": "20.16.0"
  }
}

import { type ConfigEnv, type PluginOption, type UserConfig, defineConfig } from 'vite';
import * as uni from '@dcloudio/vite-plugin-uni';
import type { VitePluginUniOptions } from '@dcloudio/vite-plugin-uni';
import { dirname, join, resolve } from 'node:path';
import { formatDateTime } from './src/mxp-ui/mxp-tool/utils/time';
import { viteAutoDeployPlugin, viteCompressionPlugin } from 'vite-auto-deploy';
import { fileURLToPath } from 'url';
import fs from 'fs-extra';
import pack from './package.json';

const __dirname = dirname(fileURLToPath(import.meta.url));

const uniPlugin = (uni.default as any).default as (rawOptions?: VitePluginUniOptions) => PluginOption[];
// https://cn.vitejs.dev/config/
export default defineConfig(({ command }: ConfigEnv): UserConfig => {
  const isBuild = Boolean(command === 'build'); // 是不是生产环境(预览环境也不是生产环境)

  return {
    plugins: [
      uniPlugin(),
      copyFile(),
      copyDyFile(),
      compression(),
      viteAutoDeployPlugin({
        /** 上传地址 */
        uploadUrl: 'https://res.daishubobo.com/mywl_asset_server/zip/upload',
        /** 项目名称 (如果多个项目都是用的同上传地址时，服务端可用此字段区分是哪一个项目) */
        projectName: pack.name,
        /** 上传完成后,是否保留压缩包到本地 */
        saveLocalZip: false,
        /** 是否开启自动部署 */
        autoDeploy: process.env.NODE_ENV === 'production' && (process.env.UNI_PLATFORM === 'web' || process.env.UNI_PLATFORM === 'h5'),
      }),
    ],
    base: `/`, // 注意全局搜索一下，在 index.html或其他地方可能有依赖
    define: {
      __APP_VERSIONS__: JSON.stringify(`V${formatDateTime(new Date(), 'YYYYMMDDHHmm')}`),
    },
    // ******打印+debugger清除配置******
    esbuild: {
      pure: process.env.VITE_NODE_ENV === 'development' ? [] : [],
    },
    server: {
      open: isBuild ? 'https://app.daishubobo.com/' : true, // 是否自动打开浏览器
      host: true, // 服务器主机名,如果允许外部访问,可设置为"0.0.0.0"或者true
      strictPort: false, // 设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口。
      cors: true, // 为开发服务器配置 CORS。默认启用并允许任何源
    },
    resolve: { alias: { '@': resolve(__dirname, 'src') } },
  };
});

/** 复制文件 */
function copyFile(): PluginOption {
  if (process.env.NODE_ENV === 'production' && (process.env.UNI_PLATFORM === 'web' || process.env.UNI_PLATFORM === 'h5')) {
    return {
      enforce: 'post',
      async writeBundle() {
        await fs.copy(resolve(__dirname, './src/build/.htaccess'), join(__dirname, 'dist/build/h5/.htaccess'));
      },
    } as any as PluginOption;
  } else {
    return {} as PluginOption;
  }
}

/** 复制文件 (抖音配置行业 SDK 的权限) */
function copyDyFile(): PluginOption {
  if (process.env.UNI_PLATFORM === 'mp-toutiao') {
    return {
      enforce: 'post',
      async writeBundle() {
        const url = process.env.NODE_ENV === 'production' ? 'build' : 'dev';
        await fs.copy(resolve(__dirname, './src/build/package.json'), join(__dirname, `dist/${url}/mp-toutiao/package.json`));
      },
    } as any as PluginOption;
  } else {
    return {} as PluginOption;
  }
}

/** 压缩 */
function compression(): PluginOption {
  if (process.env.NODE_ENV === 'production' && (process.env.UNI_PLATFORM === 'web' || process.env.UNI_PLATFORM === 'h5')) {
    return viteCompressionPlugin({
      threshold: 1024 * 10,
      algorithm: 'gzip',
    }) as PluginOption;
  } else {
    return {} as PluginOption;
  }
}

{
  "compilerOptions": {
    "baseUrl": "./", // 用于解析非相对模块名称的基目录
    "composite": true,
    "target": "ESNext", // 目标语言的版本
    "module": "ESNext", // 生成代码的模板标准
    "moduleResolution": "bundler", // 选择模块解析策略
    "esModuleInterop": true,
    "allowImportingTsExtensions": true,
    "isolatedModules": true, // 将每个文件做为单独的模块 (vite所需)
    "allowSyntheticDefaultImports": true, // 允许从没有设置默认导出的模块中默认导入 (解决 不支持使用引入 使用export=导出的模块问题)
    "jsx": "preserve", // 指定 jsx 代码的生成
    "types": [
      "@dcloudio/types",
      "vite/client", // vite的类型
      "mxp-uni-types"
    ],
    "useDefineForClassFields": true,
    "moduleDetection": "force",
    "lib": ["ESNext", "DOM", "DOM.Iterable"], // TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入"ES2019.Array",
    "strict": true, // 启用所有严格类型检查选项
    "noImplicitAny": true, // 在表达式和声明上有隐含的 any类型时报错
    "strictNullChecks": true, // 当类型检查时,要考虑' null '和' undefined '。
    "noImplicitThis": true, // 当 this 表达式值为 any 类型的时候,生成一个错误
    "alwaysStrict": true, // 以严格模式检查每个模块,并在每个文件里加入 'use strict'
    "resolveJsonModule": true, // 启用.json文件导入
    "allowJs": true, // 允许编译器编译JS，JSX文件
    "checkJs": false, // 允许在JS文件中报错，通常与allowJS一起使用
    "noUnusedLocals": true, // 有未使用的变量时,抛出错误
    "noUnusedParameters": true, // 有未使用的参数时,抛出错误
    "noImplicitReturns": true, // 并不是所有函数里的代码都有返回值时,抛出错误
    "noFallthroughCasesInSwitch": true, // 报告 switch 语句的 fallthrough 错误。(即,不允许 switch 的 case 语句贯穿)
    "useUnknownInCatchVariables": false, // 类型捕获子句变量为'unknown'而不是'any'
    "removeComments": true, // 移除注释
    "noEmit": true, // 禁止编译器生成文件
    "newLine": "lf", // 设置生成文件的换行符
    "forceConsistentCasingInFileNames": true, // 强制文件名的大小写一致
    "strictFunctionTypes": true, // 在赋值函数时,请检查以确保参数和返回值是子类型兼容的
    "strictBindCallApply": true, // 检查' bind '、' call '和' apply '方法的参数是否与原始函数匹配
    "strictPropertyInitialization": true, // 检查在构造函数中声明但没有设置的类属性
    "noUncheckedIndexedAccess": true, // 在索引签名结果中包含'undefined'
    "noImplicitOverride": true, // 确保派生类中的重写成员用重写修饰符标记
    "paths": {
      "@/*": ["src/*"]
    },
    "importHelpers": true,
    "sourceMap": true,
    "skipLibCheck": true
  },
  "include": [
    "src/**/*.vue",
    "src/**/*.nvue",
    "src/**/*.ts",
    "./prettier.config.*",
    "./eslint.config.*",
    "./stylelint.config.*",
    "./vite.config.*",
    "./tsconfig.json"
  ],
  "exclude": ["src/uni_modules/"],
  "vueCompilerOptions": {
    "plugins": ["mxp-uni-types/volar-plugin"],
    "strictTemplates": true, // 禁止无效的模板
    "extensions": [".vue", ".nvue", ".uvue"]
  }
}
mxp131011 commented 4 months ago

@mxp131011 刚开了一个相关 PR，希望可以解决问题 uni-helper/uni-types#10

可以给我一份 package.json，vite.config.ts，tsconfig.json吗,我看看是那里有问题

ModyQyW commented 3 months ago

我即将归档这个仓库并将工作迁移到 @uni-helper/uni-types 中继续进行