react/sort-prop-types doesn't work for TypeScript

[amannn]

Since it is mentioned in the README of the rule I expected this to work with TypeScript.

However it seems like it doesn't:

import PropTypes from 'prop-types';
import {Component} from 'react';

const propTypes = {
  b: PropTypes.number,
  a: PropTypes.number // An error is shown here
};

type Props = {
  b?: number;
  a?: number; // No error shown here
};

export class A extends Component<Props> {
  public static propTypes = propTypes;

  public render() {
    const {a, b} = this.props;
    return (
      <p>
        {a} {b}
      </p>
    );
  }
}

export function B({a, b}: Props) {
  return (
    <p>
      {a} {b}
    </p>
  );
}
B.propTypes = propTypes;

Here's a reproduction repository: https://github.com/amannn/eslint-plugin-react-test

Thanks!

[ljharb]

The "sort prop types" rule sorts .propTypes objects; that works fine with TS. The rule isn't meant to sort "the TS type that happens to be assigned to a component's props".

[amannn]

Hmm, in the docs of the rule I found this:

The following patterns are considered warnings:

(...)

type Props = {
  z: number,
  a: any,
  b: string
}
class Component extends React.Component<Props> {
  ...
}

What's the point of this example if the rule doesn't consider it then?

[amannn]

Seems like the type annotations where added here: #2546.

[ljharb]

hmm - @silvenon i guess i didn't check #2546 thoroughly.

There's no tests for TS or Flow types in https://github.com/yannickcr/eslint-plugin-react/blob/master/tests/lib/rules/sort-prop-types.js, so I think this is just a docs error.

I'd be happy to review a PR that either 1) added, behind an option, support for sorting TS/Flow types; or 2) fixes the docs to remove the implication that it sorts TS/Flow types.

[kylemh]

Feels like this typescript-eslint rule handles what you'd want. Would this package still wanna support rules covered by that plugin?

[ljharb]

@kylemh if there's anything react-specific, then this plugin should indeed be able to overlap with that one.

[kylemh]

Sorry, to be clear I totally see the need for the defaultProps and propTypes property sorting. I meant maybe consider not adding the ability to sort type and interface keys from this rule.

[ljharb]

That's a fair point - if that functionality is already doable with typescript-eslint, and there's nothing react-specific that's needed, then this rule probably shouldn't support it.

[amannn]

It seems like member-ordering would enforce it on every type though, right?

In JavaScript, if you want to sort properties of every object, you can use sort-keys. But if you want to do it only for prop types, you can use react/sort-prop-types.

Isn't that a valid use case for TypeScript as well?