Soy nuevo en Vue/Typescript y estaba luchando con el siguiente error.

Tengo una clase llamada UploadableFile como esta:

 export class UploadableFile { file: File; dimensions: Ref; price: ComputedRef<number>; ... constructor(file: File) { this.file = file; this.dimensions = Ref({width: file.width, height: file.height}) this.price = computed((): number => { return computePrice(this.dimensions); }); } }

Esta clase representa un archivo de imagen que podemos cargar. Dado que el usuario podrá modificar las dimensiones del mismo, configuro las dimensiones como una referencia. Además, dado que el precio depende de las dimensiones, utilizo una referencia calculada que llama a una función calcularPrecio, que devuelve un número.

En la aplicación principal, tengo una función que define una referencia vacía como esta:

 const files = ref<UploadableFile[]>([]);

Esta variable contendrá los archivos que el usuario carga cuando hace clic en un botón. Inicialmente está vacío ya que el usuario no subió nada. Cuando el usuario hace clic en el botón, se llama a las siguientes funciones:

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

Entonces transforma una matriz de archivos HTML en una matriz de UploadableFile. La transformación de la matriz funciona bien, pero el problema surge cuando asignamos esta nueva matriz a la ref.

 files.value = newUploadableFiles;

Tuve el siguiente error:

Los tipos de propiedad 'precio' son incompatibles. El tipo 'ComputeredRef' no se puede asignar al tipo 'número'.

Siento que la referencia del precio está desempaquetada de alguna manera, pero no puedo encontrar una solución, excepto transformar el tipo de precio de esta manera:

 price: ComputedRef<number|any>;

Con esto todo funciona pero ahora el tipo de precio es Cualquiera donde debería ser número.

Cualquier sugerencia ?