npmパッケージを使用する@types/reactと、TypeScriptアプリ内でReactを使用できます。コンポーネントは次のように定義します。
type Props = {...}
type State = {...}
export default class MyComponent extends React.Component<Props, State> {
}
ここでは、コンポーネントのプロパティと状態の型を宣言する必要があります (型変数内)。
型を宣言した後、TypeScript はそれを使用してコンポーネントの使用法 (渡されるプロパティの形状) を検証します。
このようなコンポーネントの周りにコンテナを作成したいと思います。コンテナはコンポーネントのプロパティを再利用します。ただし、同じプロパティを持つ別のコンポーネントを作成するには、プロパティの型を再度宣言する必要があります。または、元のコンポーネント ファイルからエクスポートして、コンテナにインポートします。
// 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, {}> {}
ベストアンサー1
2019: 上記の回答はすべてかなり古くなっていることに気づいたので、ここに新しい回答を載せます。
ルックアップタイプ
新しい TS バージョンでは、ルックアップ タイプを使用できます。
type ViewProps = View['props']
非常に便利であるにもかかわらず、クラスコンポーネントのみで動作する。
React.コンポーネントプロパティ
React typedef には、任意のコンポーネントからプロパティの型を抽出するユーティリティが付属しています。
type ViewProps = React.ComponentProps<typeof View>
type InputProps = React.ComponentProps<'input'>
これは少し冗長ですが、型検索ソリューションとは異なります。
- 開発者の意図がより明確になる
- これは関数コンポーネントとクラスコンポーネントの両方で機能します
これらすべてがこのソリューションを最も将来性がある1: クラスからフックに移行する場合、クライアント コードをリファクタリングする必要はありません。