问题原因

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

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"]
}

常见问题排查