使用String类型变量访问对象时TypeScript报错的解决办法

核心原因 #

你用了大写的String作为display的类型，这是TypeScript里的包装对象类型，而对象索引只允许使用原始类型（string/number/symbol），所以编译器抛出报错。

解决方法 #

方法1：改用原始类型string

直接把display的类型从String改成小写的string，这是最直接的修复方式：

const props = defineProps<{
    sentence: Sentence,
    display: string,
}>()

方法2：更严格的类型约束（推荐）

如果Sentence类型的键是固定集合，可以把display的类型定义为keyof Sentence，这样既能消除报错，还能保证display一定是sentence存在的键，避免无效索引：

const props = defineProps<{
    sentence: Sentence,
    display: keyof Sentence,
}>()

修改后，sentence[display]的TypeScript报错会消失，同时完全保留原有代码逻辑。

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