在使用NaiveUI的过程中,引入了unplugin-auto-import和unplugin-vue-components。 这两个组件能自动引入vue方法和vue组件,提升了开发者体验。

但是在vscode中,源码里未手动引用而直接用的方法和组件还是被标红,提示找不到,
在build的时候,tsc-vue报错,

error TS2304: Cannot find name 'NButton'.
error TS2304: Cannot find name 'ref'.

解决方法

在tsconfig.json的include属性里加上 auto-imports.d.ts ,就可以解决不能识别vue方法的问题

{
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"],
}

但是vue组件不识别的问题,解决起来就没这么直接了
截止2023-09-14,unplugin-vue-components对在vue sfc中使用tsx的支持还是有问题
具体讨论可以看下这个合并请求:

fix: tsx component type declaration #673

通过参考上面这个合并请求里的讨论,我想如果手工创建一个 components-tsx.d.ts 文件,在里面加上全局引用, 并把这个文件配置到 tsconfig.json 的include中,是不就能解决报错问题

试了一下,果然可以。之所以不在原来的 components.d.ts 中加,是因为那个文件在使用的组件变化时会自动重新生成, 手动加入的内容会被覆盖掉。

components.d.ts 文件内容

export {}

declare global {
    const NButton: typeof import('naive-ui')['NButton']
}

最终的 tsconfig.json

{
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts", "components-tsx.d.ts"],
}