[交集]的解释与解析第三方模块中的冲突？

Question

我在试图将direction属性从react-native-animatable放到Animatable.View上时出错

Type '{ children: Element; animation: string; iterationCount: "infinite"; direction: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<AnimatableProperties<ViewStyle> & ViewPr...'.
  Type '{ children: Element; animation: string; iterationCount: "infinite"; direction: string; }' is not assignable to type 'Readonly<AnimatableProperties<ViewStyle> & ViewProps>'.
    Types of property 'direction' are incompatible.
      Type 'string' is not assignable to type 'never'.

通过类型声明(我似乎找不到造成此问题的原因)跟踪的direction AnimatableComponent 似乎是通过 AnimatableProperties**？在AnimatableComponent上明确定义的此外，无论问题是什么，我如何解决它，至少消除错误输出的噪音？此外，我不认为有一种方法可以通过让编译器输出 _it_ 认为最终的**接口？来“打印调试”类型。

direction 是，是 ViewStyle 类型上的属性，但据我所知，这不应该相关。

我想我提取了下面的相关输入：

// https://github.com/oblador/react-native-animatable/blob/master/typings/react-native-animatable.d.ts

import {
  ...
  ViewProperties,
  ViewStyle,
  ...
} from 'react-native';

interface AnimatableProperties<S extends {}>
{
  ...
  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
  ...
}

interface AnimatableComponent<P extends {},S extends {}> extends
  NativeMethodsMixin,
  AnimatableAnimationMethods,
  ClassicComponentClass<AnimatableProperties<S> & P>
{
  ...
}

export const View : AnimatableComponent<ViewProperties,ViewStyle>;
export type View = AnimatableComponent<ViewProperties,ViewStyle>;

// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-native/legacy-properties.d.ts

import {
  ...
  ViewProps,
  ...
} from "react-native";

declare module "react-native" {
  ...
  export type ViewProperties = ViewProps;
  ...
}

// https://github.com/facebook/react-native/blob/master/Libraries/Components/View/ViewPropTypes.js

export type ViewProps = {
  // there's no direction property here or [seemingly] on TVViewProps
} & TVViewProps;

Answer 1

我找出了冲突的来源- ViewProps实际上被定义为：

// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-native/index.d.ts

export interface FlexStyle
{
  ...
  direction?: "inherit" | "ltr" | "rtl";
  ...
}

export interface LayoutProps extends FlexStyle {}

export interface ViewProps
  extends ViewPropsAndroid, ViewPropsIOS, GestureResponderHandlers, Touchable, AccessibilityProps, LayoutProps
{
  ...
}

因此，FlexStyle直接位于属性中，而不是样式中。