17

我可以看到如何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
4

3 回答 3

18

玩了一会儿后，我找到了解决方案。基本上，必须使用createModel显式文件 URL 加载文件。如果你这样做，那么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")), 
});
于 2017-03-28T21:29:01.113 回答
12

乔的回答对我不起作用，通过在外部类型定义文件路径前加上前缀来修复file:///

这是游乐场的更新示例：

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});

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

于 2018-11-22T09:36:28.933 回答
3

截至 2021 年 4 月 ( )，如果没有基于monaco-editor#2295、monaco-editor#1839和https://stackoverflow.com/a/63349650monaco-editor@0.23.0的一些额外细节，我无法让之前的任何一个解决方案工作. 我的用例需要从几个现有的 NPM 包（不仅仅是文件的任意路径）中提供类型定义，这可能会影响解决方案。总而言之，我需要：

  1. 将每个包中的所有文件捆绑.d.ts到一个文件中。TypeScript并不容易，因此我使用了 dts-bundle-generator，但存在其他解决方案。
  2. 使用raw-loader或其他纯文本加载选项导入.d.ts每个包的内容。
  3. 调用addExtraLib每个模块的源代码，在源代码中添加一个显式declare module 'module-name'。

完整示例如下：

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

import source1 from '!!raw-loader!./types/package-one.d.ts';
import source2 from '!!raw-loader!./types/package-two.d.ts'

monaco.languages.typescript.typescriptDefaults.addExtraLib(
  `declare module '@my-project/package-one' { ${source1} }`,
  'file:///node_modules/@my-project/package-one/index.d.ts' // irrelevant?
);
monaco.languages.typescript.typescriptDefaults.addExtraLib(
  `declare module '@my-project/package-two' { ${source2} }`,
  'file:///node_modules/@my-project/package-two/index.d.ts' // irrelevant?
);

monaco.editor.create(document.getElementById('root'), {
    value: `
import { Foo } from '@my-project/package-one';

const foo = new Foo();
`,
    language: 'typescript',
    theme: 'vs-dark'
});
于 2021-04-05T05:17:05.180 回答