vue.js - Manejar el estado DeepReadonly de TypeScript en todas partes

Estoy usando tiendas simples de la Composition API de Vue 3 para centralizar el estado de los módulos. Siguiendo las buenas prácticas recomendadas, el estado se exporta como de solo lectura para evitar mutaciones no deseadas desde el exterior, siendo mutable únicamente a través de los métodos exportados por la misma tienda.

import { reactive, readonly } from 'vue';

const state = reactive<State>({
  /* whatever here */
});

export default readonly(state);

/* Export methods to mutate state */

Después de esto, el tipo de mi estado está profundamente anidado como solo lectura en todas partes. A partir de ahora, necesito agregar el modificador DeepReadonly a CADA parámetro de función, reductor o propiedad de componente donde use el estado, especialmente cuando la cadena de llamadas de función se vuelve profunda también. Honestamente, se está convirtiendo en una tarea difícil de manejar.

Ni qué decir de pasar el estado como parámetro a una función de terceros que no acepta DeepReadonly. Incluso al intentar hacer un casting, TypeScript se queja de que un tipo mutable no se puede asignar a valores inmutables.

¿Cuál es la manera correcta de manejar esto? Estoy seriamente considerando quitar la protección de solo lectura si no puedo encontrar una solución.

Respuesta #1

Usarías DeepReadonly y UnwrapNestedRefs, ambos se pueden importar desde vue:

import type { DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';

DeepReadonly<UnwrapNestedRefs<Ref<User[]>>>

Más información https://vuejs.org/api/reactivity-core.html#readonly