tsx components type declaration support

[pawover]

Clear and concise description of the problem

使用如下配置：

import { VantResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';

export const configComponents = () => {
  return Components({
    extensions: ['js', 'jsx', 'ts', 'tsx', 'vue'],
    dts: true,
    resolvers: [VantResolver()],
    include: [/\.vue$/, /\.vue\?vue/, /\.md$/, /\.tsx$/, /\.jsx$/],
  });
};

可以得到一个 components.d.ts:

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

declare module 'vue' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    VanButton: typeof import('vant/es')['Button']
  }
}

然后在 App.tsx 中使用：

export const App = defineComponent(() => {
  return () => (
    <>
      <VanButton type="primary">myButton</VanButton>
      <RouterView />
    </>
  );
});

会得到 ts 报错： 但事实上组件是可以工作的：

Suggested solution

只需要在 components.d.ts 中添加：

declare global {
   const RouterLink: typeof import('vue-router')['RouterLink']
   const RouterView: typeof import('vue-router')['RouterView']
   const VanButton: typeof import('vant/es')['Button']
}

就可以消除报错：

所以，可否在生成类型声明时额外添加全局声明以支持 tsx 组件？ 虽然 unplugin-auto-import 可以做到这点，但是因为已经有了 xxxResolver 感觉还是更符合知觉一点。

或者如果有现成的解决方案的话请告诉我，谢谢！

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[lishaobos]

这样设置试试： dts: 'src/components.d.ts',

[pawover]

这样设置试试： dts: 'src/components.d.ts',

还是一样的，你是说把文件加入 tsconfig 吗，现在这样配置应该可以识别，但仅限 SFC

[lishaobos]

麻烦提供个 git 仓库，我看下

[pawover]

麻烦提供个 git 仓库，我看下

https://github.com/Handpear/unplugin-vue-components-test

[a382775086]

使用vue文件自动引入tsx组件时，在生产环境下会导致组件解析失败，似乎需要主动声明才行

[lishaobos]

你这个确认，其他非 tsx 组件的类型都生效了吗

[a382775086]

不光是tsx组件需要主动声明，其他使用过tsx组件的vue组件 似乎也需要主动声明，目前来看应该是这样的，没找到解决办法

[lishaobos]

我的意思是，除去 tsx 组件，纯 vue 的类型有生效吗，如果都没有，可以提供一个 git 仓库

[a382775086]

除去tsx是生效的

[lishaobos]

那你提个 issue，帮忙提供个简单的 git 仓库，我看下

[eiinu]

遇到了同样的问题。 unplugin-vue-components 能够识别 tsx 中使用的 VanButton 组件，代码运行没有问题，样式也可以自动引入。

但是它生成的下面这种方式的 vue 全局组件类型，在 tsx 中不能生效，没有类型提示。

declare module 'vue' {
  export interface GlobalComponents {
    VanButton: typeof import('vant/es')['Button']
  }
}

[a382775086]

http://www.musfxe.cn皋，快来陪我斗几把，太有意思了，我这几天寝就没睡觉，只在这里玩，我发现睡觉真是太浪费青春了。