3

Estoy tratando de generar un array vacio en mi script setup de vue 3, pero no encuentro la forma de hacerlo al querer definirlo reactivo.

Las cosas que intente fueron las siguientes:


<script setup lang="ts">

import { ref } from 'vue'

interface gs {
    x: number;
    y: number;
    ....
}

esto:

const layout: gridsystemobject[] = ref<gridsystemobject[]>([]);
const layout: gridsystemobject[] = ref([]);

da este error:

"message": "Type 'Ref<{ x?: number | undefined; y?: number | undefined; w: number; h: number; i: number; }[]>' is missing the following properties from type 'gridsystemobject[]': length, pop, push, concat, and 31 more.",

esto:

const layout = ref([]);

no da error en la definicion, pero si da error al querer hacer un push al array.

Property 'push' does not exist on type 'Ref<never[]>'.

const layout = ref<gridsystemobject[]>([]);

Property 'push' does not exist on type 'Ref<{ x?: number | undefined; y?: number | undefined; w: number; h: number; i: number; }[]>'.

Obviamente algo falla en toda la definicion, pero no logro identificar como quiere que lo expecifique.

Aclaro que si saco el ref, todo funciona, salvo que no es reactivo, que obviamente hace que no sirva para nada.

0

1 respuesta 1

4

De acuerdo con esta entrada en la documentación de Vue, la función ref devuelve un tipo Ref que es una interfaz genérica declarada de la siguiente forma:

interface Ref<T>
{
  value: T
}

Como se aprecia, este tipo presenta una propiedad value que alberga la referencia al tipo genérico envuelto.


Entendido esto, simplificamos el hecho de saber el porqué de los errores que obtienes.

Primero, esto:

const layout: gridsystemobject[] = ref<gridsystemobject[]>([]);
const layout: gridsystemobject[] = ref([]);

Equivaldría a algo como esto:

Soy consciente de que Ref es una interfaz, pero esto es tan solo un ejemplo.

const layout: gridsystemobject[] = new Ref<gridsystemobject[]>([]);
const layout: gridsystemobject[] = new Ref([]);

Donde se intenta convertir un tipo Ref en un tipo Array de forma implícita. Ref no puede convertirse a Array y tampoco posee las propiedades y funciones del tipo Array, lo que desencadena en este error:

"message": "Type 'Ref<{ x?: number | undefined; y?: number | undefined; w: number; h: number; i: number; }[]>' is missing the following properties from type 'gridsystemobject[]': length, pop, push, concat, and 31 more.",


JavaScript es un lenguaje de tipado dinámico, inclusive con TypeScript adjunto, donde puedes o no especificar el tipo de una variable o función y, en caso de no hacerlo:

const layout = ref<gridsystemobject[]>([]);
const layout = ref([]);

No obtienes error alguno en la definición porque layout asume automáticamente esta forma:

const layout: Ref<gridsystemobject[]> = ref<gridsystemobject[]>([]);
const layout: Ref<[]>                 = ref([]);

Pero, intentar llamar a push, pop, shift, slice, length o cualquier otra propiedad del tipo Array en layout siempre desencadenará en este error:

Property 'push' (or 'pop', 'shift', etc.) does not exist on type 'Ref<{ x?: number | undefined; y?: number | undefined; w: number; h: number; i: number; }[]>'.

Porque el tipo Ref contiene únicamente la propiedad value y es esta la que expone el tipo envuelto, en este caso gridsystemobject[].


Dicho lo anterior, te propongo llamar a value para hacer push a tu arreglo reactivo.

Declara tu variable layout de alguna de estas formas:

const layout = ref<gridsystemobject[]>([]);
const layout = ref([]);

const layout: Ref<gridsystemobject[]>  = ref<gridsystemobject[]>([]);
const layout: Ref<[]>                  = ref([]);

Y entonces, cuando desees operar sobre su valor, en este caso el arreglo, llamas a value:

layout.value.push(...)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.