InstanceType type error：Unsafe assignment of an any value

[DearGu]

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNqlVM1u00AQfpWpD5BKjVdF4tI6gQohFYle+ClC8qEbe+Jsu961dtcJUcgFkLhyAA48ARckJCSkqjwObbnxCszacf7Kz4GLvTO73zf/Mwn2iiIclhjsBJFNjCgcSK6yThw4Gwdg0ZVFN1YiL7RxMAGDfZhC3+gcrhPs+u787mB8oFMuZ3chm8me3L+KFWPgxgUCGqPNz28fHivL+wjcWpGpHJUD3Qeu4Iir8REMuSwxVolW1kHumbah481H90jDVYKPiCzyjASbGevCc1CllN2W/26SWYDKsC5QQULkGTpwA4REG4MJnQlPvrRam9DpQk9riVxtEk2pUuwLhWmF75WUF0EurjmfY95DAzxJ0FoIK6dBq7Uw4BrM3idcypUwvf10NVjva53KDtRuTXwcdQ5qE7dC/6i1uQvkmy0r67GazuKNWF1JqhsJDvNCcockAUQD5Cma6kySyLP6BMClo6IfkrNSZzoOGn0iqUB0s6q1JiHdwLnC7jCWKF/lYxtqkzGR8wwt8+9DO8wWmJFI3YBQ2zduLpQDFNnAW17SssY9yrqjZN5OpEhO6M08M3HQvXxxev767Mfnl5dvP55/enN59ur72deL96cXX95FrAY2NE1nUvMQSZ1H6u25mVQM52GODC8KNGSg8TDaaLch2kcp9RNtZAq59ePxVJeQihSE24gD1oV2e4FQfDgXGoIHunRo7gt1Ak4TnpGJfZ1jxBY3S6A5+AqO90hD4D3/X0Gv+MCWnbiSSc6JgfP1TDFKRd0nbN4olbgUwqHAURNvxJa6i0TrxhK71H/VP1bBVlBvh3bOi/DYakV7purmeHZBS2an7m+voy7y8qKzbD9Zai06haZUTuQYos3bPaNHFg0Rx8HWEgcj5RBN2yANsfHV/DPn2tMrvJ52SrNFoSxttP9Yl82YC3tHK0dr7+FAj1S921p9Li36vbVYBfMt0FpFzJZNBzZ+p/cc8WyF3X1WaIutSU039Vd/WxF+HIZt4WdllZlaphqepk3+Wf3pL3IGLMY=

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

[GDGHD-123]

<button @click="openModal">点击调用子组件方法 我看到你这一句中文，但你遇到了啥问题能说下不，可能你已经说了，但我英文不太好。没能看出来

[DearGu]

<button @click="openModal">点击调用子组件方法 我看到你这一句中文，但你遇到了啥问题能说下不，可能你已经说了，但我英文不太好。没能看出来

其实就是const modal1 = ref<InstanceType | null>(null); ts校验会报错Unsafe assignment of an any value。调用MyModal里面的方法 modal1.value?.open() lint也是会报any的错，但里面open方法的类型是获取成功的。

[DearGu]

<button @click="openModal">点击调用子组件方法 我看到你这一句中文，但你遇到了啥问题能说下不，可能你已经说了，但我英文不太好。没能看出来

你要使用这个ts lint的plugin才会报错的 plugin:@typescript-eslint/recommended-requiring-type-checking

[GDGHD-123]

typescript-eslint/recommend-require-type-check
好吧，我项目中确实没有使用到该插件....

[DearGu]

typescript-eslint/recommend-require-type-check
好吧，我项目中确实没有使用到该插件....

你可以试下在你项目使用这个插件 看看会不会有问题

[GDGHD-123]

typescript-eslint/recommend-require-type-check
好吧，我项目中确实没有使用到该插件....

你可以试下在你项目使用这个插件 看看会不会有问题

这个插件怎么使用的，我可能还得查看下文档

[DearGu]

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应该就好了

[GDGHD-123]

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..., 如果要弄得话，可能得花些时间，
但是我也挺有兴趣研究下的，但目前时间肯定是不够得，因为快到下班的点了。

[DearGu]

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暴露出去的组件类型有问题

[fightingsun]

@DearGu 你好，请问你解决这个问题了，我也遇到了这个问题，只要是用InstanceType就会报错

[DearGu]

@DearGu 你好，请问你解决这个问题了，我也遇到了这个问题，只要是用InstanceType就会报错

我暂时是屏蔽对应的ts错误来处理的 还没找到解决方法

[fightingsun]

@DearGu 你好，请问你解决这个问题了，我也遇到了这个问题，只要是用InstanceType就会报错

我暂时是屏蔽对应的ts错误来处理的 还没找到解决方法

好的，谢谢，我找了一上午了，也没发现相关的解决办法，看来也只能先关闭这个错误提示了，为了用个eslint真心累，配置好了，最后因为一些不得不妥协的地方还是关了许多报错提示，早知道不用eslint了😂

[DearGu]

@DearGu 你好，请问你解决这个问题了，我也遇到了这个问题，只要是用InstanceType就会报错

我暂时是屏蔽对应的ts错误来处理的 还没找到解决方法

好的，谢谢，我找了一上午了，也没发现相关的解决办法，看来也只能先关闭这个错误提示了，为了用个eslint真心累，配置好了，最后因为一些不得不妥协的地方还是关了许多报错提示，早知道不用eslint了😂

如果不限制any就还好 限制了这个问题就会出现了

[litchia]

解决了吗兄弟 这问题都那么久了还有。。

[alexzhang1030]

没看到有报错了现在

[panknows]

Have any updates?

[jh-leong]

I can't reproduce this issue in the latest playground or locally in VSCode.

Could you please provide an actual reproduction?