如何基于对象数组属性值创建限定字符串类型？

原有TypeScript代码：

interface Icon {
    id: number,
    className: string,
    tags: string[]
}

const iconArr = [
  {
      id: 1,
      className: 'banana-class',
      tags: ['']
  },
  {
      id: 2,
      className: 'apple-class',
      tags: ['']
  }
];

需求是创建一个type，当输入除banana-class或apple-class之外的其他值时触发类型错误。此前在字符串数组中用type iconStringType = typeof iconStringArr[number]可以实现，但对象数组里尝试type iconType = typeof iconArr[number]['className']却不生效，这个类型允许任意字符串输入。

解决方案 #

问题核心是TypeScript默认会把数组中对象的字符串属性拓宽为string类型，而非精确的字符串字面量。要解决这个问题，需要强制TypeScript推断出精确的字面量类型：

1. 给数组添加as const断言，让TypeScript精确推断每个元素的类型：

const iconArr = [
  {
      id: 1,
      className: 'banana-class',
      tags: ['']
  },
  {
      id: 2,
      className: 'apple-class',
      tags: ['']
  }
] as const;

2. 基于这个精确推断的数组定义目标类型：

type IconClassNameType = typeof iconArr[number]['className'];

此时IconClassNameType的类型就是'banana-class' | 'apple-class'，输入其他字符串就会触发类型错误。

如果需要保留Icon接口，可以修改接口让className字段引用这个字面量类型：

type IconClassNameType = typeof iconArr[number]['className'];

interface Icon {
    id: number,
    className: IconClassNameType,
    tags: string[]
}

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