Children props type strange format

[vuongc]

When generating my props, if I try to use the children props and define a type on it, I get a strange type format on it.

Is there a way to fix that or is it just not permitted to use the children props as something seems to overwrite the preview class type with some sort of binary comparison.

[sapegin]

Please make a demo project that we can debug based on this repo: https://github.com/styleguidist/example

[vuongc]

Here is my files

styleguide.config.js

const path = require('path');

module.exports = {

    title: 'Demo',

    assetsDir: 'public/',

    require: [
        path.resolve(__dirname, 'public/sass/main.scss')
    ],

    resolver: require('react-docgen').resolver.findExportedComponentDefinition,

    template: path.resolve(__dirname, './public/index.html'),
    propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json').parse,
    webpackConfig: require('./webpack.config.js'),

    showUsage: true,
    showCode: true,

    ignore: ['**/node_modules/**/*.*'],

    skipComponentsWithoutExample: true,

    sections: [
        {
            name: 'Introduction',
            content: 'readme/Introduction.md'
        },
        {
            name: 'Components',
            components: 'components/**/*.tsx'
        }
    ]
}

TreeNode

import * as React from 'react'

module TreeNode {

    export interface TreeNodeDataModel { }

    export interface Props extends React.ClassAttributes<TreeNode> {
        /** Unique node id. */
        id: string;
        /** Node's text display on the tree */
        text: string;
        /** Nested nodes. */
        children?: TreeNode[];
        /** Node's icon. */
        icon?: string;
        /** Data of the node, displayed when selecting a node. */
        data?: TreeNodeDataModel;
        state?: {
            opened?: boolean;
            disabled?: boolean;
            selected?: boolean;
        }

        /**
         * Hide props from documentation
         */

        /** @ignore */
        key: React.ReactText;
        /** @ignore */
        ref: React.Ref<TreeNode>;
    }
}

class TreeNode extends React.Component<TreeNode.Props, any> {
    constructor( props: TreeNode.Props ) { super( props ); this.state = {} }
    render() { return <div></div> }
}

export default TreeNode

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {

    devtool: 'eval',

    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                include: [
                    path.resolve(__dirname, './components'),
                    path.resolve(__dirname, './readme')
                ],
                loaders: ['ts-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' }
                ],
                include: path.resolve(__dirname, './public/sass/')
            },
            {
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                test: /\.md$/,
                use: [
                    { loader: 'html-loader' },
                    { loader: 'markdown-loader' }
                ]
            }
        ]
    },

    resolve: {
        extensions: ['.webpack.js', '.scss', '.css', '.js', '.ts', '.tsx']
    },

    node: {
        fs: 'empty'
    }
}

I tried to change the type of the children props from TreeNode class to a string[], but it didn't solve the display as you can see from the screen above.

[vuongc]

Seems like it's a Typescript behavior microsoft/TypeScript#6471.

I will close this issue as it don't belong here, thanks for taking time checking this issue.