React × defaultProps × TypeScript

この書き方が一番ベストかはともかくとして、現時点では以下で統一できそうな気がしています。

import * as React from 'react';

interface HogeProps {
  // 必須のprops
  children: React.ReactNode;
  // 任意のpropsだが、コンポーネント内ではundefinedを許容しない
  className?: string;
  // 任意のpropsだが、コンポーネント内でundefinedを許容する
  onClick?: () => void;
}

const hogeDefaultProps: Required<Pick<HogeProps, 'className'>> = {
  className: '';
}

// 呼び出し側では`className: undefined`が設定可能である
const Hoge: React.SFC<HogeProps> = (
  /*
   * children: React.ReactNode;
   * className: string; ⇒ コンポーネント内では、undefinedが許容されない
   * onClick?: () => void;
   */
  // 厳密には props: HogeProps & Readonly<typeof hogeDefaultProps>
  props: HogeProps & typeof hogeDefaultProps
) => <div {...props} />;

Hoge.defaultProps = hogeDefaultProps;

export default Hoge;

React.Componentも基本は一緒なので、省略。