Creo que necesita state.sections.push(sectionItem) en lugar de state.sections[index].sectionItems.push(sectionItems) .

Yo diría que probablemente necesites escribir tus artículos de sección:

 interface SectionItem { id: string } interface Section { id: string; section_header: string; section_body?: string; sectionItems: SectionItem; } interface State { sections: Section[] } export const state = (): State => ({ sections: [ { id: '1', section_header: 'lorem', sectionItems: [] }, { id: '2', section_header: 'ipsum', sectionItems: [] } ] }); type EditorState = ReturnType<State>; export const mutations: MutationTree<EditorState> = { ADD_SECTION_ITEM(state, id) { const index = state.sections.findIndex((section) => section.id === id); const sectionItem = { id: randomId() } state.sections[index].sectionItems.push(sectionItem); }, };

Porque, cuando no especifica el tipo de elementos de sección, TypeScript examina los elementos de sección que inicializó en su estado (que son iguales a []) y no puede identificar el tipo de elementos que deberían estar en esta matriz.

Así lo defines tú. Además, section_body debería ser opcional porque no está allí en todos sus ejemplos. Los nombres de las interfaces deben estar en mayúsculas en mecanografiado.

Además, no creo que necesites la interfaz de secciones. si desea escribir algo como una matriz de una interfaz, simplemente use la sección [] como el tipo, como lo haría con la cadena [].

Finalmente, esto depende de usted, pero le recomendaría que no use diferentes convenciones de nomenclatura en sus interfaces (y en su código en general): section_body es snake_case y sectionItems es camelCase, por lo general es mejor ceñirse a una y mantenerla en todo el código .

Editado, debe escribir el "estado" usando un estado de interfaz que lo describa.

Además, no tengo mucha experiencia con Vuex específicamente, pero parecen indicar una forma específica de usarlo con mecanografiado, que es diferente a lo que está haciendo: vuex docs here

Cuando no proporciona un tipo para un valor (el valor de retorno de su función, en este caso), TypeScript intenta reducirlo al tipo más preciso posible. Dado que las matrices de elementos de las sections de su objeto devuelto siempre están vacías, las infiere como never[] ( type[] es un alias para Array<type> ); una matriz que en realidad no puede contener ningún valor. Puedes verlo en el siguiente fragmento:

 const functionReturningEmptyArray = () => ({ items: [] }); type EmptyArray = ReturnType<typeof functionReturningEmptyArray>; // type EmptyArray = { items: never[] }

Una forma de resolver esto es usar la interfaz de section que creó para especificar el tipo de retorno de state .

 export const state = (): { sections: Array<section> } => ({ sections: [ { id: '1', section_header: 'lorem', sectionItems: [] }, { id: '2', section_header: 'ipsum', sectionItems: [] } ] });

Los dos puntos después de los paréntesis vacíos en la primera línea especifican el tipo de devolución de la función. Incluí el tipo de objeto en este caso, ya que solo tiene una propiedad, pero si su state es más complejo, o si simplemente prefiere la legibilidad, puede extraerlo a un tipo separado y hacer referencia a eso como el tipo de retorno;

 interface MyState { sections: Array<section>; } export const state = (): MyState => ({ sections: [ { id: '1', section_header: 'lorem', sectionItems: [] }, { id: '2', section_header: 'ipsum', sectionItems: [] } ] });

En este punto, TypeScript arrojará un error en su valor devuelto, porque su interfaz de section especifica que el objeto también debe tener una propiedad section_body , que falta en la matriz de sections devuelta. Para solucionar esto, puede asignar a cada objeto de la matriz una propiedad section_body o modificar la interfaz para que coincida con el hecho de que la propiedad puede o no existir;

 interface section { id: string; section_header: string; section_body?: string; sectionItems: any; }

Su tienda ahora debería estar libre de errores, pero para tener una propiedad de elementos de sectionItems más segura, también puede cambiarla de any a Array<any> , o usar un tipo de objeto más específico si sabe cómo se verán los elementos de la sección de antemano. .