TypeScript中如何提取数组元素类型并优化评分列表实现？

优化后完整实现 #

首先替换原有的对象定义为只读常量数组，同时自动推导对应类型，满足复用和类型约束要求：

// 全局可复用的评分档位常量，调整评分范围仅需修改该数组内容
const RATING_LIST = [1, 2, 3, 4, 5] as const
// 自动推导评分值类型，等价于 1 | 2 | 3 | 4 | 5，数组变更时类型自动同步
type RatingType = typeof RATING_LIST[number]

渲染逻辑直接遍历常量数组即可，省去原实现中对象键遍历、字符串转数字的冗余逻辑：

{RATING_LIST.map((score) => (
  <div key={score}>
    {score <= rating 
      ? <TiStar size={22} /> 
      : <TiStarOutline size={20} />
    }
  </div>
))}

方案收益 #

• 维护成本极低：后续如果要调整评分规则（比如改为1-10星、0-5星），只需要修改RATING_LIST的数组内容，类型定义、渲染逻辑不需要做任何额外修改，不会出现多端定义不一致的问题
• 类型安全：RatingType由TS自动从常量数组推导，不需要手动维护联合类型，从根源上避免类型和实际业务值不匹配的bug
• 逻辑简洁：遍历数组直接拿到数字类型的分值，不需要原实现中Object.keys遍历后parseInt转数字的步骤，减少隐式类型转换带来的异常风险
• 复用性强：RATING_LIST常量和RatingType类型可以直接导出给其他业务场景使用，比如评分提交校验、评分等级统计、评分表单选项渲染等场景都可以直接复用，不需要重复定义评分规则

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