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

Question

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

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

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

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;

Answer 1

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

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

一种方法是说：

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

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

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

作为旁注，您的 React 为您提供了泛型类型，您可以使用它使您键入表达式不那么混乱：

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