元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型 React Typescript

Posted 2023-03-13

【中文标题】元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型 React Typescript

【英文标题】：Element implicitly has an 'any' type because expression of type 'string' can't be used to index type React Typescript

【发布时间】：2021-05-04 10:40:00

【问题描述】：

如果类型喜欢它会是绿色或不喜欢它会是红色，我正在尝试为响应中的组件提供条件颜色。这可以在 javascript 中使用，但是使用 typescript 我会收到错误消息：

元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型“ like: string;不喜欢：字符串； '。在“ like: string; 类型”上找不到带有“string”类型参数的索引签名。不喜欢：字符串； '。

我对打字稿的反应相当陌生，所以我不太确定如何解决这个问题，所以任何帮助都会很棒！

import React from "react";
    import Text, View from "react-native";
    
    import styles from "./styles";
    
    const COLORS = 
        like: '#00edad',
        dislike: '#ff006f',
    
    
    const Choice = (type : type : string) => 
        const color = COLORS[type];
        return (
            <View style=[styles.container, borderColor: color]>
                <Text style=[styles.text, color]>type</Text>
            </View>
        )
    
    
    export default Choice;

【参考方案1】：

您的 COLORS 对象定义了 2 个键值对："like" 和 "dislike"。如果你尝试访问COLORS["foobar"]，它会给你一个打字错误，因为它不是一个定义的键。

同样，您的type 被定义为string，并且不仅限于"like" 或"dislike"。要约束它，您只需要允许它使用 "like" 或 "dislike" 键。

一种方法是说：

const Choice = (type : type : "like" | "dislike" ) => 

一种更稳健的方法是根据您的对象生成可能的值。

const Choice = (type : type : keyof typeof COLORS) => 

顺便说一句，你的 React 为你提供了泛型类型，你可以使用它让你输入表达式不那么混乱：

const Choice: React.FC<type : keyof typeof COLORS> = (type) =>