如何从 monaco 编辑器获取 typescript 对象的 json 对象？

Question

问题： 我需要将使用intellisense的打字稿模型从extraLibs（摩纳哥编辑器中的选项）从摩纳哥编辑器转换为json对象，以便我可以将其发送到API进行处理。

您可以将以下代码复制并粘贴到 Monaco Editor Playground 以进行进一步测试

// extra libraries
monaco.languages.typescript.typescriptDefaults.addExtraLib('enum Types {type1 = 1,type2 = 2} interface Page {name: string;type: Types;}', 'ts:filename/facts.d.ts');

var jsCode = `
// This is typescript model which user can edit in the monaco editor
var model: Page = {
    name: "Page",
    type: Types.type1
}


// I need above typescript model in JSON form to send it to API like below
/*
{
    "name": "Page",
    "type": 1
}
 */
`;

monaco.editor.create(document.getElementById("container"), {
    value: jsCode,
    language: "typescript"
});

// I was trying something
monaco.languages.typescript.getTypeScriptWorker().then(x => {
    x('').then(y => {
        y.getEmitOutput('hello').then(z => {
            console.log(z)
        });
    })
})

注意：我在 Angular 中工作

Answer 1

您可以使用getValue() 获取编辑器中的最后一个文本。然后你必须使用 typescript compiler services api 将其转换为 javascript 代码

示例

const jsCode = `var model: Page = {
    name: "Page",
    type: Types.type1
}
`

const container = document.getElementById('container');

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.8.3/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
	self.MonacoEnvironment = {
		baseUrl: 'https://unpkg.com/monaco-editor@0.8.3/min/'
	};
	importScripts('https://unpkg.com/monaco-editor@0.8.3/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], async function () {

const libCode = `enum Types {
type1 = 1,
type2 = 2
}

interface Page {
name: string;
type: Types;
}`

monaco.languages.typescript.typescriptDefaults.addExtraLib(libCode, 'ts:filename/facts.d.ts');

	let editor = monaco.editor.create(container, {
		value: jsCode,
		language: 'typescript',
		theme: 'vs-dark' 
	});
  	
  const result = window.ts.transpileModule(libCode + editor.getValue(), { compilerOptions: { module: window.ts.ModuleKind.CommonJS }});
  console.log(result);

  
});

html, body, #container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

<script src="https://unpkg.com/monaco-editor@0.20.0/min/vs/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/3.9.3/typescript.js"></script>
<div id="container"></div>