时间戳

首页 > 解决方案 > 不确定我的道具在反应原生打字稿中是什么类型

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

问题描述

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

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

错误说：键入'false | { 变换：({ [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' 在这里声明。} | undefined' 不可分配给类型 'WithAnimatedObject | WithAnimatedObject | WithAnimatedObject | ... 10 更多 ... | 不明确的'。键入'{ [键：字符串]：值；}' 不可分配给类型 'WithAnimatedObject | WithAnimatedObject | WithAnimatedObject | ... 10 更多 ... | 不明确的'。类型 '{ [key: string]: Value; 中缺少属性 'matrix' }' 但在“WithAnimatedObject”类型中是必需的。index.d.ts(818, 5): 'matrix' 在这里声明。} | undefined' 不可分配给类型 'WithAnimatedObject | WithAnimatedObject | WithAnimatedObject | ... 10 更多 ... | 不明确的'。键入'{ [键：字符串]：值；}' 不可分配给类型 'WithAnimatedObject | WithAnimatedObject | WithAnimatedObject | ... 10 更多 ... | 不明确的'。类型 '{ [key: string]: Value; 中缺少属性 'matrix' }' 但在“WithAnimatedObject”类型中是必需的。index.d.ts(818, 5): 'matrix' 在这里声明。类型 '{ [key: string]: Value; 中缺少属性 'matrix' }' 但在“WithAnimatedObject”类型中是必需的。index.d.ts(818, 5): 'matrix' 在这里声明。类型 '{ [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;

标签： reactjstypescriptreact-nativetypesprop

解决方案

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

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

您的样式对象的transform属性必须是array其中每个对象都是这些受支持的变换类型之一。因此，每个对象都必须具有这些属性之一（scaleX、translateX等）。

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

编辑：有一个错误的打字建议修复。

推荐阅读