Extends external/imported interfaces/types

[panjiesw]

I see in this plugin test fixtures that it supports generating propTypes from interfaces extending other interface, but only if the extended interface is in the same file.

Is it possible to do the same when the type/interface extends external imported interfaces? Or does this depend on the WIP feature typeCheck?

import React from 'react';
import { AProps, BProps } from './types';

export interface Props extends AProps, BProps {
  name: string;
}

export default function FuncExtendedInterfaces(props: Props) {
  return null;
}

[milesj]

@panjiesw It requires the type checker. In Babel, I only have the current file for any context, so anything outside of those bounds are a black box.

The built-in TS type checker is rather difficult to understand, so I have yet to get it implemented properly.

[panjiesw]

@milesj understood. Hope you'll find an enlightenment for that :)

Writing both compile and runtime type for React components props is a hassle and feels redundant for me so this plugin is really useful!

[martinnov8k]

Hello,

first I would like to say thanks for awesome plugin and second I would like to ask how it looks with this feature? Is this gonna be implemented any time soon? Or maybe it would be a good idea to remove typeCheck option from Readme as it is commented out in source code anyway.

Thank you

[milesj]

Theres at least 2 warnings in the readme that the feature isn't complete yet.

[jennasalau]

I agree this would be awesome to resolve.

All our interfaces are in seperate files and none of the prop types are being generated.

[milesj]

I've spent some time looking into it, but there's not much documentation on the TS TypeChecker so I was completely lost. I've been hoping to piggyback off some of the work typescript-eslint has been doing.

[andreawyss]

In my Flow projects I had great success using: babel-plugin-flow-react-proptypes

Now I'm converting them from Flow to TypeScript but I find out that this plugin (babel-plugin-typescript-to-proptypes) cannot generate most of the propTypes that instead babel-plugin-flow-react-proptypes was capable of.

Just wonder, if you could maybe leverage some of the code there to improve this plugin.

[milesj]

@andreawyss Do you have a specific list? This plugin only converts concrete types.

[andreawyss]

I think that Pick is one of major show stopper: Typescript sees the error but no propTypes are generated.

(alias) const ConnectedAppSizeMonitor: ConnectedComponentClass<React.ComponentType<Pick<AppSizeMonitorComponentProps, "appSize" | "setAppSizeAction" | "abc">>, Pick<Pick<AppSizeMonitorComponentProps, "appSize" | "setAppSizeAction" | "abc">, "abc">> import ConnectedAppSizeMonitor Property 'abc' is missing in type '{}' but required in type 'Readonly<Pick<Pick<AppSizeMonitorComponentProps, "appSize" | "setAppSizeAction" | "abc">, "abc">>'.ts(2741)

[milesj]

Pick is one of those features that will require the type checker. Sadly there's like no documentation on how to use the type checker, so I've been struggling to use it correctly.

[vkefallinos]

You can use typedoc to extract all the needed data to json and use that json instead.

[danReynolds]

I found this lib: https://github.com/merceyz/typescript-to-proptypes which uses the TS compiler to support conversion of both local and external interfaces. It didn't match quite my use case (I didn't want to mutate the input files) and didn't include a script for generation (just an API), so bundled that into this lib: https://github.com/danReynolds/typescript-proptypes-generator that builds on it for the general purpose of converting TS files containing types/interfaces into an equivalent JS file with propTypes. Use/reference either as needed!

[benmvp]

I too was hoping that external types would work with this, but as @milesj said it's super complicated. I ended up using typescript-to-proptypes to make it work, effectively copying its use in material-ui: https://github.com/mui-org/material-ui/blob/bee36dff09745a60852d15d0b19472d9abbf04cb/scripts/generateProptypes.ts

I ended up having to do a whole bunch of debugging because it wasn't working initially but it turned out it was because I was on TS3.8 and it was using an older version w/o some of the newer features.

I really would like to take a stab about hooking up typescript-to-proptypes with this plugin, cuz having this plugin would've made life way way easier

[milesj]

Definitely open to using typescript-to-proptypes for the TS conversion. My feeble attempts of trying to convert the Babel AST into a TypeScript program, with proper type resolution, hasn't worked out too far.

[benmvp]

typescript-to-proptypes ultimately returns back a string of the file w/ the prop types included. So I wonder if we could parse the resultant string into a Babel AST after it's all done instead of trying to go Babel AST -> TypeScript AST -> Babel AST

[milesj]

Yeah it's a very interesting problem. Open to any solution!

[ethanshar]

Hi, Any update on this one?

[milesj]

@ethanshar No update. Honestly, I'll probably never have time to get around to it to do it correctly.

[milesj]

Not planning to support this personally.