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脚本后，

Stripe属性可以在客户端以window.Stripe的形式访问。在开发过程中，TypeScript没有引用全局变量Stripe。

一种解决方法，就是在全局Stripe对象上为window属性创建定义。

这可以通过创建（或扩展）Window类的类型定义来完成。在类型定义文件夹中，使用以下代码创建文件global.d.ts（或任何其他文件）：

interface Window {
  Stripe: any;
}

这将扩展默认的Window类，并允许在代码中使用Stripe而不会出现以下错误：

const stripe = window.Stripe('MY PUBLIC KEY')

请注意，这不会提供sdk方法和属性的完成。

无法将条纹与nuxt和打字稿一起使用

1 个答案: