[解決済み] タイプスクリプト React: コンポーネントのプロパティタイプにアクセスする

質問

npmパッケージ @types/react を使うと、TypeScriptアプリの中でReactを使うことができるようになります。 コンポーネントは

type Props = {...}

type State = {...}

export default class MyComponent extends React.Component<Props, State> {
}

ここでは、コンポーネントのプロップと状態（型変数）の型を宣言する必要があります。

型宣言をすると、TypeScriptはそれを使ってコンポーネントの使用状況（渡されたpropの形状）を検証します。

このようなコンポーネントの周りにコンテナを作りたいと思います。コンテナはコンポーネントのpropsを再利用することになります。しかし、同じプロップを持つ別のコンポーネントを作成するために、プロップの型を再度宣言する必要があります。または、元のコンポーネントファイルからそれらをエクスポートし、コンテナにインポートします。

// original file
export type Props = {...}

// container file
import MyComponent, { Props } from './original'

しかし、すでにインポートしている MyComponent をそのファイルからインポートしています。このコンポーネントは、消費するプロップについての情報をすでに持っています (タイプ変数のおかげで React.Component ).

質問は の型を明示的にエクスポート/インポートすることなく、コンポーネントクラス自体からその情報にアクセスするにはどうすればよいでしょうか？ ?

私は次のようなものが欲しいです。

import MyComponent from './MyComponent'

type Props = MyComponent.Props // <= here access the component prop types

export default class MyContainer extends React.Component<Props, {}> {}

どのように解決するのですか？

2019 : 上記のすべての回答がかなり古いことに気づいたので、ここに新しいものを紹介します。

ルックアップの種類

新しいTSバージョンでは、ルックアップタイプを使用することができます。

type ViewProps = View['props']

非常に便利であるにもかかわらず、それは はクラス・コンポーネントでのみ動作します。 .

React.ComponentProps（リアクト・コンポーネント・プロップス

Reactのtypedefsには、任意のコンポーネントからpropsの型を抽出するためのユーティリティが同梱されています。

type ViewProps = React.ComponentProps<typeof View>

type InputProps = React.ComponentProps<'input'>

これはもう少し冗長ですが、タイプ・ルックアップの解決策とは異なります。

• 開発者の意図がより明確である
• これは、機能コンポーネントとクラスコンポーネントの両方で動作します。

これらのことから、このソリューションは 最も将来性のある クラスからフックに移行することを決定した場合、クライアントコードをリファクタリングする必要はありません。