TypeScript & Stateless Component でchildrenプロパティを扱う

目的

TypeScript + React + JSXを利用している開発環境で
Stateless Component(React.Componentを継承しないコンポーネント)内で
childrenプロパティを利用する

問題

以下のソースでchildrenプロパティを利用しようとするとエラーが発生する。

import React from 'react';

// Stateless Component
const MyStatelessComponent = ({ children }) => <div>{children}</div>; // (1)

// 親コンポーネント
class MyApp extends React.Component<{}, {}> {
  render() {
    return (
      <MyStatelessComponent>   //
        Learn Javascript       // (2)
      </MyStatelessComponent>  //
    )
  }
}

エラー内容は次の通り

Error TS2324: Property 'children' is missing in type 'IntrinsicAttributes

MyStatelessComponentにchildrenプロパティを設定する必要があるよう。
しかし、今回は通常のReact.Componentを継承したコンポーネントと同様に
(2)の方法で記述を行いたい。

エラー回避策

(1)の部分で、childrenのデフォルト値を設定する

const MyStatelessComponent = ({children = null}) => <div>{children}</div>;

上記のようにすることでエラーは発生しなくなった。

• 2016/11/14 追記

いただいたコメントにより、

const MyStatelessComponent: React.StatelessComponent<React.Props<{}>>
    = ({ children }) => <div>{ children }</div>

と、Reactが提供するStatelessComponentインタフェースを実装することで、問題が解決できることがわかりました。
children以外のプロパティを追加する場合は、React.Propsを継承したクラスを作ることで対応できます。
ご指摘ありがとうございました。

参考

• JSX Stateless Functional Components Property 'children' is missing in type. #7992