前端 - vue 开发中内置元素怎么提供提示?

Question

换了 Vue-Official 的编辑器扩展后就不生效,如果使用之前的 volar 是可以生效的。

import { Component, SwiperProps, SwiperItemProps, SwiperItem } from '@uni-helper/uni-app-types'
declare global {
  namespace JSX {
    interface IntrinsicElements {
      swiper: SwiperProps
      // swiperItem: SwiperItemProps
      swiperItem: SwiperItem
      swiper20: SwiperItemProps
    }
  }
}

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    swiper: SwiperProps
    swiperItem: SwiperItemProps
    swiper20: SwiperItemProps
  }
}

declare module 'vue3/jsx-runtime' {
  namespace JSX {
    interface IntrinsicElements {
      swiper: SwiperProps
      swiperItem: SwiperItemProps
      swiper20: SwiperItemProps
    }
  }
}

试了一下上面的方式都没用生效,其中 props 结尾的类型是组件的属性类型。SwiperItem 等于 _SwiperItem, type _SwiperItem = _Component<_SwiperItemProps>

Answer 1

https://uni-typed.netlify.app/guide/uni-app-types.html#%E9%85...

Answer 2

在 Vue 开发中，如果你正在使用 JSX 并且想要为自定义组件或内置元素（如你例子中的 swiper 和 swiperItem）提供类型提示，你需要确保你的类型声明正确，并且与你的项目设置（包括使用的编辑器扩展）兼容。

首先，从你提供的代码片段来看，有几个地方可能存在问题或不一致：

1. 拼写错误：你声明了 SwiperProps 和 SwiperItemProps，但通常应该是 Swiper 或 SwiperItem 的拼写错误，比如可能是 Swiper 应该是 Swiper 或 swiper（取决于你的组件名），SwiperItemProps 应该是 SwiperItemProps 或 swiperItemProps（同样取决于你的组件和属性名）。
2. 全局 JSX 命名空间声明：你的 JSX 命名空间声明看起来是正确的，但是确保你的组件名和属性名与实际的组件和属性名相匹配。
3. Vue 编辑器扩展：你提到在切换到 Vue-Official 的编辑器扩展后，类型提示不生效。这可能是因为该扩展不完全支持 JSX 或与你的项目配置不兼容。你可以尝试查看该扩展的文档或社区，看看是否有相关的配置或限制。
4. 类型声明位置：你的类型声明可能需要在正确的位置。通常，这些声明会放在全局的 .d.ts 文件中，或者在你的组件文件旁边。
5. Vue 3 和 JSX 运行时：你提到 vue3/jsx-runtime，但通常 Vue 3 使用的是 @vue/babel-plugin-jsx 或直接在 Vue 3 的 JSX 转换中处理 JSX。确保你的 Babel 配置或 TypeScript 配置支持 JSX。

解决步骤

1. 检查拼写：确保所有的组件名和属性名都是正确的，没有拼写错误。
2. 更新或回退编辑器扩展：如果 Vue-Official 编辑器扩展不工作，尝试回退到之前工作的版本（如 Volar），或者查看是否有更新解决了问题。
3. 检查类型声明：确保你的类型声明正确，并且与你的组件和属性名匹配。
4. 配置 TypeScript：确保你的 tsconfig.json 包含了正确的 JSX 配置（如果你在使用 TypeScript）。
5. 查看文档和社区：查看 Vue、Volar、TypeScript 的文档和社区，看看是否有其他人遇到并解决了类似的问题。
6. 简化问题：尝试从简单的组件和属性开始，逐步增加复杂度，以便更容易地定位问题。

示例类型声明

以下是一个简化的类型声明示例，用于 Vue 3 和 JSX：

// 在全局的 .d.ts 文件中
declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

// 对于 JSX 自定义元素
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'swiper': {
        // swiper 的 props
        props: {
          // 属性定义
          autoplay?: boolean;
          // ... 其他属性
        };
      };
      'swiper-item': {
        // swiper-item 的 props
        props: {
          // 属性定义
          // ...
        };
      };
    }
  }
}

注意：这里的 'swiper' 和 'swiper-item' 应该是你实际使用的组件标签名。