Size Report

Bundles

Usages

Open in Stackblitz

npm i https://pkg.pr.new/@vue/compiler-core@12645

npm i https://pkg.pr.new/@vue/compiler-dom@12645

npm i https://pkg.pr.new/@vue/compiler-sfc@12645

npm i https://pkg.pr.new/@vue/compiler-ssr@12645

npm i https://pkg.pr.new/@vue/reactivity@12645

npm i https://pkg.pr.new/@vue/runtime-core@12645

npm i https://pkg.pr.new/@vue/runtime-dom@12645

npm i https://pkg.pr.new/@vue/server-renderer@12645

npm i https://pkg.pr.new/@vue/shared@12645

npm i https://pkg.pr.new/vue@12645

npm i https://pkg.pr.new/@vue/compat@12645

commit: 2fd0e3d

What's the status with this PR? Can anyone review it? Do I need to add anything?

This adds "just" a type-alias so we can reduce some code when defining a template-ref.

Right now we would need to write code like:

import { useTemplateRef, type ShallowRef } from 'vue'
const myRef: Readonly<ShallowRef<typeof MyComp>> = useTemplateRef('myRef')

With the change we can reduce that to:

import { useTemplateRef, type TemplateRef } from 'vue'
const myRef: TemplateRef<typeof MyComp> = useTemplateRef('myRef')

This makes the code also a little bit more easier to read for newcomers to the project.

I use lefthandside types very often because this ensures that what the developer is wanted to receive here instead of just type what is there. A bit like ts eslint explicit-module-boundary-types

@Shinigami92
Why not define the type of template refs using generic parameters?

like this:

const myRef = useTemplateRef<InstanceType<typeof MyComp>>('myRef')

The official documentation recommends implementing it this way.
https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs

@Mrlilili you literally quoted my post where I gave all the context. Why not just read it.