unplugin-vue-components
unplugin-vue-components copied to clipboard
unplugin
tsx components type declaration support
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.
这样设置试试： dts: 'src/components.d.ts',
还是一样的，你是说把文件加入 tsconfig 吗，现在这样配置应该可以识别，但仅限 SFC
遇到了同样的问题。
unplugin-vue-components 能够识别 tsx 中使用的 VanButton 组件，代码运行没有问题，样式也可以自动引入。
但是它生成的下面这种方式的 vue 全局组件类型，在 tsx 中不能生效，没有类型提示。
declare module 'vue' {
export interface GlobalComponents {
VanButton: typeof import('vant/es')['Button']
}
}
