Question

我正在尝试在TypeScript的常见PropsRoute组件上创建变体，并在要呈现的组件的道具上进行强类型键入。下面的代码似乎很接近，但仍然会导致错误。

SELECT * FROM  
    ( SELECT top 1000
      [mdindex]
          ,[mmatter]
          ,[mdline]
          ,[mddesc]
    FROM [desc]
    WHERE [mmatter] IN (
        SELECT [mmatter]
        FROM [desc]
        GROUP BY [mmatter]
         HAVING COUNT(distinct [mdline]) > 1
        )
        order by mmatter
    )
WHERE mdline not like '1'

错误：

interface PropsRouteProps<P> extends RouteProps {
  component: ComponentType<P>
  withProps: P
}

export const PropsRoute = <P extends object>({
  component: WrappedComponent,
  withProps,
  ...routeProps
}: PropsRouteProps<P>): JSX.Element => {
  return (
    <Route
      {...routeProps}
      render={childProps => {
        return <WrappedComponent {...childProps} {...withProps} />
      }}
    />
  )
}

调用方法：

ERROR in [at-loader] ./src/containers/pages/accounts/AccountInfo.tsx:88:13

TS2322: Type 'typeof AccountDetails' is not assignable to type 'ComponentType<{ details: {  [[DetailsObjectDefinition]] } | undefined; loading: boolean; }>'.

Type 'typeof AccountDetails' is not assignable to type 'StatelessComponent<{ details: {  [[DetailsObjectDefinition]] } | undefined; loading: boolean; }>'.

Type 'typeof AccountDetails' provides no match for the signature '(props: { details: {  [[DetailsObjectDefinition]] }} | undefined; loading: boolean; } & { ...; }, context?: any): ReactElement<...> | null'.

在这种情况下（出于完整性考虑）插入道具的特定组件。

<PropsRoute
  path={`${match.path}/details`}
  component={AccountDetails}
  withProps={{
    details: this.state.details.data,
    loading: this.state.details.loading
  }}
/>

再次，例如，我想让interface Params { email: string } interface Props extends RouteComponentProps<Params> { details: AccountDetailsResponse | undefined loading: boolean } export class AccountDetails extends PureComponent<Props> {的类型与“帐户明细”组件的定义道具不匹配时抛出编译器错误。

打字稿3.0.1-严格模式

强类型的RouteWithProps

0 个答案: