TypeScript中Reducer用扩展运算符加数组元素报ts2322错误怎么解决

你的判断完全正确。你在IBasketState中定义的products是长度固定为1的元组类型，而非可容纳任意数量元素的普通数组：

products: [
    {
        id: number | undefined;
        // 其他属性
    }
];

TypeScript 中用方括号包裹单个类型的写法[T]表示只能有1个T类型元素的元组，当你展开原有元组+追加1个新元素后，得到的是长度为2的元组，和原类型定义不匹配，就触发了2322报错。

第一步：调整类型定义 #

建议先把商品对象的类型抽离出来复用，再把products改成普通数组类型：

// 抽离商品类型复用
interface IBasketProduct {
    id: number | undefined;
    name: string;
    smallQ: number; //small packages quantity
    smallTotalP: number; //price for all small packages
    largeQ: number; //large packages quantity
    largeTotalP: number; //price for all large packages
    orderPrice: number; //total price of this order
}

export interface IBasketState {
    // 两种普通数组写法等价，选一种即可
    // products: Array<IBasketProduct>
    products: IBasketProduct[];
    totalPrice: number;
}

第二步：匹配初始化规则 #

修改完接口后，注意初始化basketState的时候，products要赋值为空数组[]，不要用[{}]这类不符合类型预期的写法，避免后续出现衍生问题。

如果出于特殊业务需求确实要保留元组写法（购物车场景不推荐，明显需要可变长度数组），可以给元组加剩余类型标记允许变长：

export interface IBasketState {
    products: [...IBasketProduct[]];
    totalPrice: number;
}

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