TypeScript已指定数组类型，调用splice时提示元素类型为never如何解决？

核心原因 #

该问题是TypeScript与Vuex类型体系协同的常见异常，触发原因主要有两类：

• Mutation方法内部的state参数未被正确推导为预定义的AnimationCanvasState类型，导致state.frames被默认识别为never[]类型
• 初始化state时的空数组[]被TypeScript优先推断为never[]，未正确向上匹配接口声明的Frame[]类型

修复方案 #

可根据场景选择以下任意一种方案修复：

方案1：给Mutation的state参数显式标注类型 #

强制指定方法第一个参数的类型，让TypeScript正确识别state的结构：

export const mutations: MutationTree<AnimationCanvasState> = {
  [AnimationCanvasMutations.ADD_FRAME] (state: AnimationCanvasState, index:number | undefined) {
        if (index !== undefined) {
            state.frames.splice(index, 0, new Frame(8, 8));
        } else {
            state.frames.push(new Frame(8, 8));
        }
  }
}

方案2：给初始化的空数组加显式类型断言 #

在state初始化阶段明确数组类型，避免TypeScript的默认类型推断：

const state: AnimationCanvasState = {
  frames: [] as Frame[],
}

方案3：标准化payload结构（推荐） #

Vuex的Mutation默认第二个参数为完整payload对象，调整参数结构可以避免TypeScript对参数个数的校验触发类型推断异常：

export const mutations: MutationTree<AnimationCanvasState> = {
  [AnimationCanvasMutations.ADD_FRAME] (state: AnimationCanvasState, payload: { index?: number }) {
        const { index } = payload
        if (index !== undefined) {
            state.frames.splice(index, 0, new Frame(8, 8));
        } else {
            state.frames.push(new Frame(8, 8));
        }
  }
}

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