TypeScript + Monaco 编辑器中的未知类型是什么？

Question

我一直在尝试将Monaco Editor 集成到我的一个网络应用程序中。我的应用程序是一个 Angular 应用程序，为此我使用了 ngx-monaco-editor 包装器。

它在开发环境中运行良好，但是当我运行构建时它失败了，

PS D:\MyApp> ng build --prod
Your global Angular CLI version (8.0.6) is greater than your local
version (6.0.7). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

Date: 2019-10-16T10:08:16.025Z
Hash: 2aabd42f82f1dbf9374b
Time: 14410ms
chunk {scripts} scripts.5f861f4882ecef30cbaa.js (scripts) 319 kB  [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.16825ef8af0f92360bac.css (styles) 203 kB [initial] [rendered]
chunk {2} polyfills.e7f5364b276024e19b0b.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.0594610c91de797f492a.js (main) 128 bytes [initial] [rendered]

ERROR in node_modules/ngx-monaco-editor/lib/config.d.ts(2,63): error TS2304: Cannot find name 'unknown'.

这是config.d.ts 文件内容。

import { InjectionToken } from '@angular/core';
export declare const NGX_MONACO_EDITOR_CONFIG: InjectionToken<unknown>;
export interface NgxMonacoEditorConfig {
    baseUrl?: string;
    defaultOptions?: {
        [key: string]: any;
    };
    onMonacoLoad?: Function;
}

我在源代码中找不到这个 unknown 类型定义。它是导致错误的类型。

这是我的 package.json 文件。

{
  "dependencies": {
    "@angular/animations": "6.0.3",
    "@angular/cdk": "^6.2.0",
    "@angular/common": "6.0.3",
    "@angular/compiler": "6.0.3",
    "@angular/core": "6.0.3",
    "@angular/forms": "6.0.3",
    "@angular/http": "6.0.3",
    "@angular/material": "^6.2.0",
    "@angular/platform-browser": "6.0.3",
    "@angular/platform-browser-dynamic": "6.0.3",
    "@angular/router": "6.0.3",
    "angular-font-awesome": "^3.1.2",
    "angular2-logger": "^0.7.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "formBuilder": "^3.1.3",
    "jquery-ui": "^1.12.1",
    "ngx-bootstrap": "^3.1.1",
    "ngx-click-to-edit": "0.0.7",
    "ngx-monaco-editor": "^8.1.0",
    "rxjs": "^6.2.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.7",
    "@angular/compiler-cli": "6.0.3",
    "@angular/language-service": "6.0.3",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "2.7.2",
    "bootstrap": "3.3.7",
    "jquery": "^3.2.1",
    "@angular-devkit/build-angular": "~0.6.6"
  }
}

它是 js/ts 中默认可用的类型吗？ 谁能告诉我如何解决这个问题？

Answer 1

用ngx-monaco-editor 安装包ngx-monaco-editor@6.0.0 为我解决了这个问题。

npm install ngx-monaco-editor --save
npm install ngx-monaco-editor@6.0.0 --save

Answer 2

您应该为 monaco 创建一个配置并将其用作提供程序：

这是编辑器配置

const monacoEditorConfig: NgxMonacoEditorConfig = {
    onMonacoLoad,
    baseUrl: './assets'
};

以及在你的模块中使用它的方式：

@NgModule({
  declarations: [
    AppComponent,
    EditorComponent
  ],
  imports: [
    FormsModule,
    MonacoEditorModule.forRoot()
  ],
  providers: [
    { provide: NGX_MONACO_EDITOR_CONFIG, useValue: monacoEditorConfig }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }