Angular 7 & Stripe 错误 TS2304：找不到名称 'Stripe'

Question

我已经安装了 @types/stripe-v3 并将 Stripe 的 javascript 文件包含在 index.html 的脚本标签中。据说 Angular 编译器应该自动包含来自 @types 节点模块的所有文件。在互联网上阅读并查看 @types/stripe-v3/index.d.ts 如果编译器包含该文件，则应该全局声明一个 var Stripe。来自 index.d.ts

declare var Stripe: stripe.StripeStatic;

在我的服务文件中有以下代码：

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class BetalingService {
  stripe = Stripe(environment.stripeKey);

  constructor() { }

}

导致以下错误：

error TS2304: Cannot find name 'Stripe'.

Answer 1

通过在您 [=20 的 src 目录中的 tsconfig.app.json 文件的 compilerOptions.types 数组中包含对 @types/stripe-v3 包的引用来解决此问题=] 项目.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [
      "stripe-v3"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

此解决方案由 bjornharvold in this thread 发布。

Answer 2

Angular 根据 typescript 配置文件中的 compilerOptions.types 和 compilerOptions.typeRoots 的值导入类型。 TS compilerOptions docs reference

默认情况下 Angular 使用 angular cli 创建的项目将有两个打字稿配置文件。

tsconfig.json 在项目的根目录中
tsconfig.app.json 在 /src 目录中

如果 types 和 typeRoots 都未定义 angular 将从 node_modules/@types/*.

导入所有类型

但如果其中任何一个有任何值，则只会导入指定类型或指定位置的类型。例如：types: ['stripe-v3'] or typeRoots: ['/someDir']。因此 node_modules/@types/* 中的所有其他已安装类型将不会被导入。

如果设置了空数组，则不会自动从 node_modules/@types 导入任何类型。 types: [] or typeRoots: [].

默认情况下 compilerOptions.types in tsconfig.app.json 将有一个空数组作为其值。这就是为什么 angular 没有从 node_modules/@types/* 自动获取已安装类型的原因。

要解决此问题：npm install @types/stripe-v3 输入和 tsconfig.app.json

将stripe-v3添加到types。

...
"compilerOptions": {
   ...
  "types": ['stripe-v3']
}

或者从 compilerOptions 中删除类型

如果添加，则必须将所有以后的类型添加到此数组。

相反，如果您从 compilerOptions 中删除 types，angular 将自动导入所有未来的输入。

还要确保检查 tsconfig.js 中的 types 和 typeRoots。 typeRoots 将具有作为数组的相对路径，同样的逻辑也适用于此。

Angular 7 & Stripe 错误 TS2304：找不到名称 'Stripe'

Angular 7 & Stripe error TS2304: Cannot find name 'Stripe'

stripe-payments

typescript

definitelytyped

angular-cli

angular-cli-v7