对象类型中缺少流属性 [英] Flow property missing in object type

问题描述

对于组件，我具有以下Flow Props类型:

type Props = {
  // <...>
  update: ({ dates?: DateRange }) => void
};

我还具有以下导出类型:

export type SearchContextType = {
  // <...>
  update: ({ dates?: DateRange, location?: Location }) => void
};

当我尝试使用第二种类型将道具传递给第一个组件时，出现以下错误:

错误:因为属性是对象类型的元素=https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVBLAtgBzgJwBcwAlAUwEMBjQgGjAG8wBhOXOAOzI+IF8wo+NmADk+SjREBudGQAeeImEIBPHGTAARCoTIkKHAOYaAvI1RgwAZ0IUiAfgBcWnWVoWw3ACZOXu1LwyqPKKxKrqYADicHCGMGQAshQ4AApwVhiEGJxgZgweMDrOHACuWABGZPjuljBGxWWV+ AFBIQRhahoAypT4VAAWrDzyhAAqnbnmll6uVs7auvpGbgVwVDrZHM7RsfFJqemZmzVgJTgzus4AFEwXZFa + C3oGxvTw61mcvjtxiclpGU + HDAvAAlLkAHxgABucAwXha6HCGieS2MKQwVAA1lUUkIcFZJvlprN5q40StLGc7tdbrNHuSXhowZCYXCEYF0FRClZCaimRjsVVPHJdBwvITWOwuDwADz85aCnH4PFwAlQ4lgcTi4VXcGayxUTg2RhgO5WejU1wgyaEfoYKwAOhw + KsMkslnEhBK + GBpRgMHdIICSImPTsAyleBlhC6tl0RI8juTABIAKJyaiEWXhvqDTi6UXjdQQkOobkUXlgXORtjR7jEEbeSV1zgN2UMXj0Gv56UNuOuDUebVeXX6jyG43EOm6C2nc7W-hmO0Ox02VxBz1kb2 + sDyxmKzHKs2zEwMc38K26M9Xsj8YClyy8ENAA"相对= nofollow noreferrer"> 1个但在对象类型存在[2]中的属性中的第一个参数

我理解该错误，但我的问题是:如何正确解决该问题?

实施例

解决方案

首先-我们将简化示例:

type SubType = { dates?: string, location?: string };
type Foo = (arg: SubType) => void;

type SuperType = { dates?: string };
type Bar = (arg: SuperType) => void;

function convert (arg: Foo): Bar {
  return arg;
  //     ^ Cannot return `arg` because property `location` is missing in `SuperType` [1] but exists in `SubType` [2] in the first argument.
}

换句话说，我们仅使用类型转换将Foo转换为Bar:

const anyObj = ({}: any);

((anyObj: Foo): Bar);
//        ^ Cannot cast object literal to `Bar` because property `location` is missing in `SuperType` [1] but exists in `SubType` [2] in the first argument.

或者可以说我们将SuperType转换为SubType

((anyObj: SuperType): SubType);
//        ^ Cannot cast `anyObj` to `SubType` because property `location` is missing in `SuperType` [1] but exists in `SubType` [2].

要将SuperType转换为SubType，我们可以使用$Shape:

复制提供的类型的形状，但将每个字段都标记为可选.

// Correct
((anyObj: SuperType): $Shape<SubType>);

TLDR:

export type SearchContextType = {
  dates: DateRange,
  location: GoogleMapPosition,
  update: ($Shape<{ dates?: DateRange, location?: GoogleMapPosition }>) => void
  //       ^ add `$Shape`
};

更正实施例

I have the following Flow Props type for a component:

type Props = {
  // <...>
  update: ({ dates?: DateRange }) => void
};

I also have the following exported type:

export type SearchContextType = {
  // <...>
  update: ({ dates?: DateRange, location?: Location }) => void
};

When I try to pass props to the first component using the second type I get the following error:

Error:(99, 23) Cannot create MyComponent element because property location is missing in object type 1 but exists in object type [2] in the first argument of property update.

I understand the error, but my question is: how can I get around it properly?

Example

解决方案

First - we will simplify the example:

type SubType = { dates?: string, location?: string };
type Foo = (arg: SubType) => void;

type SuperType = { dates?: string };
type Bar = (arg: SuperType) => void;

function convert (arg: Foo): Bar {
  return arg;
  //     ^ Cannot return `arg` because property `location` is missing in `SuperType` [1] but exists in `SubType` [2] in the first argument.
}

In other word we just use typecasting to convert Foo into Bar:

const anyObj = ({}: any);

((anyObj: Foo): Bar);
//        ^ Cannot cast object literal to `Bar` because property `location` is missing in `SuperType` [1] but exists in `SubType` [2] in the first argument.

Or we can say that we convert SuperType into SubType

((anyObj: SuperType): SubType);
//        ^ Cannot cast `anyObj` to `SubType` because property `location` is missing in `SuperType` [1] but exists in `SubType` [2].

To convert SuperType into SubType we can use $Shape:

Copies the shape of the type supplied, but marks every field optional.

// Correct
((anyObj: SuperType): $Shape<SubType>);

TLDR:

export type SearchContextType = {
  dates: DateRange,
  location: GoogleMapPosition,
  update: ($Shape<{ dates?: DateRange, location?: GoogleMapPosition }>) => void
  //       ^ add `$Shape`
};

Corrected Example

这篇关于对象类型中缺少流属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！