InstanceType type error：Unsafe assignment of an `any` value
Vue version
3.2.37
Link to minimal reproduction
Steps to reproduce
// index.vue
<script lang="ts" setup>
import { ref } from 'vue';
import MyModal from './MyModal.vue';
// type error：Unsafe assignment of an `any` value
const modal1 = ref<InstanceType<typeof MyModal> | null>(null);
// open can get the correct type：(() => boolean) | undefined
// but lint error：Unsafe member access .value on an `any` value & Unsafe call of an `any` typed value
const openModal = () => {
modal1.value?.open(); // success
};
</script>
<template>
<header>
<img
alt="Vue logo"
class="logo"
src="https://cn.vuejs.org/images/logo.svg"
width="125"
height="125"
/>
<button @click="openModal">点击调用子组件方法</button>
<MyModal ref="modal1" />
<div class="wrapper">
<!-- <HelloWorld msg="You did it!"/> -->
<nav>
<!-- <RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink> -->
</nav>
<button>aa</button>
</div>
</header>
<!-- <RouterView/> -->
</template>
<style></style>
// MyModal.vue
<script lang="ts" setup>
import { ref } from 'vue';
const isContentShown = ref(false);
const open = () => (isContentShown.value = !isContentShown.value);
defineExpose({ open });
</script>
<template>
<div v-if="isContentShown">modal</div>
</template>
<style></style>
tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"baseUrl": ".",
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitThis": true,
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
What is expected?
no lint error
What is actually happening?
lint error
System Info
No response
Any additional comments?
Volar ver：1.0.7
<button @click="openModal">点击调用子组件方法 我看到你这一句中文，但你遇到了啥问题能说下不，可能你已经说了，但我英文不太好。没能看出来
<button @click="openModal">点击调用子组件方法 我看到你这一句中文，但你遇到了啥问题能说下不，可能你已经说了，但我英文不太好。没能看出来
其实就是const modal1 = ref<InstanceTypeany value。调用MyModal里面的方法 modal1.value?.open() lint也是会报any的错，但里面open方法的类型是获取成功的。
<button @click="openModal">点击调用子组件方法 我看到你这一句中文，但你遇到了啥问题能说下不，可能你已经说了，但我英文不太好。没能看出来
你要使用这个ts lint的plugin才会报错的 plugin:@typescript-eslint/recommended-requiring-type-checking
typescript-eslint/recommend-require-type-check 好吧，我项目中确实没有使用到该插件....
typescript-eslint/recommend-require-type-check 好吧，我项目中确实没有使用到该插件....
你可以试下在你项目使用这个插件 看看会不会有问题
typescript-eslint/recommend-require-type-check 好吧，我项目中确实没有使用到该插件....
你可以试下在你项目使用这个插件 看看会不会有问题
这个插件怎么使用的，我可能还得查看下文档
typescript-eslint/recommend-require-type-check 好吧，我项目中确实没有使用到该插件....
你可以试下在你项目使用这个插件 看看会不会有问题
这个插件怎么使用的，我可能还得查看下文档
extends: [ 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking', 'plugin:vue/vue3-recommended', 'prettier', ], parserOptions: { ecmaVersion: 12, parser: '@typescript-eslint/parser', project: ['./tsconfig.json'], sourceType: 'module', ecmaFeatures: { jsx: true, }, extraFileExtensions: ['.vue'], },
在.eslinttrc.js extends那里加上 然后parserOptions加上project字段和extraFileExtensions字段 配置好之后重启下vsconde应该就好了
typescript-eslint/recommend-require-type-check 好吧，我项目中确实没有使用到该插件....
你可以试下在你项目使用这个插件 看看会不会有问题
这个插件怎么使用的，我可能还得查看下文档
或者你嫌麻烦 在你eslint的rules那里加上这几个也可以'@typescript-eslint/no-unsafe-call': 'error', '@typescript-eslint/no-unsafe-member-access': 'error', '@typescript-eslint/no-unsafe-assignment': 'error',
实际我的项目中没有安装eslint..., 如果要弄得话，可能得花些时间， 但是我也挺有兴趣研究下的，但目前时间肯定是不够得，因为快到下班的点了。
typescript-eslint/recommend-require-type-check 好吧，我项目中确实没有使用到该插件....
你可以试下在你项目使用这个插件 看看会不会有问题
这个插件怎么使用的，我可能还得查看下文档
或者你嫌麻烦 在你eslint的rules那里加上这几个也可以'@typescript-eslint/no-unsafe-call': 'error', '@typescript-eslint/no-unsafe-member-access': 'error', '@typescript-eslint/no-unsafe-assignment': 'error',
实际我的项目中没有安装eslint..., 如果要弄得话，可能得花些时间， 但是我也挺有兴趣研究下的，但目前时间肯定是不够得，因为快到下班的点了。
没事 你有时间可以看看 我另一个项目用的vue2 defineComponent这样写是不会报错的 但用vue3就会报错 用defineComponent也会报错 我也不确定是不是vue3暴露出去的组件类型有问题
@DearGu 你好，请问你解决这个问题了，我也遇到了这个问题，只要是用InstanceType就会报错
@DearGu 你好，请问你解决这个问题了，我也遇到了这个问题，只要是用InstanceType就会报错
我暂时是屏蔽对应的ts错误来处理的 还没找到解决方法
@DearGu 你好，请问你解决这个问题了，我也遇到了这个问题，只要是用InstanceType就会报错
我暂时是屏蔽对应的ts错误来处理的 还没找到解决方法
好的，谢谢，我找了一上午了，也没发现相关的解决办法，看来也只能先关闭这个错误提示了，为了用个eslint真心累，配置好了，最后因为一些不得不妥协的地方还是关了许多报错提示，早知道不用eslint了😂
@DearGu 你好，请问你解决这个问题了，我也遇到了这个问题，只要是用InstanceType就会报错
我暂时是屏蔽对应的ts错误来处理的 还没找到解决方法
好的，谢谢，我找了一上午了，也没发现相关的解决办法，看来也只能先关闭这个错误提示了，为了用个eslint真心累，配置好了，最后因为一些不得不妥协的地方还是关了许多报错提示，早知道不用eslint了😂
如果不限制any就还好 限制了这个问题就会出现了