milesj / babel-plugin-typescript-to-proptypes

Generate React PropTypes from TypeScript interfaces or type aliases.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

enums transform to .any

mhaidamashko opened this issue · comments

Thanks for your work!
I've found issue with enums. They all transformed to PropTypes.any. I've forked the repo and added a fixture:

import React, { FC } from 'react';

export enum Color {
    Green = 'green',
    Red = 'red',
}

export interface Props {
    color: Color,
}

const TypeAsEnum: FC<Props> = () => {
    return null;
};

export default TypeAsEnum;

and the resulting snapshot is:

exports[`babel-plugin-typescript-to-proptypes transforms ./fixtures/type-as-enum.ts 1`] = `
"import _pt from 'prop-types';
import React, { FC } from 'react';
export enum Color {
  Green = 'green',
  Red = 'red',
}
export interface Props {
  color: Color;
}

const TypeAsEnum: FC<Props> = () => {
  return null;
};

TypeAsEnum.propTypes = TypeAsEnum{
  color: _pt.any.isRequired
};
export default TypeAsEnum;"
`;

Do we have some workaround for this?
It would be cool if we have PropTypes.oneOf for this.

@mhaidamashko Whoops, looks like I did forget about enum. At minimum, all you would need to do is add another if block like this one: https://github.com/milesj/babel-plugin-typescript-to-proptypes/blob/master/src/convertBabelToPropTypes.ts#L213

@milesj Hey, thank you for fast response.
I've tried to make it works, but with no results.
After research I've found the enum has type TSTypeReference and doesn't has enough information to create right propTypes.
console.log(type) is:

 Node {
        type: 'TSTypeReference',
        start: 133,
        end: 138,
        loc:
         SourceLocation {
           start: Position { line: 9, column: 11 },
           end: Position { line: 9, column: 16 } },
        typeName:
         Node {
           type: 'Identifier',
           start: 133,
           end: 138,
           loc:
            SourceLocation { start: [Position], end: [Position], identifierName: 'Color' },
           name: 'Color' } }

Have any ideas?

Now supports enums and partial support for enum members (full support requires the type checker).