Typescriptを持つステートレス機能コンポーネントをReactに宣言するにはどうすればよいですか？

Question

私はSFCの宣言の2つの方法がこれらの2つです活字体と反応を見てきました：

import * as React from 'react' 

interface Props { 
    message: string 
} 

const Component = (props: Props) => { 
    const { message } = props 
    return (
    <div>{message}</div> 
) 
} 

export default Component 

と：

import * as React from 'react' 

interface Props { 
    message: string 
} 

const Component: React.StatelessComponent<Props> = props => { 
    const { message } = props 
    return (
    <div>{message}</div> 
) 
} 

export default Component 

this questionから、私は第二の方法であなたが省略できていることがわかりあなたのコンポーネントでそれを使用している場合、あなたのインターフェースの子どもたち。

これ以上の違いはありますか？どちらが好ましいのでしょうかなぜ？ React.StatelessComponent<T>ため

Answer 1

The definitionは次のとおりです。

(props: Props): ReactElement<any> 

（または類似した何か）：スニペットComponentために

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

するコンパイラによって推測されます。

あなたは、このような最初の1書く場合：

const Component = (props: Props & { children?: ReactNode }) => { 
    ... 
} 

をあなたがすることを宣言するときにはかなり（限り、あなたはコンポーネントのプロパティを使用しないよう）

Answer 2

を同じものを取得していますconst Component: React.StatelessComponent<Props> あなたは基本的にこの機能が得るものを宣言し、そして何が返されます。

interface StatelessComponent<P> { (props: P ...): ReactElement<any>;

だから読みやすくするために、私は実際にどうなる：

const Component = (props: Props): JSX.Element => {

ここで、このコードになります開発者はStatelessComponentのインタフェースが何であるかを知る必要はありませんので - 彼はちょうど何で行くと何を読み取ることができます外出。

そして基本的に、それはすべての大きさ：だから

const Component: React.StatelessComponent<Props> = (props: IProps): JSX.Element =>