@stripe/react-stripe-js - 如何使用 Typescript 在 createPaymentMethod 上正确输入 paymentType答案

【问题标题】：@stripe/react-stripe-js - How to properly type paymentType on createPaymentMethod with Typescript@stripe/react-stripe-js - 如何使用 Typescript 在 createPaymentMethod 上正确输入 paymentType
【发布时间】：2021-04-14 16:31:01
【问题描述】：

我正在尝试将输入参数正确键入到条带的createPaymentMethod 方法中，默认值为“card”，如下所示

  const createStripePaymentMethod = async (paymentType: string = "card", cardElement: StripeCardElement) => {
    ... do some things

      let response = await stripe.createPaymentMethod({
        type: paymentType,
        card: cardElement,
      });

我将paymentType 输入为字符串，但这样做会给我一个类型错误：

Type 'String' is not assignable to type '"card" | "alipay" | "au_becs_debit" | "bancontact" | "eps" | "giropay" | "ideal" | "p24" | "fpx" | "sepa_debit" | "sofort"'.
  Type 'String' is not assignable to type '"sofort"'.ts(2322)
payment-intents.d.ts(38, 5): The expected type comes from property 'type' which is declared here on type 'CreatePaymentMethodData'

编译器似乎表明正确的类型是CreatePaymentMethodData，但如果我用string 代替CreatePaymentMethodData，我会得到另一个错误：

Type 'string' is not assignable to type 'CreatePaymentMethodData'.ts(2322)

查看 payment-intents.d.ts，我怀疑这实际上是我需要使用的类型；原来的 typeerror 似乎表明有一个我需要引用的枚举，但我无处可寻 - 我该如何正确输入？
任何帮助将不胜感激。

tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["googlemaps", "jest"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

【问题讨论】：

标签： typescript stripe-payments typescript-typings

【解决方案1】：

我正在使用 TypeScript，以下代码适用于我。

const cardElement = elements.getElement(CardElement);
    if (!cardElement) {
      return;
    }

interface IPaymentMethod {
      error?: StripeError | undefined;
      paymentMethod?: PaymentMethod | undefined;
}

    const {
      error,
      paymentMethod,
    }: IPaymentMethod = await stripe.createPaymentMethod({
      type: "card",
      card: cardElement,
    });

此外，如果您将鼠标悬停在 createPaymentMethod 上，它应该会显示给您。

(method) Stripe.createPaymentMethod(paymentMethodData: CreatePaymentMethodData): Promise<{
    paymentMethod?: PaymentMethod | undefined;
    error?: StripeError | undefined;
}>

当我将鼠标悬停在类型和卡片上时，我可以看到它推断出类型。

输入：CreatePaymentMethodCardData.type: "card"
卡片：const cardElement: StripeCardElement

【讨论】：

我试图弄清楚如何输入paymentMethod 参数，因为将其输入为字符串会给我带来错误。我实际上没有在您的示例中看到任何类型
更新了答案，如果可行，请告诉我。
我正在尝试动态输入付款方式类型。所以不要输入：card，而是输入：paymentMethod，你会看到我得到的错误。我确实看到了引用 CreatePaymentMethodData 的错误消息，但是，使用它作为类型只会让编译器更加恐惧。
您能否将您的 tsconfig 添加到您的问题中，以便我可以使用您的规则。
您创建了一个 CardElement，但我不明白您为什么不将“card”传递给 createPaymentMethod，因为那是一个值而不是接口。那么，如果它是一个卡片元素，你为什么要它接受其他支付类型呢？同样，一旦您将 tsconfig 添加到问题中，我会为您提供帮助。