使用字符串访问Object变量时,Typescript显示错误

tp5buhyn  于 2023-10-22  发布在  TypeScript
关注(0)|答案(3)|浏览(133)

下面的代码可以工作,但是VS Code Typescript编译器显示错误,说**“Type 'String' cannot be used as an index type”**。但是如果你使用一个字符串文字而不是一个变量句子['a-string'],Typescript不会抱怨这一点。
我对代码很满意,但是我怎么才能让错误消失呢?还是有别的方法来访问句子[显示]?

const props = defineProps<{
    sentence: Sentence,
    display: String,
}>()
<div v-html="sentence[display]" />

它可以工作,但Typescript错误仍然存在。

de90aj5v

de90aj5v1#

你可以试着告诉typescript对象可以被字符串索引,比如

const props = defineProps<{
    [key:string]:any, /* or whatever type you expect */
    sentence: Sentence,
    display: String,
}>()
83qze16e

83qze16e2#

你可以把这个加进去

[key: string]: string;

或者你甚至可以做Sentence接口并在里面添加键值

interface Sentence {
  [key: string]: string; // Allows indexing with a string key to get a string value.
}

正如@Estus Flask所说,字符串和字符串不是一回事

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

gjmwrych3#

可以将display声明为Sentence的一个键:

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

当您向display传递错误值时,这将向您提供给予错误消息,并允许IDE提供建议值。
如果Sentence没有固定键(即type Sentence = {[key: string]: any},但是具体对象的键是可以推断的,你可以使用泛型来确定具体键:

<script setup lang="ts" generic="O extends Sentence">

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

这样,当display的值与对象的某个键不匹配时,您再次得到错误。
一个警告:Vue目前无法推断模板中的正确类型,即在模板中写入{{ sentence[display] }}会产生错误。但是你可以用一个计算器来绕过它。

相关问题