Angular集成ngx-stripe遇TS类型错误求助（PaymentIntent场景）

在Angular 14.2.0中使用ngx-stripe@14.3.0结合@stripe/stripe-js@1.53.0集成PaymentIntent支付功能，已在AppModule中导入NgxStripeModule，但编译时触发TS2416类型错误：StripeInstance和StripeService的paymentRequest方法返回值类型与基类StripeServiceInterface不匹配，返回PaymentRequest | undefined无法赋值给PaymentRequest。

组件HTML代码 #

<h2>Collection Payment Intent</h2>
<div [formGroup]="stripeTest">
  <input formControlName="name" />
  <input formControlName="amount" />
  <ngx-stripe-card
    [options]="cardOptions"
    [elementsOptions]="elementsOptions"
  ></ngx-stripe-card>
  <button type="submit" (click)="pay()">
    PAY
  </button>
</div>

组件TS代码 #

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';

import { StripeService, StripeCardComponent } from 'ngx-stripe';
import {
  StripeCardElementOptions,
  StripeElementsOptions,
  PaymentIntent,
} from '@stripe/stripe-js';

@Component({
  selector: 'payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.scss']
})
export class PaymentComponent implements OnInit {
  @ViewChild(StripeCardComponent)
  card!: StripeCardComponent;

  cardOptions: StripeCardElementOptions = {
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        fontWeight: '300',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '18px',
        '::placeholder': {
          color: '#CFD7E0',
        },
      },
    },
  };

  elementsOptions: StripeElementsOptions = {
    locale: 'es',
  };

  stripeTest!: FormGroup;

  constructor(
    private http: HttpClient,
    private fb: FormBuilder,
    private stripeService: StripeService
  ) {}

  ngOnInit(): void {
    this.stripeTest = this.fb.group({
      name: ['Angular v10', [Validators.required]],
      amount: [1000, [Validators.required, Validators.pattern(/d+/)]],
    });
  }

  pay(): void {
    if (this.stripeTest?.valid) {
      this.createPaymentIntent(this.stripeTest.get('amount')?.value)
        .pipe(
          switchMap((pi) =>
            this.stripeService.confirmCardPayment(pi.client_secret!, {
              payment_method: {
                card: this.card.element,
                billing_details: {
                  name: this.stripeTest?.get('name')?.value,
                },
              },
            })
          )
        )
        .subscribe((result) => {
          if (result.error) {
            // Show error to your customer (e.g., insufficient funds)
            console.log(result.error.message);
          } else {
            // The payment has been processed!
            if (result.paymentIntent.status === 'succeeded') {
              // Show a success message to your customer
            }
          }
        });
    } else {
      console.log(this.stripeTest);
    }
  }

  createPaymentIntent(amount: number): Observable<PaymentIntent> {
    return this.http.post<PaymentIntent>(
      '/create-payment-intent',
      { amount }
    );
  }
}

AppModule导入代码 #

imports[
...
NgxStripeModule.forRoot('pk_test_xxx'),
...
]

编译错误信息 #

Error: node_modules/ngx-stripe/lib/services/stripe-instance.class.d.ts:105:5 - error TS2416: Property 'paymentRequest' in type 'StripeInstance' is not assignable to the same property in base type 'StripeServiceInterface'.
  Type '(options: PaymentRequestOptions) => PaymentRequest | undefined' is not assignable to type '(options: PaymentRequestOptions) => PaymentRequest'.
    Type 'PaymentRequest | undefined' is not assignable to type 'PaymentRequest'.
      Type 'undefined' is not assignable to type 'PaymentRequest'.

105     paymentRequest(options: PaymentRequestOptions): PaymentRequest | undefined;
        ~~~~~~~~~~~~~~


Error: node_modules/ngx-stripe/lib/services/stripe.service.d.ts:109:5 - error TS2416: Property 'paymentRequest' in type 'StripeService' is not assignable to the same property in base type 'StripeServiceInterface'.
  Type '(options: PaymentRequestOptions) => PaymentRequest | undefined' is not assignable to type '(options: PaymentRequestOptions) => PaymentRequest'.
    Type 'PaymentRequest | undefined' is not assignable to type 'PaymentRequest'.
      Type 'undefined' is not assignable to type 'PaymentRequest'.

109     paymentRequest(options: PaymentRequestOptions): PaymentRequest | undefined;

解决思路 #

• 版本兼容性调整：该错误源于ngx-stripe与@stripe/stripe-js的类型定义不同步。可将@stripe/stripe-js降级至与ngx-stripe@14.3.0兼容的版本（如1.44.1），或升级ngx-stripe到适配@stripe/stripe-js@1.53.0的版本。

• 临时类型覆盖：若暂时无法调整版本，可通过自定义类型文件修正接口定义：

  1. 在项目根目录创建types/ngx-stripe.d.ts文件
  2. 添加以下代码：

     import { PaymentRequestOptions, PaymentRequest } from '@stripe/stripe-js';
     declare module 'ngx-stripe/lib/services/stripe-service.interface' {
       interface StripeServiceInterface {
         paymentRequest(options: PaymentRequestOptions): PaymentRequest | undefined;
       }
     }
     

• 修复组件代码小问题：组件中Validators.pattern(/d+/)存在语法错误，应改为Validators.pattern(/\d+/)（缺少转义符），否则会导致金额输入的表单验证失效。

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