How to use addExtraLib in Monaco with external type definition
I can see how to use addExtraLib
in Monaco to add the environment declaration file. It is not clear how to use this function with an external declaration file so that the Typescript code in the editor can do:
import * as External from "external"
External.foo();
On the Monaco setup side, this doesn't work:
// 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
})
+3
source to share
1 answer
After a little play I found a solution. Basically, the file should be uploaded using createModel
an explicit file url. If you do this, a relative file path for the node_module/@types
. Here's my working solution that can be used in a playground:
// 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")),
});
+6
source to share