包括第三方库的键入会给出通过角度 CLI 找不到的模块?

Question

我试图在我的 Angular 9 应用程序中包含 Apple MapKit JS 的类型，因为库没有提供高质量的类型，@types范围的包中也没有任何好的第三方类型。但是，Angular CLI 对我包含键入内容的方式并不满意。我在编译时收到的确切错误是：

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

我做错了什么？

打字

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

这是声明键入的位置，以及如何声明它们。

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

打字稿配置

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"
]
}

代码中的用法

以下是mapkit的使用方法。

import * as mapkit from 'mapkit';

Answer 1

长话短说：您需要使用类型重命名文件夹并将它们添加到类型根目录中。

步骤#1

在类型(./types(的文件夹中，创建新文件夹"apple-mapkit-js">

步骤#2

在那里添加您的自定义索引

步骤#3将TSC指向您的自定义类型。使用新的typeRoots更新tsconfig.app.json：

{
"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"
],
}

步骤#4更新导入

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

现在它起作用了。

但问题出在哪里呢？

实际上，根据 TypeScript 文档，如果您指定 typeroots，则所有其他资源对于打字稿都变得"不可见"，因此 tsc 只是没有看到您的声明。

附言在Angular 9应用程序上进行了检查。

Answer 2

尝试声明命名空间

declare namespace mapkit {

，然后从组件中删除导入

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

由于tsconfig.app.json已经包含项目中的定义文件，因此命名空间声明无需进一步更改即可工作

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