前端 select options 如何定义 TS 数据类型？

[xxleyi]

前端下拉筛选通常是一个 value 和 code 的对应关系数组，但基于这个数据，也会有其他映射需求，比如从 code 映射到 value，或从 value 映射到 code，甚至 value 和 code 自身的类型也想确定。此时需要考虑的点就比较多，但我们可以抓住一点：信息的来源只有一点，其他只是形式的变换：

// single truth
const industryOptions = [
  {
    name: '电器',
    code: 1,
  },
  {
    name: '生鲜',
    code: 2,
  },
  {
    name: '游戏',
    code: 3,
  },
] as const;


// derivate from top
type IndustryOptions = typeof industryOptions
type IndustryOptionsIndexUnion = keyof IndustryOptions & `${number}`
type NameMapCode = {[index in IndustryOptionsIndexUnion as IndustryOptions[index]['name']]: IndustryOptions[index]['code']}
type CodeMapName = {[index in IndustryOptionsIndexUnion as IndustryOptions[index]['code']]: IndustryOptions[index]['name']}
type IndustryCode = keyof CodeMapName
type IndustryName = keyof NameMapCode

const nameMapCode = industryOptions.reduce((acc, cur) => ({...acc, [cur.name]: cur.code}), {}) as NameMapCode
const codeMapName = industryOptions.reduce((acc, cur) => ({...acc, [cur.code]: cur.name}), {}) as CodeMapName