Vue3组合式API泛型组件中Ref类型不匹配如何解决？

我在使用Vue3组合式API搭配TypeScript时，编写了如下代码：

<script setup lang="ts" generic="T">
import { ref, Ref } from "vue";

const props = defineProps<{
  myProp: T;
}>();

const model: Ref<T> = ref(props.myProp);
</script>

我的IDE（WebStorm 2024.1.2搭配Vue Language Server 1.8.27）提示以下错误：

• Vue: 类型 Ref<UnwrapRef<T>> 不能赋值给类型 Ref<T>
• Vue: 类型 UnwrapRef<T> 不能赋值给类型 T

补充说明：该行代码在构建时确实会报错。

可行解决方案（针对无嵌套字段场景） #

我通过使用shallowRef解决了该问题（我的场景中T没有嵌套字段）：

const model: ShallowRef<T> = shallowRef(props.myProp);

不推荐的方案及原因 #

另一种方案是对ref进行类型断言，但该方案并不合适：

const model = ref<T>(props.myProp) as Ref<T>;

存在的问题：

• 如果类型T包含嵌套ref，model.value的类型（即UnwrapRef<T>）无法赋值给类型T
• ESLint会提示："ESLint: 该断言是不必要的，因为它不会改变表达式的类型。(@typescript-eslint/no-unnecessary-type-assertion)"

内容的提问来源于stack exchange，提问作者Arkandias