typescript - Inkludering av typings for tredjepartsbibliotek gir modul ikke funnet via Angular CLI?

Jeg prøver å inkludere typings for Apples MapKit JS i min Angular 9-applikasjon, fordi det ikke finnes typings av høy kvalitet levert av biblioteket, og heller ingen gode tredjeparts typings i @types-pakken. Imidlertid er ikke Angular CLI fornøyd med hvordan jeg har inkludert mine typings. Den nøyaktige feilen jeg mottar ved kompilering er:

Module not found: Error: Can't resolve 'mapkit' in `components/map.component.ts`.

Hva gjør jeg galt?

Skriving

~src/types/mapkit/index.d.ts

Dette er hvor typene erklæres, og hvordan de erklæres.

declare module 'mapkit' {
  // interfaces, classes, etc here
}

Typescript-konfigurasjon

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2019",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

Bruk i kode

Slik brukes mapkit.

import * as mapkit from 'mapkit';

Svar #1

Kort fortalt: Du må gi nytt navn til mappen din med typer og legge dem til i typerøttene.

Trinn #1

I mappen din med typer (./types) opprett en ny mappe «apple-mapkit-js»

Trinn #2

Legg til din tilpassede index.d.ts der

Trinn #3 Pek TSC til dine egendefinerte typer. Oppdater tsconfig.app.json med nye typeRoots:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "typeRoots" : ["./src/types/", "node_modules/@types"]
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
}

Trinn #4 Oppdater importen din til

import * as mapkit from 'apple-mapkit-js'

Nå fungerer det.

Men hva var problemet?

Faktisk, ifølge TypeScript-dokumentasjonen, hvis du spesifiserer typeroots, blir alle andre ressurser «usynlige» for TypeScript, så tsc så rett og slett ikke dine deklarasjoner

P.S. Sjekket på Angular 9-appen.

Svar #2

Prøv å erklære et navneområde i stedet

declare namespace mapkit {

og fjern importen din fra komponenten din

import * as mapkit from 'mapkit'; //Not needed

Siden tsconfig.app.json allerede inkluderer definisjonsfiler fra prosjektet ditt, vil navneromsdeklarasjonen din fungere uten ytterligere endringer

"include": [
  "src/**/*.d.ts"
],

Relaterte artikler