首页 文章

如何在Monaco中使用带外部类型定义的addExtraLib

提问于
浏览 次
6

我可以看到如何在摩纳哥使用 addExtraLib 添加环境声明文件 . 目前尚不清楚如何将此函数与外部声明文件一起使用，以便编辑器中的Typescript代码可以执行以下操作：

import * as External from "external" 

External.foo();

在摩纳哥的设置方面，这似乎不起作用：

// compiler options
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true,
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
    noLib: true,
    typeRoots: ["node_modules/@types"]
});

// extra libraries
monaco.languages.typescript.typescriptDefaults.addExtraLib(
    'export declare function foo():string;', 'node_modules/@types/external/index.d.ts');

monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: false,
    noSyntaxValidation: false
})
monaco-editor

2 回答

  • 7

    Joe 's answer didn' t为我工作，通过使用 file:/// 为外部类型定义文件路径添加前缀来修复

    这是playground的更新示例：

    monaco.languages.typescript.typescriptDefaults.addExtraLib(
    'export declare function add(a: number, b: number): number',
    'file:///node_modules/@types/math/index.d.ts'
);

const model = monaco.editor.createModel(
    `import {add} from 'math';\nconst x = add(3, 5);\n`,
    'typescript',
    monaco.Uri.parse('file:///main.tsx')
);

monaco.editor.create(document.getElementById('container'), {model});

    没有必要提供编译器选项和诊断选项 .

    回复于
  • 1

    玩了一下后我找到了解决方案 . 基本上，必须使用带有显式文件URL的 createModel 加载文件 . 如果执行此操作，则 node_module/@types 的相对文件路径将起作用 . 这是我可以在操场上使用的工作解决方案：

    // compiler options
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true,
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
    typeRoots: ["node_modules/@types"]
});

// extra libraries
monaco.languages.typescript.typescriptDefaults.addExtraLib(
    `export declare function next() : string`,
    'node_modules/@types/external/index.d.ts');

monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: false,
    noSyntaxValidation: false
})

var jsCode = `import * as x from "external"
    const tt : string = x.dnext();`;

monaco.editor.create(document.getElementById("container"), {
    model: monaco.editor.createModel(jsCode,"typescript",new monaco.Uri("file:///main.tsx")), 
});
    回复于

相关问题