In TypeScript, false positive for default-props-match-prop-types when importing and intersecting a type

[robballou]

Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

In TypeScript, when defining the props with an intersection from an imported type, the default props will get marked as mismatched.

In types.ts:

export type SVGDefaultProps = {
  size: string | number;
}

In a component:

import type { SVGDefaultProps } from './types';

type ArrowProps = SVGDefaultProps & {
  direction: 'up' | 'down'
};

const defaultProps = {
  size: 16, // will get reported as failing react/default-props-match-prop-types
  direction: 'up',
};

But this will work if it's all in one file:

type SVGDefaultProps = {
  size: string | number;
}

type ArrowProps = SVGDefaultProps & {
  direction: 'up' | 'down'
};

const defaultProps = {
  size: 16,
  direction: 'up',
};

Expected Behavior

Importing a type and using it in an intersection will be behave the same as if the type is fully defined within a file.

eslint-plugin-react version

7.33.2

eslint version

v8.53

node version

v18.13

[ljharb]

This is typically just the limits of static analysis. If the TS eslint parser provides us with a cross-file type (which I don't believe it does), then we can use it, but if it doesn't, there's nothing we can do.

[robballou]

Actually, I think I just had something weird going on. I went into to see if I could manage a fix but found the tests were behaving as expected even with a similar new test case. Went back to the real project and found I wasn't getting an issue with this rule. So I will just close this as it does seem to work as advertised 🙈