TypeScript中抽象类及子类存入Record时的类型错误排查与实现方案问询

错误含义解析 #

你遇到的错误核心是类型不匹配：

• 你定义的PurchaseBundleMoveStrategies类型是Record<BuyPageType, BasePurchaseBundleMoveStrategy>，这里要求每个值必须是BasePurchaseBundleMoveStrategy的实例（具备purchaseBundle属性和move方法的对象）。
• 但你实际存入的是类本身（比如RangeDayMoveStrategy），它属于构造函数类型（typeof RangeDayMoveStrategy），构造函数本身并没有实例的purchaseBundle和move属性，所以TypeScript抛出了类型错误。

正确的两种实现方案 #

根据你的使用场景，有两种解决方式：

方案1：存储类的构造函数（适合动态创建实例的场景）

如果你需要根据不同的BuyPageType动态创建策略实例，那么应该把Record的值类型改为构造函数类型，也就是typeof BasePurchaseBundleMoveStrategy（它代表能接受PurchaseBundle参数并返回实例的构造函数）。

修改后的代码：

export const PurchaseBundleMoveStrategies: Record<BuyPageType, typeof BasePurchaseBundleMoveStrategy> = {
  DAY_RANGE: RangeDayMoveStrategy,
  RESERVATION_NORMAL: BasePurchaseBundleMoveStrategy,
  SHOPPING_MALL: BasePurchaseBundleMoveStrategy,
  SURVEY: BasePurchaseBundleMoveStrategy,
  TIMELINE: TimelineBundleMoveStrategy,
  TIME_MALL: TimeBundleMoveStrategy
}

// 使用示例：传入对应的PurchaseBundle实例创建策略
const myPurchaseBundle = new PurchaseBundle(/* 你的初始化参数 */);
const strategy = new PurchaseBundleMoveStrategies[BuyPageType.DAY_RANGE](myPurchaseBundle);
strategy.move();

方案2：存储类的实例（适合提前创建好实例直接使用的场景）

如果已经有对应的PurchaseBundle实例，你可以直接创建策略实例并存入Record，这样就符合原来定义的实例类型要求。

修改后的代码：

// 假设你已经初始化好各个页面对应的PurchaseBundle实例
const dayRangeBundle = new PurchaseBundle(/* 初始化参数 */);
const reservationNormalBundle = new PurchaseBundle(/* 初始化参数 */);
// ...其他页面对应的bundle实例

export const PurchaseBundleMoveStrategies: Record<BuyPageType, BasePurchaseBundleMoveStrategy> = {
  DAY_RANGE: new RangeDayMoveStrategy(dayRangeBundle),
  RESERVATION_NORMAL: new BasePurchaseBundleMoveStrategy(reservationNormalBundle),
  SHOPPING_MALL: new BasePurchaseBundleMoveStrategy(/* 对应bundle */),
  SURVEY: new BasePurchaseBundleMoveStrategy(/* 对应bundle */),
  TIMELINE: new TimelineBundleMoveStrategy(/* 对应bundle */),
  TIME_MALL: new TimeBundleMoveStrategy(/* 对应bundle */)
}

// 使用示例：直接调用实例的move方法
PurchaseBundleMoveStrategies[BuyPageType.DAY_RANGE].move();

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