typescript - Angular 7 & Stripe-fel TS2304: Kan inte hitta namnet 'Stripe'

Jag har installerat @types/stripe-v3 och inkluderat Stripes javascript-fil i en script-tagg i index.html. Tydligen borde Angular-kompilatorn inkludera alla filer automatiskt från @types-node-modulerna. När jag läser på internet och tittar på @types/stripe-v3/index.d.ts borde det finnas en globalt deklarerad var Stripe om filen inkluderas av kompilatorn. Från index.d.ts

declare var Stripe: stripe.StripeStatic;

I min servicefil har jag följande kod:

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

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

  constructor() { }

}

Vilket resulterar i följande fel:

error TS2304: Cannot find name 'Stripe'.

Svar #1

Problemet löses genom att inkludera en referens till paketet @types/stripe-v3 i arrayen compilerOptions.types i din fil tsconfig.app.json i src-katalogen i ditt Angular-projekt.

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

Denna lösning publicerades av bjornharvold i denna tråd.

Svar #2

Angular importerar typer baserat på värdena av compilerOptions.types och compilerOptions.typeRoots från TypeScript-konfigurationsfilen. TS compilerOptions-dokumentation referens

Som standard kommer Angular-projekt som skapats med Angular CLI att ha två TypeScript-konfigurationsfiler.

  1. tsconfig.json i projektets rotmapp
  2. tsconfig.app.json i /src-katalogen

Om både types och typeRoots är odefinierade kommer Angular att importera alla typningar från node_modules/@types/*.

Men om någon av dem har något värde kommer endast de angivna typerna eller typerna från den angivna platsen att importeras. T.ex.: types: ['stripe-v3'] eller typeRoots: ['/someDir']. Så alla andra installerade typer i node_modules/@types/* kommer inte att importeras.

Om en tom array anges kommer inga typer att importeras automatiskt från node_modules/@types. types: [] eller typeRoots: [].

Som standard kommer compilerOptions.types i tsconfig.app.json att ha en tom array som sitt värde. Detta är anledningen till att Angular inte automatiskt får de installerade typdefinitionerna från node_modules/@types/*.

För att åtgärda detta: npm install @types/stripe-v3 typerna och i tsconfig.app.json

  1. Lägg antingen till stripe-v3 i types.
...
"compilerOptions": {
   ...
  "types": ['stripe-v3']
}
  1. Eller ta bort typer från compilerOptions

Om du lägger till kommer du att behöva lägga till alla framtida typningar till denna array.

Istället, om du tar bort types från compilerOptions, kommer Angular automatiskt att importera alla framtida typdefinitioner.

Se också till att kontrollera types och typeRoots i tsconfig.js. typeRoots kommer att ha relativa sökvägar som en array och samma logik gäller här också.

Relaterade artiklar