不确定我的道具在反应原生打字稿中是什么类型答案

【问题标题】：Unsure what type my prop is in react native typescript不确定我的道具在反应原生打字稿中是什么类型
【发布时间】：2021-05-04 22:56:32
【问题描述】：

我正在尝试在我的项目中实现 typescript，但在为我的滑动道具提供道具类型时遇到问题。它们都是正确的类型，但是当给出这种类型时，我在第 72 行得到一个错误：

style={[styles.container, isFirst && animatedCardStyle]}

错误说：类型 '假 | { 变换：({ [key: string]: Value; } | { rotate: AnimatedInterpolation; })[]; }' 不可分配给类型 'false |价值 |动画插值 |注册样式 | WithAnimatedObject | WithAnimatedArray<...> | readonly (false | ... 5 more ... | undefined)[] |空 |不明确的'。输入'{变换：（{[键：字符串]：Animated.Value；}|{旋转：Animated.AnimatedInterpolation；}）[]； }' 不可分配给类型 'false |价值 |动画插值 |注册样式 | WithAnimatedObject | WithAnimatedArray<...> | readonly (false | ... 5 more ... | undefined)[] |空 |不明确的'。输入'{变换：（{[键：字符串]：Animated.Value；}|{旋转：Animated.AnimatedInterpolation；}）[]； }' 不可分配给类型 'WithAnimatedObject'。 'transform.pop()' 返回的类型在这些类型之间是不兼容的。键入'{ [键：字符串]：值； } | { 旋转：动画插值； } | undefined' 不可分配给类型 'WithAnimatedObject | WithAnimatedObject | WithAnimatedObject | ... 10 更多 ... |不明确的'。键入'{ [键：字符串]：值； }' 不可分配给类型 'WithAnimatedObject | WithAnimatedObject | WithAnimatedObject | ... 10 更多 ... |不明确的'。类型 '{ [key: string]: Value; 中缺少属性 'matrix' }' 但在“WithAnimatedObject”类型中是必需的。 index.d.ts(818, 5): 'matrix' 在这里声明。

我真的很困惑这意味着什么，虽然我的应用程序运行和工作我不知道错误，但我也可以使用 any 类型，它也解决了这个问题。任何帮助都会很棒！

import React, {useCallback} from 'react';
    import {LinearGradient} from 'expo-linear-gradient';
    import {Animated, Image, ImageSourcePropType, Text} from 'react-native';
    import Choice from '../Choice';
    import {ACTION_OFFSET} from '../Utils/constants';
    
    import {styles} from './styles';
    
    type Props = {
        name: string,
        source: ImageSourcePropType,
        isFirst: boolean,
        swipe: Animated.AnimatedValueXY,
        tiltSign: Animated.AnimatedValue,
    };
    const Card = ({
                      name,
                      source,
                      isFirst,
                      swipe,
                      tiltSign,
                      ...rest
                  }: Props) => {
        const rotate = Animated.multiply(swipe.x, tiltSign).interpolate({
            inputRange: [-ACTION_OFFSET, 0, ACTION_OFFSET],
            outputRange: ['8deg', '0deg', '-8deg'],
        });
    
        const likeOpacity = swipe.x.interpolate({
            inputRange: [25, ACTION_OFFSET],
            outputRange: [0, 1],
            extrapolate: 'clamp',
        });
    
        const nopeOpacity = swipe.x.interpolate({
            inputRange: [-ACTION_OFFSET, -25],
            outputRange: [1, 0],
            extrapolate: 'clamp',
        });
    
        const animatedCardStyle = {
            transform: [...swipe.getTranslateTransform(), {rotate}],
        };
    
        const renderChoice = useCallback(() => {
            return (
                <>
                    <Animated.View
                        style={[
                            styles.choiceContainer,
                            styles.likeContainer,
                            {opacity: likeOpacity},
                        ]}
                    >
                        <Choice type="like"/>
                    </Animated.View>
                    <Animated.View
                        style={[
                            styles.choiceContainer,
                            styles.nopeContainer,
                            {opacity: nopeOpacity},
                        ]}
                    >
                        <Choice type="nope"/>
                    </Animated.View>
                </>
            );
        }, [likeOpacity, nopeOpacity]);
    
        return (
            <Animated.View
                style={[styles.container, isFirst && animatedCardStyle]}
                {...rest}
            >
                <Image source={source} style={styles.image}/>
                <LinearGradient
                    colors={['transparent', 'rgba(0,0,0,0.9)']}
                    style={styles.gradient}
                />
                <Text style={styles.name}>{name}</Text>
    
                {isFirst && renderChoice()}
            </Animated.View>
        );
    }
    
    export default Card;

【问题讨论】：

标签： reactjs typescript react-native types prop

【解决方案1】：

我发现修复它的最佳方法是给 animatedCardStyle 一个 Animated.Animated 类型，这样可以清除错误。

import React, {useCallback} from 'react';
import {LinearGradient} from 'expo-linear-gradient';
import {Animated, Image, ImageSourcePropType, Text} from 'react-native';
import Choice from '../Choice';
import {ACTION_OFFSET} from '../Utils/constants';

import {styles} from './styles';

type Props = {
    name: string,
    source: ImageSourcePropType,
    isFirst: boolean,
    swipe: Animated.ValueXY,
    tiltSign: Animated.Value,
};
const Card = ({
                  name,
                  source,
                  isFirst,
                  swipe,
                  tiltSign,
                  ...rest
              }: Props) => {
    const rotate = Animated.multiply(swipe.x, tiltSign).interpolate({
        inputRange: [-ACTION_OFFSET, 0, ACTION_OFFSET],
        outputRange: ['8deg', '0deg', '-8deg'],
    });

    const likeOpacity = swipe.x.interpolate({
        inputRange: [25, ACTION_OFFSET],
        outputRange: [0, 1],
        extrapolate: 'clamp',
    });

    const nopeOpacity = swipe.x.interpolate({
        inputRange: [-ACTION_OFFSET, -25],
        outputRange: [1, 0],
        extrapolate: 'clamp',
    });

    const animatedCardStyle: Animated.Animated = {
        transform: [...swipe.getTranslateTransform(), {rotate}],
    };

    const renderChoice = useCallback(() => {
        return (
            <>
                <Animated.View
                    style={[
                        styles.choiceContainer,
                        styles.likeContainer,
                        {opacity: likeOpacity},
                    ]}
                >
                    <Choice type="like"/>
                </Animated.View>
                <Animated.View
                    style={[
                        styles.choiceContainer,
                        styles.nopeContainer,
                        {opacity: nopeOpacity},
                    ]}
                >
                    <Choice type="nope"/>
                </Animated.View>
            </>
        );
    }, [likeOpacity, nopeOpacity]);

    return (
        <Animated.View
            style={[styles.container, isFirst && animatedCardStyle]}
            {...rest}
        >
            <Image source={source} style={styles.image}/>
            <LinearGradient
                colors={['transparent', 'rgba(0,0,0,0.9)']}
                style={styles.gradient}
            />
            <Text style={styles.name}>{name}</Text>

            {isFirst && renderChoice()}
        </Animated.View>
    );
}

export default Card;

【讨论】：

【解决方案2】：

我可以为你分解错误的链条，但来源真的很愚蠢，而不是你的错。

由于索引签名而发生错误，您看到的就是这部分消息Type '{ [key: string]: Value; }' is not assignable to type 'WithAnimatedObject ...

样式对象的transform 属性必须是array，其中每个对象都是these supported transform types 之一。因此，每个对象都必须具有这些属性之一（scaleX、translateX 等）。

getTranslateTransform() 方法返回一个数组，其中包含translateX 和另一个translateY 的转换，这应该没问题，除了the type declaration 将返回类型列为{ [key: string]: AnimatedValue }[]; 不够具体。需要说明的是，这些键是有效的转换属性，而不仅仅是string。

编辑：there is a proposed fix 输入错误。

【讨论】：