Can't set children on Modal using TypeScript 3.3.1 #7874

dlannoye · 2019-02-01T18:29:52Z

Environment Information

Package version(s): 6.132.0

Please provide a reproduction of the bug in a codepen:

Try to compile the following code using Typescript 3.3.1

import { Modal} from 'office-ui-fabric-react/lib/Modal';
import * as React from 'react';

export const MyModal: React.SFC = () => {
    return (
        <Modal>
            <div>hello world</div>
        </Modal>
    );
}

Actual behavior:

Compile error

index.tsx:6:10 - error TS2559: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IModalProps'.

6         <Modal>
           ~~~~~


Found 1 error.

Expected behavior:

No compile error

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: High

Products/sites affected: (if applicable)

The text was updated successfully, but these errors were encountered:

asmundg · 2019-02-05T16:57:48Z

Looks like TS 3.3's TSX checks that it can pass children as part of the component props (the output js passes everything in createElement's props argument).

This probably means that functional components need to include children in their props interface (IModalProps in this case).

The FunctionComponent in newer @types/react versions explicitly adds children to the accepted props:

    interface FunctionComponent<P = {}> {
        (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;
        propTypes?: ValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        defaultProps?: Partial<P>;
        displayName?: string;
    }

dlannoye · 2019-02-05T17:30:29Z

For a workaround I was able to do the following type augmentation:

declare module 'office-ui-fabric-react/lib/Modal' {
 const Modal: React.StatelessComponent<IModalProps>;
}

I noticed that the Dialog component didn't have this issue and saw that it was using React.StatelessComponent as the type rather then relying on the implicit type generated by the styled HOC.

Putting this explicit type would fix the issue, but this makes me wonder if the return type of the styled HOC should be looked at for a possible root cause.

bagau · 2019-02-11T18:09:28Z

I spent many time to understand where I should set this declare module.

declare module 'office-ui-fabric-react/lib/Modal' {
 const Modal: React.StatelessComponent<IModalProps>;
}

May be some people doesn't understand too.
This code I pasted to react-app-env.d.ts file and now it's working.

Replace previous return type of (props) => JSX.Element Also added type annotations to all usages of styled due to TypeScript compiler.

* Modify styled to return StatelessComponent (#7874) Replace previous return type of (props) => JSX.Element Also added type annotations to all usages of styled due to TypeScript compiler. * Changelog

msft-github-bot · 2019-03-05T17:36:47Z