如何将含super调用的RegistrationStore类转换为函数？

要把继承ImmutableStore的RegistrationStore类转换为函数形式，核心是用工厂函数替代类的继承逻辑，直接创建ImmutableStore实例并添加原类的属性，具体实现如下：

转换后的代码 #

import { Immutable, ImmutableStore, useStorePersistence } from 'signalstory'
import { nanoid } from 'nanoid'
// 注意：需确保produce、MutationFn、environment的导入路径正确
// import { produce } from 'immer';
// import type { MutationFn } from 'signalstory';
// import environment from './your-environment-path';

export type TId = string | number

export type TRegistration = {
   id: TId
   mrn: number
   vn: number
}

export class Registration {
   id = nanoid()
   mrn = 0
   vn = 0
}

export class RegistrationUiState {
   id: TId = nanoid()
   isSelected = false
}

export type TRegistrationState = {
   id: TId
   domain: TRegistration
   ui: RegistrationUiState // 修正原代码类型名称笔误
}

export class RegistrationState {
   id: TId = nanoid()
   domain: TRegistration = new Registration()
   ui: RegistrationUiState = new RegistrationUiState()
}

// 工厂函数替代原RegistrationStore类
export function createRegistrationStore(): ImmutableStore<TRegistrationState> & {
  store: Immutable<TRegistrationState>
} {
  // 对应原类构造函数中super的参数，直接实例化ImmutableStore
  const storeInstance = new ImmutableStore<TRegistrationState>({
    name: 'RegistrationStore',
    mutationProducerFn: produce as unknown as MutationFn<TRegistrationState>,
    // enableLogging: !environment.production,
    initialState: new RegistrationState(),
    plugins: [
      useStorePersistence({
        persistenceKey: 'RegistrationStore',
        persistenceStorage: localStorage,
      }),
      ...environment.defaultStorePlugins(),
    ],
  })

  // 给实例添加原类中的store属性，逻辑与原类完全一致
  storeInstance.store = storeInstance.state()

  return storeInstance
}

关键说明 #

1. 替代继承逻辑：原类通过extends ImmutableStore实现继承，函数中直接调用new ImmutableStore()创建实例，传入原super()中的配置参数，等价于原类的构造逻辑。
2. 保留实例属性：原类中的store属性通过this.state()赋值，函数中直接给创建好的storeInstance添加该属性，保证行为与原类完全一致。
3. TypeScript类型约束：函数返回类型明确为ImmutableStore<TRegistrationState> & { store: Immutable<TRegistrationState> }，确保类型安全性，和原类实例的类型一致。

使用方式 #

原代码中：

const registrationStore = new RegistrationStore()

替换为：

const registrationStore = createRegistrationStore()

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