【TypeScript】オブジェクトの型からプロパティの型を抜き出して型の実装を見ずに型付けする

　よく次の様にオブジェクトの型を一つだけ抜き出して参照する必要がある時があります。

export const AppInputFile = (props: Props): JSX.Element => {
  // ここの (event: React.ChangeEvent<HTMLInputElement>): void
  // input onChange の型の実装を見て記述するのは手間
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    // 値変更時の処理
  };
  return (
    <input
      onChange={handleChange}
    />
  )
}

　これぐらいならばすぐ分かるので問題なく定義できますが、ネストしたり更新の多い部分の型を参照していると定義や更新が面倒です。一つだけ抜き出すと便利です。
　TypeScriptの型はドットによるチェーンはできませんが連想配列的にアクセスすることはできます。これを利用して次の様に型を定義できます。

export const AppInputFile = (props: Props): JSX.Element => {
  // React.InputHTMLAttributes<HTMLInputElement> の onChange プロパティと定義
  const handleChange: React.InputHTMLAttributes<HTMLInputElement>['onChange'] = (e) => {
    // 値変更時の処理
  };
  return (
    <input
      onChange={handleChange}
    />
  )
}

　例は React 上の素の input なので少々複雑ですが、何かしらをラッピングしたコンポーネントを使う時は型の実装すら見ずに整合性をあっという間に TypeScript 任せにできるので特に役に立ちます。