Question

如果类型是绿色或不喜欢它是红色，我正在尝试为反应中的组件提供条件颜色。这将在 javascript 中工作，但使用打字稿我收到错误：

元素隐式具有“any”类型，因为“string”类型的表达式不能用于索引类型“{ like: string;不喜欢：字符串； }'。在类型 '{ like: string;不喜欢：字符串； }'。

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

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 对象定义了 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}) => {

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

1 个答案: