no-unused-prop-types does not work if TypeScript interface is defined in another file

[pat-son]

in types.ts:

export interface SharedProps {
    className?: string;
}

In component.tsx:

import { SharedProps } from './types';

export interface TestComponentProps extends SharedProps {
  name: string;
  count: number;
}

export function TestComponent(props: TestComponentProps) {
  return (
    <div>Hello, {props.name}! {props.count}</div>
  )
}

no-unused-prop-types doesn't catch that className is unused in TestComponent.

Tested using most recent version of everything (eslint-plugin-react, etc)

[ljharb]

Unless the TS eslint parser provides us that info, there's no way for the rule to figure it out.

If it does, then it's something we can fix.

The task here is to determine if it's possible, and either close this, or, fix it.

[pat-son]

Might be worth documenting it as a known issue in the docs if it isn't fixable

[ljharb]

I suppose? But generally, any expectation that something will be statically analyzable across files don't hold.

[gayancharith]

interface SharedProps {
    className?: string;
    name: string;
   count: number;
}

export function TestComponent(props: SharedProps) {
  return (
    <div>Hello, {props.name}! {props.count}</div>
  )
}

export function TestComponentTwo(props: SharedProps) {
  return (
    <div className={props.className}>Hello, {props.name}! {props.count}</div>
  )
}

When the above code is in the same file, this rule will trigger an error for "className" property, even if is a conditional prop. Is this a valid behaviour for this rule?

[ljharb]

@gayancharith Being conditional is irrelevant, TestComponent shouldn't use SharedProps because className is NOT a shared prop.