import React , { Component , SFC , ComponentType } from 'react' ; import { render } from 'react-dom' ; import { withDefaultProps } from './utils' ; { class Hello extends Component < { default compiler ? : string ; framework : string ; } > { static defaultProps = { compiler : 'TypeScript' , } ; render ( ) { const compiler = this . props . compiler ! ; return ( < div > < div > { compiler } < /div> < div > { this . props . framework } < /div> < /div>); } } render ( < Hello framework = "React" / > , document . getElementById ( 'root' ) ) ; } { const Hello = ( { compiler = 'TypeScript' , framework , } ) => { return ( < div > < div > { compiler } < /div> < div > { framework } < /div> < /div>); } ; render ( < Hello framework = "React" / > , document . getElementById ( 'root' ) ) ; } type Props < T = { } > = { compiler : string ; framework : string ; } ; const defaultProps = { compiler : 'Typescript' } ; { const Hello = withDefaultProps ( defaultProps , class Hello < T > extends Component < Props < T > > { render ( ) { const compiler = this . props . compiler ; return ( < div > < div > { compiler } < /div> < div > { this . props . framework } < /div> < /div>); } } ) ; class HelloGeneric < T > extends Component < Props < T > > { render ( ) { const compiler = this . props . compiler ! ; return ( < div > < div > { compiler } < /div> < div > { this . props . framework } < /div> < /div>); } } render ( < Hello framework = "React" / > , document . getElementById ( 'root' ) ) ; } { const Hello = withDefaultProps ( defaultProps , ( { compiler , framework } ) => { return ( < div > < div > { compiler } < /div> < div > { framework } < /div> < /div>); } ) ; render ( < Hello framework = "React" / > , document . getElementById ( 'root' ) ) ; }