如何为React类组件的Stripe Elements添加TypeScript类型定义？

核心问题解决：Elements属性的正确类型 #

你需要从@stripe/react-stripe-js导入ElementsInstance类型，这是React封装后的Elements实例的正确类型，而非@stripe/stripe-js中的StripeElements。

完整代码示例 #

1. 导入必要类型与模块

import React from 'react';
import { Stripe } from '@stripe/stripe-js';
import { ElementsInstance, ElementsConsumer } from '@stripe/react-stripe-js';

2. 定义组件Props接口

interface PaymentFormProps {
  stripe: Stripe | null;
  elements: ElementsInstance;
}

3. 实现类组件

class PaymentForm extends React.Component<PaymentFormProps> {
  handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const { stripe, elements } = this.props;
    
    if (!stripe || !elements) return;
    
    const cardElement = elements.getElement('card');
    const result = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement!,
    });

    // 后续支付逻辑处理
  };

  render() {
    const { stripe, elements } = this.props;

    if (!stripe || !elements) {
      return <div>加载中...</div>;
    }

    const CardElement = elements.getElement('card');
    
    return (
      <form onSubmit={this.handleSubmit}>
        <CardElement />
        <button type="submit" disabled={!stripe}>支付</button>
      </form>
    );
  }
}

4. 用ElementsConsumer传递Props

const PaymentFormWrapper = () => (
  <ElementsConsumer>
    {({ stripe, elements }) => <PaymentForm stripe={stripe} elements={elements} />}
  </ElementsConsumer>
);

export default PaymentFormWrapper;

关键说明 #

• ElementsInstance是React Stripe JS库专门为封装后的Elements实例提供的类型，完全匹配类组件中接收的elements属性。
• 确保你的@stripe/react-stripe-js和@stripe/stripe-js版本在v1.0.0+，这类版本自带完整的TypeScript类型定义，无需额外安装@types包。
• 之前尝试的StripeElements是原生Stripe JS的类型，与React封装后的实例不兼容，所以无法正确匹配。

内容的提问来源于stack exchange，提问作者Fer Toasted