uniapp 使用ts所有的标签都是波浪线

问题原因

波浪线警告通常由以下原因导致：

1. TypeScript 无法识别 UniApp 的自定义标签（如 <view>, <text>）
2. 缺少 UniApp 类型声明文件（.d.ts）
3. 编辑器未正确解析 Vue + TypeScript 语法（VS Code 插件配置问题）

解决方案

1. 安装官方类型声明包

npm install @dcloudio/types -D

2. 配置 tsconfig.json

{
  compilerOptions: {
    types: [@dcloudio/types],
    lib: [esnext, dom],
    paths: {
      @/*: [./src/*]
    }
  },
  include: [
    src/**/*.ts,
    src/**/*.vue,
    src/**/*.d.ts,
    auto-imports.d.ts
  ]
}

3. 创建类型声明文件

在项目根目录下新建 shims-vue.d.ts：

// shims-vue.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

// 声明 UniApp 原生组件
declare namespace JSX {
  interface IntrinsicElements {
    view: any;
    text: any;
    image: any;
    button: any;
    // 其他 UniApp 组件...
  }
}

4. 配置 VS Code 插件

1. 安装 Volar（禁用 Vetur）
2. 在 .vscode/settings.json 中添加：

{
  typescript.tsdk: node_modules/typescript/lib,
  vue.experimental.templateInterpolationService: true
}

5. 验证标签语法

确保标签符合 UniApp 规范：

<!-- 正确示例 -->
<view class=container>
  <text>Hello UniApp</text>
</view>

<!-- 错误示例（闭合标签不匹配） -->
<view> // ❌ 缺少闭合标签
  <text>Error</view> // ❌ 标签嵌套错误

进阶配置

1. 自定义组件类型提示

对第三方组件库（如 uview-ui），添加类型声明：

// components.d.ts
declare module 'uview-ui' {
  export const uButton: any;
  export const uInput: any;
  // 其他组件声明...
}

2. 条件编译兼容

在 jsconfig.json 中声明全局变量：

{
  compilerOptions: {
    types: [@dcloudio/types],
    baseUrl: .,
    paths: {
      @/*: [./src/*]
    }
  },
  exclude: [node_modules, unpackage]
}

常见问题排查