こんな感じでホバーで型定義が確認できるところがいいですね。

次にinterface

こっちはホバーしても確認はできません。

ただし、interfaceは継承することができます。

継承(extends)

typeでは型の継承はできないです。

labelを取り除いた型定義になりました。こちらはinterface→typeでの定義が可能です。

interface Hoge {
  className?: string;
  label: string;
  onClick?: () => void;
};

// 複数指定するときは|を使用
type Huga = Pick<Hoge, "label" | "className">;

結果

stringかnumberか判断してくれます。

?がついている型は宣言が任意ですが、指定がない場合の初期値を設定することができます。

interface Hoge {
  className?: string;
};

宣言

Page.defaultProps = {
  className: null,
};

typeScriptが使われる現場がかなり多いと思いますので不要な型宣言を増やさないように実装していきたいですね。