目录
1、导入TS类型报错
2、使用类型报错
3、Vue3引入文件爆红且不提示
4、为defineAsyncComponent引入的component子组件设置类型
1、导入TS类型报错
（1）报错信息
import type { FormInstance, FormRules } from 'element-plus'模块 ""element-plus"" 没有导出的成员 "FormInstance"。你是想改用 "import FormInstance from "element-plus"" 吗?
（2）修复方式
// env.d.ts中
// TODO: TS 无法主动发现模块，如果找不到模块，则需要在此使用 declare module 进行配置
declare module 'element-plus/dist/locale/zh-cn.mjs'
declare module 'element-plus/dist/locale/en.mjs'
declare module 'element-plus'2、使用类型报错
（1）报错信息
不能将命名空间“FormInstance”用作类型。
不能将命名空间“FormRules”用作类型。
import type { FormInstance, FormRules } from 'element-plus'
// 这里的类型在使用的时候需要注意
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
userName: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 6, max: 11, message: '长度需要再6-11位', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 11, message: '长度需要再6-11位', trigger: 'blur' }
]
})（2）修复方式1
import type { FormInstance, FormRules } from 'element-plus'
// 这里的类型在使用的时候需要注意
const ruleFormRef = ref<InstanceType<typeof FormInstance>>()
const rules = reactive<InstanceType<typeof FormRules>>({
userName: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 6, max: 11, message: '长度需要再6-11位', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 11, message: '长度需要再6-11位', trigger: 'blur' }
]
})（3）修复方式2
import type { ElForm } from 'element-plus'
type FormInstance = InstanceType<typeof ElForm>
type FormRules = InstanceType<typeof ElForm>
// 这里的类型在使用的时候需要注意
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
userName: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 6, max: 11, message: '长度需要再6-11位', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 11, message: '长度需要再6-11位', trigger: 'blur' }
]
})（4）修复方式3——仅针对ref获取组件实例
如果组件的具体类型无法获得，或者你并不关心组件的具体类型，那么可以使用
ComponentPublicInstance。这只会包含所有组件都共享的属性，比如$el。
import { type ComponentPublicInstance, ref } from 'vue'
const ruleFormRef = ref<ComponentPublicInstance>()
3、Vue3引入文件爆红且不提示
（1）报错信息
找不到模块“../views/Demo.vue”或其相应的类型声明。ts(2307)
（2）解决方式1
在项目下env.d.ts添加以下代码
// 引入文件爆红且不提示的处理
declare module '*.vue' {
import { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}（3）解决方式2
安装插件：TypeScript Vue Plugin (Volar) - Visual Studio Marketplace
需要注意的是，Vue3结合TS开发，一共需要安装的volar插件是两个，除了上边写的还有插件：Vue Language Features (Volar) - Visual Studio Marketplace
4、为defineAsyncComponent引入的component子组件设置类型
（1）报错信息
不能将类型“.......”分配给类型“ComponentProps<DefineComponent<__VLS_TypePropsToRuntimeProps......
（2）解决方式
const TestComp = defineAsyncComponent(
(): Promise<Component> => import('@/components/MenuPolymorphism/MenuPolymorphismIndex.vue')
)
