2.7: TS7056 Triggered when ref type argument has a vue component as an option and an initial ref value is passed

[nermolov]

Version

2.7.14

Reproduction link

github.com

Steps to reproduce

• Create a new Vue 2 + Typescript project with npx vue create
• Upgrade project to Vue 2.7 with npm install vue@2.7.14
• Set "declaration": true in tsconfig.json
• Declare a ref in your component setup whose type argument is a union of a different vue component or null, and set its initial value to null: const helloWorld = ref<InstanceType<typeof HelloWorld> | null>(null);
• Return the ref from setup

What is expected?

No error

What is actually happening?

npx vue-tsc --emitDeclarationOnly
src/App.vue:12:1 - error TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.

 12 export default defineComponent({
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 13   name: 'App',
    ~~~~~~~~~~~~~~
... 
 23   }
    ~~~
 24 });
    ~~~

---

Not passing an initial value, e.g.

const helloWorld = ref<InstanceType<typeof HelloWorld> | null>();

does not trigger the error, nor does passing an initial value when the type argument does not include another Vue component, e.g.

const xyz = ref<string | undefined>(undefined);

"declaration": true is needed because the repo this issue was discovered in is a shared package that is imported by other Vue applications, and type declarations are required.

This issue does not happen with Vue 2.6 with @vue/composition-api, only 2.7

[5z5]

Maybe it's typescript

[Buyu1016]

I saw a similar problem in TypeScript, microsoft/TypeScript#43817, may be able to help you.