TypeScript参数类型推断失败

Question

我为此创建了一个错误报告,但也许有人有一个解决方法的想法.基本上我想根据另一个类型有条件地为函数设置一些参数:

declare function foo<P>(params: { f: (p: P) => void } & P): void;

foo({
  f(params: { bar(x: number): void }) {},
  bar(x) {},
});

所以有一个特殊的参数f,它有一个函数类型,函数期望的任何属性都必须作为参数包含在内foo.这里再次将参数bar推断为any但应该是number.

Answer 1

正如我们在评论中讨论的，该场景实际上与反应组件以及新的通用组件功能与默认通用参数交互的方式有关。

问题

如果我们有一个具有泛型参数的 React 组件，并且泛型参数的默认值具有函数字段，则不会推断我们传入的函数的参数。一个简单的例子是：

  class Foo<P = { fn : (e: string)=> void }> extends React.Component<P>{}
  let foo = () => (
    <div>
      <Foo fn={e=> e}/> {/* e is any */}
    </div>
  )

可能的解决方案

让我先警告一下，我不知道这在所有情况下都有效，也不知道这是否取决于某些会改变的编译器行为。我确实发现这是一个非常脆弱的解决方案，改变任何细节，即使有一些可能合理地被认为是等效的东西，它也不会起作用。我能说的是，正如所呈现的，它适用于我测试的内容。

解决方案是利用属性类型取自构造函数的返回值这一事实，如果我们对默认泛型参数稍微简化一下，我们就会得到我们想要的推论。唯一的问题是检测到我们正在处理默认的通用参数。我们可以通过向默认参数添加一个额外的字段，然后使用条件类型对其进行测试来实现此目的。还要注意一点，这对于可以根据使用的属性进行推断的简单情况不起作用P，因此我们将有一个示例，其中组件从另一个组件中提取属性（实际上更接近您的用例）：

// Do not change { __default?:true } to DefaultGenericParameter it only works with the former for some reason
type IfDefaultParameter<C, Default, NonDefault> = C extends { __default?:true } ? Default : NonDefault
type DefaultGenericParameter = { __default? : true; }

export type InferredProps<C extends React.ReactType> =
  C extends React.ComponentType<infer P> ? P :
  C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C] :
  {};

// The props for Foo, will extract props from the generic parameter passed in 
type FooProps<T extends React.ReactType = React.ComponentClass<{ fn: (s: string )=> void }>> = InferredProps<T> & {
  other?: string
}

// Actual component class
class _Foo<P> extends React.Component<P>{}

// The public facing constructor 
const Foo : {
  new <P extends React.ReactType & {__default?: true} = React.ComponentClass<{ fn: (s: string )=> void }> & DefaultGenericParameter>(p: P) :
  IfDefaultParameter<P, _Foo<FooProps>, _Foo<FooProps<P>>>
} = _Foo as any;

  let foo = () => (
    <div>
      <Foo fn={e=> e}/> {/* e is string */}
      <Foo<React.ComponentClass<{ fn: (s: number )=> void }>> fn={e=> e}/> {/* e is number */}
    </div>
  )

应用于Material UI

我在material-ui repo中尝试过的一个示例是该Avatar组件，它似乎可以工作：

export type AvatarProps<C extends AnyComponent = AnyComponent> = StandardProps<
  PassthruProps<C, 'div'>,
  AvatarClassKey
> & {
  alt?: string;
  childrenClassName?: string;
  component?: C;
  imgProps?: React.HtmlHTMLAttributes<HTMLImageElement>;
  sizes?: string;
  src?: string;
  srcSet?: string;
};

type IfDefaultParameter<C, Default, NonDefault> = C extends { __default?:true } ? Default : NonDefault
type DefaultGenericParameter = { __default? : true; }

declare const Avatar : {
  new <C extends AnyComponent & DefaultGenericParameter = 'div' & DefaultGenericParameter>(props: C) 
  : IfDefaultParameter<C, React.Component<AvatarProps<'div'>>, React.Component<AvatarProps<C>>>
}

用法

const AvatarTest = () => (
  <div>
    {/* e is React.MouseEvent<HTMLDivElement>*/}
    <Avatar onClick={e => log(e)} alt="Image Alt" src="example.jpg" />
    {/* e is {/* e is React.MouseEvent<HTMLButtonElement>*/}*/}
    <Avatar<'button'> onClick={e => log(e)} component="button" alt="Image Alt" src="example.jpg" />
    <Avatar<React.SFC<{ x: number }>>
      component={props => <div>{props.x}</div>} // props is props: {x: number;} & {children?: React.ReactNode;}
      x={3} // ok 
      // IS NOT allowed:
      // onClick={e => log(e)}
      alt="Image Alt"
      src="example.jpg"
    />
  </div>

祝你好运，请告诉我是否有帮助。这是一个有趣的小问题，已经让我十天没睡了:)