editor.IStandaloneCodeEditor'不可分配给'monaco.editor.IStandaloneCodeEditor'类型的参数

Posted 2023-03-13

【中文标题】editor.IStandaloneCodeEditor\'不可分配给\'monaco.editor.IStandaloneCodeEditor\'类型的参数

【英文标题】：editor.IStandaloneCodeEditor' is not assignable to parameter of type 'monaco.editor.IStandaloneCodeEditor'editor.IStandaloneCodeEditor'不可分配给'monaco.editor.IStandaloneCodeEditor'类型的参数

【发布时间】：2021-10-19 02:18:37

【问题描述】：

为了在下面的源代码中使用 monaco，我确实安装了下面的包，但我收到了该类型错误。为什么会这样？我该如何解决？

包装：

npm i monaco-editor

我正在使用这个命令：

yarn install

包文件如下所示：

  "private": true,
  "name": "node-example",
  "version": "0.13.0",
  "dependencies": 
    "@codingame/monaco-jsonrpc": "^0.3.1",
    "express": "^4.15.2",
    "file-loader": "^4.3.0",
    "monaco-editor": "^0.27.0",
    "monaco-editor-core": "^0.22.3",
    "monaco-editor-webpack-plugin": "^4.1.2",
    "monaco-languageclient": "^0.13.0",
    "normalize-url": "^2.0.1",
    "reconnecting-websocket": "^3.2.2",
    "request-light": "^0.2.2",
    "vscode-json-languageservice": "^4.0.2",
    "vscode-languageserver": "7.0.0",
    "vscode-uri": "^3.0.2",
    "vscode-ws-jsonrpc": "^0.2.0",
    "ws": "^5.0.0"
  ,
  "scripts": 
    "prepare": "yarn run clean && yarn run build",
    "compile": "tsc",
    "watch": "tsc -w",
    "clean": "rimraf lib",
    "copy": "cp src/index.html lib/index.html",
    "build": "yarn run compile && webpack && yarn run copy",
    "start": "node lib/server.js",
    "start:ext": "node lib/server.js --external"
  ,
  "devDependencies": 
    "webpack-cli": "^4.8.0"
  

这是我得到的错误：

src/client.ts:32:24 - 错误 TS2345：类型参数 'import("path/to/project/monaco-languageclient/example/node_modules/monaco-editor/esm/vs/editor/editor.api").editor.IStandaloneCodeEditor' 不可分配给类型参数 'monaco.editor.IStandaloneCodeEditor'。

这是完整的源代码：

import  listen, MessageConnection  from 'vscode-ws-jsonrpc';
import 
    MonacoLanguageClient, CloseAction, ErrorAction,
    MonacoServices, createConnection
 from 'monaco-languageclient';
import * as monaco from 'monaco-editor'
import normalizeUrl = require('normalize-url');
const ReconnectingWebSocket = require('reconnecting-websocket');

// register Monaco languages
monaco.languages.register(
    id: 'typescript',
    extensions: ['.ts'],
    aliases: ['TypeScript','ts','TS','Typescript','typescript']
)

// create Monaco editor
const value = `
    "$schema": "http://json.schemastore.org/coffeelint",
    "line_endings": "unix"
`;
const editor = monaco.editor.create(document.getElementById("container")!, 
    model: monaco.editor.createModel(value, 'typescript', monaco.Uri.parse('file:///abs/path/to/demo/ts/file.ts')),
    glyphMargin: true,
    theme: "vs-dark",
    lightbulb: 
        enabled: true
    
);

// install Monaco language client services
MonacoServices.install(editor,rootUri: "file:///abs/path/to/demo/ts");

// create the web socket
const url = createUrl('ws://localhost:3000/ts')
const webSocket = createWebSocket(url);
// listen when the web socket is opened
listen(
    webSocket,
    onConnection: connection => 
        // create and start the language client
        const languageClient = createLanguageClient(connection);
        const disposable = languageClient.start();
        connection.onClose(() => disposable.dispose());
    
);

function createLanguageClient(connection: MessageConnection): MonacoLanguageClient 
    return new MonacoLanguageClient(
        name: "Sample Language Client",
        clientOptions: 
            // use a language id as a document selector
            documentSelector: ['typescript'],
            // disable the default error handler
            errorHandler: 
                error: () => ErrorAction.Continue,
                closed: () => CloseAction.DoNotRestart
            
        ,
        // create a language client connection from the JSON RPC connection on demand
        connectionProvider: 
            get: (errorHandler, closeHandler) => 
                return Promise.resolve(createConnection(connection, errorHandler, closeHandler))
            
        
    );


function createUrl(path: string): string 
    return normalizeUrl(path);


function createWebSocket(url: string): WebSocket 
    const socketOptions = 
        maxReconnectionDelay: 10000,
        minReconnectionDelay: 1000,
        reconnectionDelayGrowFactor: 1.3,
        connectionTimeout: 10000,
        maxRetries: Infinity,
        debug: false
    ;
    return new ReconnectingWebSocket(url, [], socketOptions);

【问题讨论】：

奇怪。我正在尝试重现您的错误，它对我来说工作得很好。即使我将editor 明确输入为import("monaco-editor/esm/vs/editor/editor.api").editor.IStandaloneCodeEditor，也不会抛出任何错误。您是否有机会在 CodeSandbox 或类似工具中重现此内容？

@futur 这真的很奇怪，但我希望它对我有帮助，我可以看看你的项目是什么样的吗？我什至接受 pastebin 链接。你有没有使用这个导入import * as monaco from 'monaco-editor'？您使用的是monaco-editor 和monaco-languageclient 的哪个版本？我还不知道如何将这个特定项目用于 codeSandbox，但一旦我这样做了，我会告诉你

这是我尽可能少的复制：hastebin.com/evobaruvos.js——我正在使用monaco-editor@0.27.0 和monaco-languageclient@0.13.0，根据你的package.json。如果您可以像我一样在 CodeSandbox 中设置一个最小的示例，这也会有所帮助；不需要你的所有代码。

为方便起见，我把它放在a CodeSandbox 中，仍然没有抛出错误。您可以编辑您的答案以包含您的 tsconfig.json 和 TypeScript 版本吗？

@futur 我刚刚使用npx 从头开始​​创建了一个反应应用程序，并在其中使用了 monaco 包，这让我感到惊讶。但是，如果您关闭 repo 并转到示例文件夹并尝试从那里使用 monaco 编辑器和 mono languageclient，您会收到类似此线程中的类型错误。你能在你的机器上用 monaco-editor（不是 monaco editor core）编译它吗？我错过了什么？

【参考方案1】：

问题似乎是monaco-editor 提供的monaco 命名空间与monaco-editor-core 提供的同名命名空间之间存在冲突。当两者都作为依赖项安装时，TypeScript 似乎假定 monaco.editor.IStandaloneCodeEditor 指的是后者，这会导致问题，因为创建的 monaco.editor 是从前者导入的。

为解决此问题，将 monaco-editor-core 作为依赖项删除可解决混淆问题并为 monaco.editor.IStandaloneCodeEditor 使用正确的类型。

【讨论】：

如果我删除 monaco-editor-core 并将 monaco-editor 添加为依赖项，则会出现以下错误。浏览器示例：src/client.ts(5,25)：错误 TS2307：找不到模块“monaco-editor-core”或其相应的类型声明。浏览器示例：src/client.ts(61,28)：错误 TS7006：参数“模型”隐式具有“任何”类型。浏览器示例：src/client.ts(61,35)：错误 TS7006：参数“位置”隐式具有“任何”类型。还有很多类似的，我在client.ts中将import * as monaco from 'monaco-editor-core'更改为import * as monaco from 'monaco-editor';