Vue3+TypeScript项目中，如何获取<script>引入的Stripe类型定义？

当你通过CDN <script src="https://js.stripe.com/v3/"></script> 引入Stripe并得到全局Stripe对象时，按以下步骤为Vue3+TS项目添加类型支持：

1. 安装前端Stripe.js的类型包 #

无需安装完整的Stripe依赖，只需安装对应的类型声明包：

npm install @types/stripe-js --save-dev
# 或使用 yarn
yarn add @types/stripe-js -D

2. 让TypeScript识别全局Stripe对象 #

在项目的全局类型定义文件（比如src/types/global.d.ts，没有的话直接新建）中添加以下声明，告知TypeScriptwindow对象上存在Stripe构造函数：

interface Window {
  Stripe: import('@types/stripe-js').StripeConstructor;
}

3. 使用时的类型支持 #

初始化Stripe实例或创建Elements对象时，TypeScript会自动从类型包推导正确类型，也可以手动标注明确类型：

<script setup lang="ts">
// 初始化Stripe实例，类型自动推导为Stripe
const stripe = window.Stripe('你的Stripe公钥');

// 创建Elements对象，类型自动推导为StripeElements
const elements = stripe?.elements({
  clientSecret: '你的客户端密钥',
});

// 手动标注类型的示例
import type { Stripe, StripeElements } from '@types/stripe-js';

let stripeInstance: Stripe | null = null;
stripeInstance = window.Stripe('你的Stripe公钥');
</script>

注意事项 #

• 确保@types/stripe-js的版本和你CDN引入的Stripe.js版本匹配，避免出现类型不兼容问题。
• 如果项目同时使用后端Stripe SDK（如stripe包），注意区分前端@types/stripe-js和后端@types/stripe的类型，不要混淆。

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