uni-app 【报Bug】v3 + ts开发时 button标签设置type="primary" 有错误提示，使用VSCode开发工具

uni-app 【报Bug】v3 + ts开发时 button标签设置type=“primary” 有错误提示，使用VSCode开发工具

示例代码：

<button @click="login" type="primary" class="btn">微信登录</button>

操作步骤：

<button @click="login" type="primary" class="btn">微信登录</button>

预期结果：

button标签设置type="primary"不会用错误提示

实际结果：

button标签设置type="primary"会有错误提示

bug描述：

v3 + ts开发，button标签设置type=“primary” 有错误提示，用VSCode 开发工具。

信息类别 信息内容
产品分类 uniapp/小程序/微信
PC开发环境 Windows
PC开发环境版本 Windows 10 家庭中文版
HBuilderX类型 正式
HBuilderX版本 3.4.4
第三方工具版本 3.3.11.20220209
基础库版本 2.22.0
项目创建方式 HBuilderX


更多关于uni-app 【报Bug】v3 + ts开发时 button标签设置type="primary" 有错误提示，使用VSCode开发工具的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

vscode的语法校验是为web做的，未兼容小程序。 良好的开发体验推荐使用HBuilderX

更多关于uni-app 【报Bug】v3 + ts开发时 button标签设置type="primary" 有错误提示，使用VSCode开发工具的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题已确认，相关团队的开发人员正在协助解决，感谢您的反馈！

这个什么时候解决？

在使用 uni-app 进行 V3 + TypeScript 开发时，如果你在 button 标签上设置 type="primary" 时遇到错误提示，可能是因为 TypeScript 的类型检查机制无法识别 type="primary" 这个属性值。button 标签的原生 type 属性通常只接受 submit、reset 和 button 等值，而 primary 是 uni-app 框架中扩展的属性值。

解决方法

方法一：忽略 TypeScript 的类型检查

你可以通过 @ts-ignore 注释来忽略 TypeScript 对该行的类型检查：

<!-- @ts-ignore -->
<button type="primary">Primary Button</button>

这种方法简单直接，但会忽略该行的所有类型检查，可能会隐藏其他潜在的错误。

方法二：扩展 button 标签的类型定义

你可以通过扩展 button 标签的类型定义来让 TypeScript 识别 type="primary" 这个属性值。

  1. 在项目中创建一个 shims.d.ts 文件（如果还没有的话）。
  2. 在 shims.d.ts 文件中添加以下内容：
import 'vue';

declare module 'vue' {
  interface HTMLAttributes {
    type?: string;
  }
}

这样，TypeScript 就会允许 button 标签的 type 属性接受任意字符串值，包括 primary。

方法三：使用 uni-app 提供的组件

uni-app 提供了一些内置的组件，如 uni-button，你可以直接使用这些组件来避免类型检查问题：

<uni-button type="primary">Primary Button</uni-button>
回到顶部