类型脚本：访问组件属性类型

Question

npm包@类型/反应允许我们在TypeScript应用程序中使用反应。我们将组件定义为

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, {}> {}

Answer 1

从组件获取属性类型的步骤

type Props = typeof MyComponent.defaultProps;

你可以问自己为什么我要从defaultProps而不是ProTypes中获取typeof。为了解释这一点，让我们看看定义文件

  interface ComponentClass<P> {
        new(props?: P, context?: any): Component<P, ComponentState>;
        propTypes?: ValidationMap<P>;
        contextTypes?: ValidationMap<any>;
        childContextTypes?: ValidationMap<any>;
        defaultProps?: P;
        displayName?: string;
    }

正如您所看到的，PropType被包装在ValidationMap中，获取原始类型并不容易。幸运的是，DefaultProp具有原始类型

Answer 2

从TypeScript 2.8开始，您可以使用条件类型，例如给定：

interface MyComponentProps { bar: string; }
declare const MyComponent: React.Component<MyComponentProps>;

interface MyComponentClassProps { bar: string; }
declare const MyComponentClass: React.ComponentClass<MyComponentClassProps>;

interface MyStatelessComponentProps { bar: string; }
declare const MyStatelessComponent: React.StatelessComponent<MyStatelessComponentProps>;

我们可以定义这些帮助程序：

type GetComponentProps<T> = T extends React.ComponentType<infer P> | React.Component<infer P> ? P : never

并像这样使用它们：

// $ExpectType MyComponentProps
type MyComponentPropsExtracted = GetComponentProps<typeof MyComponent>

// $ExpectType MyComponentClassProps
type MyComponentClassPropsExtracted = GetComponentProps<typeof MyComponentClass>

// $ExpectType MyStatelessComponentProps
type MyStatelessComponentPropsExtracted = GetComponentProps<typeof MyStatelessComponent>

更新2018-12-31：现在可通过React在官方React打字中使用。组件属性。

Answer 3

2019年：注意到上面所有的答案都很过时，所以这里有一个新的。

对于较新的TS版本，您可以使用查找类型。

type ViewProps = View['props']

尽管非常方便，但这只适用于类组件。

React typedef附带了一个实用程序，可以从任何组件中提取道具的类型。

type ViewProps = React.ComponentProps<typeof View>

type InputProps = React.ComponentProps<'input'>

这有点冗长，但与类型查找解决方案不同：

• 开发商的意图更加明确

所有这些都使这个解决方案成为最经得起未来考验的解决方案：如果您决定从类迁移到钩子，您将不需要重构任何客户机代码。