Vue3+TS中ComputedRef属性赋值报类型不兼容如何解决

这个类型错误由Vue3响应式API的类型自动解包规则导致：

• 使用ref<T>()声明响应式变量时，Vue的类型系统会递归深度解包T内部所有的Ref/ComputedRef类型，把所有Ref<K>、ComputedRef<K>自动转换为K类型，对齐脚本和模板中访问ref时自动取.value的行为。
• 你声明的files类型为ref<UploadableFile[]>，经过Vue类型解包后，数组元素的price属性会从ComputedRef<number>被推导为number类型，但实际赋值的newUploadableFiles数组中，每个实例的price仍然是ComputedRef<number>实例，类型不匹配就触发了报错。
• 你猜测的「ref被意外自动解包」方向是对的，只是这个解包发生在类型定义层面，而非运行时实际执行，所以才会出现类型飘红但代码可运行的情况。

另外原代码中dimensions: Ref未声明泛型参数，默认会推导为Ref<any>，会丢失尺寸对象的类型约束；且构造函数中调用computePrice时直接传入了Ref类型的this.dimensions，未取.value，运行时也会出现逻辑错误，建议一并修正。

方案1：使用shallowRef声明files数组（改动最小，性能最优） #

如果UploadableFile实例内部已经自行管理dimensions、price的响应式逻辑，外层files不需要深度追踪每个实例内部的属性变化，仅需追踪数组本身的增删、替换操作，直接将ref替换为shallowRef即可解决问题：

// 从vue导入需要的API和类型
import { ref, computed, shallowRef, type Ref, type ComputedRef } from 'vue';

// 补全dimensions的泛型声明
export class UploadableFile {
  file: File;
  dimensions: Ref<{width: number, height: number}>;
  price: ComputedRef<number>;
  // ...其他属性
  constructor(file: File) {
    this.file = file;
    // 注意ref是小写开头的函数，原代码写的大写Ref是错误写法
    this.dimensions = ref({width: file.width, height: file.height})
    this.price = computed((): number => {
      // 传入dimensions的实际值，需要加.value
      return computePrice(this.dimensions.value);
    });
  }
}

// 用shallowRef代替ref
const files = shallowRef<UploadableFile[]>([]);

function addFiles(newFiles: File[]){
  const newUploadableFiles = newFiles.map((file) => new UploadableFile(file))
  files.value = newUploadableFiles;
}

shallowRef不会做深度响应式转换和类型解包，仅追踪.value本身的赋值操作，既不会破坏UploadableFile实例内部的响应性，也不会篡改自定义类型，同时避免了不必要的深度响应式观测，性能更好。

方案2：封装类内部响应式状态，对外暴露普通值（类型最严谨，使用体验最好） #

如果需要files保持深度响应式，或者希望外部使用UploadableFile实例时不需要手动写.value获取dimensions、price的值，可以将类内部的ref、computed改为私有属性，通过getter/setter对外暴露普通值：

import { ref, computed, type Ref, type ComputedRef } from 'vue';

export class UploadableFile {
  file: File;
  // 私有响应式状态，外部不可直接访问
  #dimensions: Ref<{width: number, height: number}>;
  #price: ComputedRef<number>;

  // 对外通过访问器暴露普通类型的值
  get dimensions() {
    return this.#dimensions.value;
  }
  set dimensions(newVal: {width: number, height: number}) {
    this.#dimensions.value = newVal;
  }
  get price(): number {
    return this.#price.value;
  }

  constructor(file: File) {
    this.file = file;
    this.#dimensions = ref({width: file.width, height: file.height});
    this.#price = computed(() => {
      return computePrice(this.dimensions);
    });
  }
}

// 此时用ref声明也不会有类型报错
const files = ref<UploadableFile[]>([]);

这种写法下，UploadableFile对外暴露的dimensions是普通尺寸对象，price是纯number类型，完全匹配ref深度解包后的类型规则，不会出现类型报错。外部调用时直接写file.price就能拿到计算后的价格，不需要额外写.value，封装性和使用体验都更好。

你之前用price: ComputedRef<number|any>绕过校验的方式会丢失price的类型约束，后续访问price相关属性时TS无法做正确的类型校验，容易引入隐藏bug，不建议使用。

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