Angular7 无法包含自定义打字稿定义文件

Question

我创建了自定义打字稿定义文件 (brat.d.ts)

export declare class head {
   ready(callback: () => any);
}

export declare class Util {
   static embed(divId: string, collData: any, docData: any, webFontsURLs: Array<string>);
}

我正在导入上述定义文件 Angular 7 个这样的组件

import {head, Util} from "../../brat/brat";

当我执行服务时，出现以下错误

'错误在./src/app/folder-mgmt/list-documents/list-documents.component.ts 未找到模块：错误：无法解析“\src\app\folder-mgmt\list-documents”中的“../../brat/brat” `

谁能告诉我我做错了什么

Answer 1

您在 .d.ts 文件中添加声明，它们将在您的项目中全局可用。但是您需要先调整 tsconfig.json，添加以下内容：

"files": [
  "additional.d.ts"
]

现在创建一个 ./addition.d.ts 文件（相对于您的 TypeScript 项目根目录）并在其中添加您的类型。不要 export 符号，只声明类型。

declare class head {
   ready(callback: () => any);
}

declare class Util {
   static embed(divId: string, collData: any, docData: any, webFontsURLs: Array<string>);
}

您现在可以在全球范围内使用它们。

如果您不希望它们在全球范围内可用，而是为缺少它们的模块添加类型，请在模块中声明它们。

declare 'module-name' {
  // ...
}

现在 TypeScript 会在您执行 import { ... } from 'module-name' 时识别这些内容。

Answer 2

为了解决这个问题我做了以下操作

我从我的自定义打字稿定义文件 (brat.d.ts) 文件中删除了导出并将其更改为

declare class head {
   static ready(callback: () => any);
}
declare class Util {
   static embed(divId: string, collData: any, docData: any, webFontsURLs: Array<string>);
}

Angular 使用 Angular CLI 创建的项目在项目的根文件夹中有 tsconfig.json 文件。

我在 tsconfig.json 中的 "compilerOptions" "typeRoots" 属性中添加了包含自定义定义文件的文件夹路径。

在 Angular 组件中，我删除了用于导入自定义打字稿定义文件的导入语句（"brat.d.ts" 在我的例子中）

Answer 3

有同样的问题，进行了一些研究和一些 SO 链接，在你的情况下确保正确导入即从“../../brat/brat”导入{head, Util}； --> 从 "../../brat/brat.d" 导入 {head, Util};
就像导入模块时一样，您不添加文件扩展名并且您的模块是 brat.d.ts，也就是说。

在我的例子中，当文件（模块）例如 item.ts 包含我导出的 class 项目时发生冲突，

export class Item {
  public reference: string;
  public name: string;
   constructor( name: string, reference: string) {
     this.reference = reference;
     this.name = name;
   }
   get getReference(): string {
     return this.reference;
   }
   get getName(): string {
     return this.name;
   }
   set setName(newName: string) {
      this.name = newName;
   }
 }

在使用 class 的组件中使用 import { Item } from './models/item'; 导入，并在组件中保存 (Ctrl+s) 时有 ERROR in src/app/app.component.ts(2,20): error TS2306: File 'D:/PROJET/Personal Resoruces/Angular2/DuckFowl/src/app/Models/item.ts' is not a module.。我将文件（模块）名称更改为 item.models.ts，保持 class 不变，一切正常。使模块名称与导出的 class、函数、接口等不同，会有帮助，但您可以自由使用任何名称。

对包含导出元素和组件的文件按 Ctrl + s，以刷新 Angular CLI。

解决了我的问题。

Screen shot of project component and model

我的配置

Angular CLI: 8.3.6
Node: 10.16.0
OS: win32 x64
Angular: 8.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.6
@angular-devkit/build-angular     0.803.6
@angular-devkit/build-optimizer   0.803.6
@angular-devkit/build-webpack     0.803.6
@angular-devkit/core              8.3.6
@angular-devkit/schematics        8.3.6
@angular/cli                      8.3.6
@ngtools/webpack                  8.3.6
@schematics/angular               8.3.6
@schematics/update                0.803.6
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

爱与领导 ;-)

Angular7 无法包含自定义打字稿定义文件

Angular 7 Unable to include a custom typescript definition file

types

typescript

angular

angular7