Problem with Flow typing of withI18nProps: suppressed errors

I have come across an unusual problem when using js-lingui’s Flow types. Creating an intersection type between a regular component props object and withI18nProps type leaves Flow unable to detect errors when using this props object.

I have created a minimal reproduction case here, but briefly an example can be recreated like this:

• declare a component Props type with arbitrary fields, e.g.:

type Props = {|
  foo: string
|};

• import withI18nProps type from @lingui/react

• intersect the Props type with the withI18nProps type:

type Props = {|
  foo: string
|}  & withI18nProps;

or, alternatively, spread the withI18nProps type in the Props object type:

type Props = {|
  foo: string,
  ...withI18nProps
|};

• in the React component, try to access a property not declared in the Props type (e.g. this.props.x)

• notice that Flow is not marking this as an error

• remove withI18nProps from the intersection (or from the object where it was spread) and notice that Flow now catches the error of accessing the non-declared property.

I could not replicate the problem as a cleaner and smaller case in try Flow, but I hope the provided info will be enough to help you find the problem.

[tricoder42]

Flow types are included in npm packages since release 2.4.0

[tricoder42]

@azangru I see! Thanks. I’ve created a new issue (#250) to fix this.