无法将 Stripe 与 nuxt 和 typescript 一起使用

Question

我遇到了一个问题，我正在尝试在我的 nuxt/typescript 项目上实现 Stripe，我也使用 vue-property-decorator。

这是我在 nuxt.config.js 中的头

head: {
        title: process.env.npm_package_name || '',
        meta: [
            {charset: 'utf-8'},
            {name: 'viewport', content: 'width=device-width, initial-scale=1'},
            {hid: 'description', name: 'description', content: process.env.npm_package_description || ''}
        ],
        script: [{
            src: "https://js.stripe.com/v3/",
            type: "text/javascript"}],
        link: [
            {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
        ]
    },

我的组件：

<script lang="ts">
    import {Component, Prop, Vue} from "vue-property-decorator";
    import {Subscription} from "~/models/Subscription";

    @Component({
        components: {}
    })
    export default class PaymentForm extends Vue {

        @Prop()
        public subscription: Subscription;

        mounted() {
            let stripe = Stripe(`MY PUBLIC KEY`),
            elements = stripe.elements(),
            card = undefined;
            card = elements.create("card");
            card.mount(this.$refs.card);
        }
    }
</script>

但是我收到了这个错误

Cannot find name 'Stripe'. Did you mean 'stripe'?

所以我无法构建我的项目，你能帮助我吗？我尝试用 js 编写这个组件并且它有效，但我想保留我的 ts。

谢谢！

Answer 1

加载 sdk 脚本后，可以在客户端通过

window.Stripe

 访问 Stripe 属性。在开发过程中，TypeScript 没有全局变量的引用

Stripe

。

解决此问题的一种方法是在全局

Stripe

 对象上为 

window

 属性创建定义。

这可以通过创建（或扩展（如果存在））

Window

类的类型定义来完成。在类型定义文件夹中创建一个文件 

global.d.ts

 （或任何其他文件），其中包含以下代码：

interface Window {
  Stripe: any;
}

这将扩展默认的

Window

 类，并允许在代码中使用 Stripe 而不会出现错误，如下所示：

const stripe = window.Stripe('MY PUBLIC KEY') 请注意，这不会提供 sdk 方法和属性的补全。

Answer 2

这是我找到的最佳解决方案

将“@stripe/stripe-js”添加到您的类型中

tsconfig.json

...
"types": [
  ...
  "@stripe/stripe-js"
],
....

或者

import { type StripeConstructor } from '@stripe/stripe-js'

declare global {
    interface Window {
        Stripe?: StripeConstructor
    }
}

确保安装 stripejs 包

npm i @stripe/stripe-js