Stencil Store实现最佳实践与字段定义规范问询

一、Stencil Store 整体实现最佳实践 #

• 按业务模块拆分Store：避免单Store承载所有状态，比如用户信息、购物车、设置等模块各自独立创建Store，降低维护成本
• 按需引入全局Store：只在需要用到状态的组件中导入对应Store，减少组件不必要的依赖
• 用onChange统一处理副作用：状态变化后的逻辑（比如本地存储持久化、日志上报）都通过onChange监听处理，不要分散在各个组件内
• 禁止直接篡改state深层属性：修改状态时直接赋值顶层属性，或者封装修改方法，确保状态变化能被Store正确追踪
• 合理初始化状态：根据业务场景设置初始值，减少不必要的null/undefined，降低组件内的类型判断逻辑

二、Store字段定义最佳实践 #

• 显式标注类型：不管基础类型还是复杂类型，都明确写出类型，不要依赖TypeScript的隐式推断，提升代码可读性和类型校验能力
• 区分类型初始化方式：根据字段的类型特性选择对应的初始化方法，避免混用导致的类型问题
• 避免冗余类型标注：如果初始值已经能让TypeScript准确推断类型，就不用额外加as（比如布尔值初始为false，无需as boolean）

三、类型定义：as vs new的使用场景 #

• 基础类型（字符串、布尔值等）：当初始值为null/undefined，需要明确类型范围时用as。比如示例中username: null as string，是因为初始值null会让TypeScript推断为null类型，用as string（或as string | null）明确它的实际类型是字符串（允许为空）；而isActive: false本身就能被推断为boolean，as boolean属于冗余标注，可以省略。
• 复杂引用类型（自定义类、集合类等）：需要创建实例时用new。比如friends: new List<Friends>()，因为List是自定义集合类，必须通过new来初始化一个可用的实例对象。
• 普通对象类型：如果初始为空对象，用as标注类型；如果有默认值，直接赋值并可选标注类型：

  interface UserInfo {
    name: string;
    age: number;
  }
  
  const { state } = createStore({
    // 初始为空对象，标注类型
    userInfo: {} as UserInfo,
    // 带默认值的对象，可省略as（TypeScript能推断）
    defaultUser: { name: 'guest', age: 0 }
  });
  

修正后的示例代码 #

interface Friends {
  id: string;
  name: string;
}

class List<T> {
  private items: T[] = [];
  // 类的方法实现...
}

const { state, onChange } = createStore({
  // 明确允许为null的字符串类型
  username: null as string | null,
  // 复杂类型通过new创建实例
  friends: new List<Friends>(),
  // 布尔值初始值明确，无需额外标注
  isActive: false
});

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