如何修复 TS2322：“可以用不同的约束‘对象’子类型实例化”？

Question

A 在递归类型中有类型检查错误。

我正在尝试为 react-jss 样式对象编写类型。

 type StylesFn<P extends object> = (
  props: P
) => CSS.Properties<JssValue<P>> | number | string;

type JssValue<P extends object> =
  | string
  | number
  | Array<string | number>
  | StylesFn<P>;

// @ts-ignore
interface StylesObject<K extends string = any, P extends object = {}>
  extends Styles {
  [x: string]: CSS.Properties<JssValue<P>> | Styles<K, P>;
}
export type Styles<K extends string = any, P extends object = {}> = {
  [x in K]: CSS.Properties<JssValue<P>> | StylesObject<any, P> | StylesFn<P>
};

它工作正常，但打字稿写了一个错误。我使用 @ts-ignore ，但这并不花哨

ERROR 24:11  typecheck  Interface 'StylesObject<K, P>' incorrectly extends interface 'Styles<any, {}>'.
  Index signatures are incompatible.
    Type 'Properties<JssValue<P>> | Styles<K, P>' is not assignable to type 'StylesFn<{}> | Properties<JssValue<{}>> | StylesObject<any, {}>'.
      Type 'Properties<JssValue<P>>' is not assignable to type 'StylesFn<{}> | Properties<JssValue<{}>> | StylesObject<any, {}>'.
        Type 'Properties<JssValue<P>>' is not assignable to type 'Properties<JssValue<{}>>'.
          Type 'JssValue<P>' is not assignable to type 'JssValue<{}>'.
            Type 'StylesFn<P>' is not assignable to type 'JssValue<{}>'.
              Type 'StylesFn<P>' is not assignable to type 'StylesFn<{}>'.
                Type '{}' is not assignable to type 'P'.
                  '{}' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'object'.

这个错误是什么意思？

原文由 teux 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

补充@flavio-vilante 的出色答案。

如果你还想做

const func = <A extends Foo>(a: A = foo_SubType) => `hello!` //error!

（参数 a 可以省略，如果省略，则回 foo_SubType ），

可以尝试：

 const func = <A extends Foo>(a?: A) => {
    const aa = a === undefined ? foo_SubType : a;
    return `hello!`;
}

或者，也许您并不真正想要泛型类型，而只是直接键入 Foo 。

 const func = (a: Foo = foo_SubType) => `hello!`

原文由 Loi Nguyen Huynh 发布，翻译遵循 CC BY-SA 4.0 许可协议