Redux Toolkit+TS报错：+=无法应用于WritableDraft与number、push参数类型错误

代码共有3处类型定义问题，对应触发两个TS报错：

• quantity、total字段使用大写开头的Number类型：该类型是JavaScript的数字包装对象类型，不是TypeScript中标识普通数值的原始类型number（小写开头），Redux Toolkit的WritableDraft工具类型无法正确处理包装对象的数值运算，因此触发+=运算符不兼容报错。
• products字段类型写为空元组[]：TypeScript会将无类型的空数组默认推断为never[]，即不允许存入任何值的数组，执行push操作时自然会报参数类型不匹配错误。
• addProduct reducer未给action指定payload类型：TypeScript无法识别传入的payload结构，进一步触发类型校验失败。

1. 先定义要存入购物车的商品数据类型，可根据自身业务字段调整
2. 修正InitialState里的所有类型错误：把大写Number替换为小写number，给products数组指定正确的元素类型
3. 用Redux Toolkit提供的PayloadAction工具类型给action指定payload的类型

修复后的完整代码如下：

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

// 定义购物车商品类型，可根据业务需求增减字段
type CartProduct = {
  id: number | string;
  name: string;
  price: number;
  image?: string;
  count?: number;
}

type InitialState ={
    products: CartProduct[],
    quantity: number,
    total: number,
}

const initialState:InitialState = {
  products: [],
  quantity: 0,
  total: 0,
}

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    // 给action指定payload类型为CartProduct
    addProduct: (state, action: PayloadAction<CartProduct>) => {
      state.quantity += 1;
      state.products.push(action.payload);
      state.total += action.payload.price;
    },
  },
});

export const { addProduct } = cartSlice.actions;
export default cartSlice.reducer;

TypeScript中所有原始类型（字符串、数字、布尔值）都要用小写开头的string/number/boolean，大写开头的String/Number/Boolean是JS内置构造函数类型，日常业务开发几乎不会用到，写类型时注意区分即可。

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