TypeScript-元素隐式地具有“ any”类型,因为类型“ string”的表达式不能用于索引类型

时间:2019-08-09 23:35:31

标签: javascript typescript

假设我有这个:

const color = {
    red: null,
    green: null,
    blue: null
};

const newColor = ['red', 'green', 'blue'].filter(e => color[e]);

错误出现在color[e]底部附近,显示为:

  

元素隐式地具有“ any”类型,因为类型的表达式   'string'不能用于索引类型'{red:null;绿色:null;蓝色:   空值; }'。没有使用参数类型为“字符串”的索引签名   发现类型为'{红色:null;绿色:null;蓝色:null; }'。

我尝试在TypeScript文档中到处查找,但是我想怎么interface才能接受color[e]

3 个答案:

答案 0 :(得分:5)

您遇到的问题不是color是错误的类型,而是TypeScript推断['red', 'green', 'blue']的类型为string[]。通常,这种类型的推断是可取的,因为(对于所有编译器都知道)您可能希望将'purple'推入推论。但是在这种情况下,您希望编译器知道唯一的成员是三个字符串文字'red''green''blue'。也就是说,您需要至少与Array<'red'|'green'|'blue'>一样具体的类型。

假设您使用的是TS3.4或更高版本,从编译器获取这种类型推断的最简单方法是使用const assertion

const constAssertionTest = ["red", "green", "blue"] as const;
// const constAssertionTest: readonly ["red", "green", "blue"];

as const使编译器按照您设置的确切顺序来推断由数组中的三个字符串文字组成的tuple。 (甚至是read-only tuple)。这足以解决您的错误:

const newColor = (['red', 'green', 'blue'] as const).filter(e => color[e]); // okay

好的,希望能有所帮助。祝你好运!

Link to code

答案 1 :(得分:3)

您可以将colors声明为any,以告诉TypeScript对此退一步(又名显式):

const color : any = {
    red: null,
    green: null,
    blue: null
};

但是,如果可能的话,最好使用强类型输入:

const color : { [key: string]: any } = {
    red: null,
    green: null,
    blue: null
};

有关在TypeScript中建立索引的更多信息:Index Signatures


编辑:this answer中,类似的问题,作者建议使用Map<,>-如果适合您的用例。

答案 2 :(得分:1)

感谢所有精彩的回答。打字稿新手并成功修复了我的第一个障碍。

df %>%
  ggplot(aes(x = variable, y = freq, fill = value)) +
  theme_bw()+
  theme(axis.text.x=element_text(angle = 90, vjust = 0.6, hjust = 1))+
  geom_raster() +
  scale_y_continuous("Frequency [Hz]", limits = c(), breaks = c(unique(df$freq)), labels = as.character(c(unique(df$freq))))+
  scale_x_discrete("Time", labels = c("0-100", "100-200", "200-300", "300-400", "400-500", "500-600", "600-700", "700-800", "800-900"))+
  scale_fill_gradientn(name= "Activity [%]", colors = viridis_pal(direction = -1)(20), limits=c(-20, 250))