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

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!

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 16 (5 by maintainers)

Most upvoted comments

I like to add some consistency with react/jsx-sort-props and react/sort-prop-types and feel like the combination of these two increase the DX. But maybe that’s just me 🤷‍♂️

@amannn Not just you. I second your point - consistency is important in code readability, and would be greatly appreciated.

And react/sort-prop-types just seem to plain not work with TS prop types, for now.

kostia1st on May 9, 2022

Hmm, I see your point.

My personal opinion is that something like sort-keys or member-ordering is a bit too aggressive and might decrease readability for some cases. For React components, I like to add some consistency with react/jsx-sort-props and react/sort-prop-types and feel like the combination of these two increase the DX. But maybe that’s just me 🤷‍♂️

I guess something you could do, is using member-ordering only in files with the .tsx extension. However I’m currently using the .tsx extension even for non-React files (like Discord) – but that might be a downside of that approach.

amannn on Jul 31, 2020

Since prop-types are more like a TS interface than a JS object literal, I’d say it’d make sense to sort TS prop types the same as other TS types?

ljharb on Jul 31, 2020

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.

ljharb on Jul 10, 2020