使用属性为枚举的接口时遇到问题

Question

我正在尝试获取一个 NPM 包，primer.io 工作，其中包括以下 Enum 和接口：

export declare enum CheckoutUXFlow {
    SINGLE_PAYMENT_METHOD_CHECKOUT = "SINGLE_PAYMENT_METHOD_CHECKOUT"
}

export interface SinglePaymentMethodCheckoutOptions {
  uxFlow: CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT;
}

当我尝试在组件中使用它时：

import { CheckoutUXFlow } from '@primer-io/checkout-web'

const singlePaymentMethodCheckoutOptions = {
  uxFlow: CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT
}

并将其输入一个需要 SinglePaymentMethodCheckoutOptions 接口的方法，我收到：

Types of property 'uxFlow' are incompatible.
      Type 'CheckoutUXFlow' is not assignable to type 'CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT'.ts(2345)

const checkoutOptions: {
    uxFlow: CheckoutUXFlow;
}

为什么它认为我将整个 Enum 分配给 uxFlow 而不仅仅是它的一个成员？

提前致谢

Answer 1

通过以下代码，我能够得到您发布的错误，并且我认为您的情况也只会是这些方面的内容......

enum CheckoutUXFlow {
    CHECKOUT = "CHECKOUT",
    MANAGE_PAYMENT_METHODS = "MANAGE_PAYMENT_METHODS",
    SINGLE_PAYMENT_METHOD_CHECKOUT = "SINGLE_PAYMENT_METHOD_CHECKOUT"
}

interface SinglePaymentMethodCheckoutOptions {
  uxFlow: CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT;
}

const singlePaymentMethodCheckoutOptions = {
  uxFlow: CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT
}

const checkoutOptions: SinglePaymentMethodCheckoutOptions = {
    uxFlow: CheckoutUXFlow
};

我看到的错误是..

Type 'typeof CheckoutUXFlow' is not assignable to type 'CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT'

问题是，在声明接口SinglePaymentMethodCheckoutOptions 时，我们将uxFlow 的类型声明为CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT，它将严格接受一个值......即CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT。如果变量的类型是CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT，即使传递CheckoutUXFlow.CHECKOUT 或CheckoutUXFlow.MANAGE_PAYMENT_METHODS 的值也会出错，因为该类型只强制使用CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT 的单个有效值。

如何解决这个问题...

• 要么在接口SinglePaymentMethodCheckoutOptions的声明中将字段uxFlow的类型更改为CheckoutUXFlow，以便CheckoutUXFlow的其他值也可以传递
• 或者，将您传递的值的类型（在调用站点）更改为CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT。

从打字的角度和直觉上，CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT 类型比枚举类型CheckoutUXFlow 窄。我们正在尝试将更广泛的类型分配给更窄的类型。

CheckoutUXFlow.SINGLE_PAYMENT_METHOD_CHECKOUT 只能接受 1 个值，而 CheckoutUXFlow 类型可以接受这三个值中的任何一个。