TypeScript参数类型推断失败

Question

TypeScript参数类型推断失败

typescripttypesparametersconditional-statementstype-inference

10

我为此创建了错误报告，但也许有人有解决方法。基本上，我希望根据另一个类型有条件地向函数传递一些参数：

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。

- Tom Crockett

2个回答

2

正如我们在评论中讨论的那样，这种情况实际上与React组件有关，以及新的通用组件功能如何与默认的通用参数交互。

问题

如果我们有一个带有通用参数的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 仓库中尝试过的一个示例是 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>

祝你好运，如果有帮助请告诉我。这是一个有趣的小问题，现在已经让我失眠了10天 :)

- Titian Cernicova-Dragomir

这看起来很有前途，因为它适用于默认情况，并允许在覆盖情况下明确指定正确的props。不幸的是，如果存在 component prop，则额外props的推断类型似乎不再与 component prop一致。例如，在 <Avatar onClick={e => log(e)} component="button" />（未提供泛型）中，e 的类型被错误地推断为 React.MouseEvent<HTMLDivElement>。只要记住如果提供了 component prop，则必须提供泛型，它似乎就能工作。 - Tom Crockett

赏金即将到期，这是我看到的最好的答案，所以我会把它给你 :) 感谢你的帮助！ - Tom Crockett

是的，你说得对。当你指定按钮但不指定类型参数时，应该至少出现错误提示。我会看看明天能否让它按照这种方式工作。 - Titian Cernicova-Dragomir

@TomCrockett 将默认的 props 更改为 React.Component<AvatarProps<'div'>>，而不是 React.Component<AvatarProps>，现在如果 component 是没有类型参数设置的，则会出现错误。这种不一致性是由于 AvatarProps 中指定了 div 的默认值而不是由于此解决方案引起的。 - Titian Cernicova-Dragomir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- artem · Accepted Answer

每当我看到需要依赖于参数值的函数类型时，"使用重载"是我首先想到的东西：

declare function foo(params: { tag: 'a', bar(x: number): void }): void;
declare function foo(params: { tag: 'b', bar(x: boolean): void }): void;

foo({ tag: 'a', bar(x) { console.log('x =', x)} }); // (parameter) x: number

更新：我假设在下面的代码中，foo和f是React组件，并且foo将f作为它的属性公开，以及f拥有的所有属性。

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

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

有一种方法可以重写它，如果你不坚持在调用时内联声明foo的属性f的名称，以及f属性的类型。

您可以声明一个类型，描述这种组合组件的属性，它需要两个泛型参数：内部组件属性的类型和外部属性中内部组件的名称：

type ComposedProps<InnerProps, N extends string> = 
       InnerProps & { [n in N]: (props: InnerProps) => void };  

// Also I assume in reality it does not return `void` but `React.Element`,
//  but I don't think it matters

declare function foo<P>(params: P): void;

// foo generic parameter is given explicitly,
//  which allows to infer (and not repeat) parameter types for `f` and `bar` 
foo<ComposedProps<{bar(x: number): void}, 'f'>>({
  f(params) {}, // params: { bar(x: number): void; }
  bar(x) {}, // (parameter) x: number
});