Typescript如何在类层面根据state属性自动映射设置对应的stateVal值

方案1：使用计算属性getter实现自动映射（最推荐） #

直接把stateVal定义为只读计算属性，不需要手动赋值、也不需要额外存储，值永远和当前state自动同步：

// 先定义固化的状态-权重映射，后续调整顺序只改这个对象即可
const STATE_WEIGHT = {
  In: 1,
  Break: 2,
  Lunch: 3,
  Out: 4
} as const

export class User {
  userID?: number
  state?: keyof typeof STATE_WEIGHT

  constructor(
    userID?: number,
    state?: keyof typeof STATE_WEIGHT
  ) {
    this.userID = userID
    this.state = state
  }

  // stateVal是自动计算的，不需要手动赋值
  get stateVal(): typeof STATE_WEIGHT[keyof typeof STATE_WEIGHT] | undefined {
    return this.state ? STATE_WEIGHT[this.state] : undefined
  }
}

这个方案的优势：

• 映射逻辑完全固化在类内部，外部不需要做任何额外处理
• 不需要维护两个变量的同步，state修改后stateVal自动更新
• 后续调整排序优先级只需要修改STATE_WEIGHT对象即可，不需要动其他逻辑
• 从API拿到数据后直接实例化new User(id, state)就可以直接用stateVal排序，不需要遍历赋值

方案2：使用setter拦截state赋值（适合需要stateVal可写/需要持久存储的场景） #

如果你的场景需要stateVal可以手动覆盖，或者需要把值存在实例上而非计算得到，可以用setter拦截state的赋值动作，自动同步stateVal：

const STATE_WEIGHT = {
  In: 1,
  Break: 2,
  Lunch: 3,
  Out: 4
} as const

export class User {
  userID?: number
  private _state?: keyof typeof STATE_WEIGHT
  stateVal?: number

  constructor(
    userID?: number,
    state?: keyof typeof STATE_WEIGHT,
    stateVal?: number
  ) {
    this.userID = userID
    // 如果手动传了stateVal就优先用传入的值，否则自动计算
    if (stateVal !== undefined) {
      this.stateVal = stateVal
    }
    this._state = state
    if (state && stateVal === undefined) {
      this.stateVal = STATE_WEIGHT[state]
    }
  }

  get state() {
    return this._state
  }

  set state(newState: keyof typeof STATE_WEIGHT | undefined) {
    this._state = newState
    // state修改时自动更新stateVal
    if (newState) {
      this.stateVal = STATE_WEIGHT[newState]
    }
  }
}

这个方案下，只要修改state属性，stateVal就会自动同步为对应的值，同时也支持手动修改stateVal覆盖默认映射。

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