Ошибка Angular 7 и Stripe TS2304: не удается найти имя «Полоса»

Я установил @types/stripe-v3 и включил файл javascript Stripe в тег скрипта в 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'.

typescript stripe-payments angular-cli definitelytyped angular-cli-v7
person Robin De Schepper    schedule 18.02.2019    source источник
comment
как насчет определения оператора импорта для Stripe?   -  person deerawan    schedule 18.02.2019
comment
Если вы попробуете оператор импорта, такой как import { Stripe } from 'stripe-v3';, вы получите сообщение об ошибке «полоса-v3 не является модулем», потому что файл index.d.ts действительно не объявляет модуль, он предназначен для объявления этого глобального var Stripe при включении компилятор   -  person Robin De Schepper    schedule 19.02.2019

Ответы (2)


arrow_upward
26
arrow_downward

Проблема решается включением ссылки на пакет @types/stripe-v3 в массив compilerOptions.types вашего файла tsconfig.app.json в каталоге src вашего проекта Angular.

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

Это решение было опубликовано bjornharvold в эта тема.

person Robin De Schepper    schedule 18.02.2019
comment
В моем случае я использовал @types/stripe-checkout. У меня была та же проблема, и добавление stripe-checkout в массив types не сработало. Вместо этого я добавил @types/stripe-checkout в массив, который решил проблему. Надеюсь, это может помочь кому-то другому. - person Jesper; 13.06.2019
comment
npm install --save @types/stripe-v3 (думаю, я бы предложил явный вариант для новичков) - person Grant; 23.10.2019
comment
@jesper именно то, что я искал. я копался часами. - person tony Macias; 26.06.2020
comment
У меня настроены файлы tsconfig.base.json и tsconfig.app.json, как описано здесь. Это удалило красные волнистые линии в редакторе, но фактическая компиляция машинописного текста по-прежнему жалуется на сообщение об ошибке, упомянутое OP. :( - person Trevor; 06.10.2020
comment
Попробуйте удалить массив типов, как указано в ответе ниже. - person Robin De Schepper; 06.10.2020

arrow_upward
7
arrow_downward

Angular импортирует типы на основе значений compilerOptions.types и compilerOptions.typeRoots из файла конфигурации typescript. справочная документация по компиляторам TS

По умолчанию проекты Angular, созданные с использованием angular cli, будут иметь два файла конфигурации typescript.

  1. tsconfig.json в корне проекта
  2. 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 в tsconfig.app.json будет иметь значение пустого массива. Это причина, по которой angular не получает установленные типизации из node_modules/@types/* автоматически.

Чтобы исправить это: npm install @types/stripe-v3 наборы и в tsconfig.app.json

  1. Либо добавьте stripe-v3 к types.
...
"compilerOptions": {
   ...
  "types": ['stripe-v3']
}
  1. Или удалите типы из компилятораOptions

Если вы добавите, вам придется добавлять все будущие типизации в этот массив.

Вместо этого, если вы удалите types из compilerOptions, angular автоматически импортирует все будущие типы.

Также не забудьте проверить types и typeRoots в tsconfig.js. typeRoots будет иметь относительные пути в виде массива, и здесь применяется та же логика.

person Krishna Pravin    schedule 06.09.2019