我怎样才能从monaco编辑器中获得转换后的代码？
我怎样才能从monaco编辑器中获得转换后的代码？
提问于 2019-03-13 08:07:38
我怎样才能从monaco编辑器中获得转换后的TypeScript代码呢？另外，是否可以访问TypeScript语言服务？我试过这个：
monaco.languages.typescript.getTypeScriptWorker();但是它返回Promise<any>，而我不知道如何处理它！
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-13 08:07:38
经过大量研究，似乎TypeScript LanguageService接口是通过worker代理对象部分公开的。这可能是因为服务在另一个线程中，消息被推送到它，因此需要使用promises。
为了简单起见，我回顾了返回对象上的公开函数，并创建了此定义；希望它能对某些人有所帮助：
namespace ts {
export interface IMonacoTypeScriptServiceProxy {
_getModel(uri: string): Promise<{ _eol: string, _lineStarts: any, _Lines: string[], length: number, _uri: Uri, _versionId: number }>;
findRenameLocations(uri: string, position: number, findInStrings: boolean, findInComments: boolean, providePrefixAndSuffixTextForRename?: boolean): Promise<readonly RenameLocation[] | undefined>;
getCodeFixesAtPosition(uri: string, start: number, end: number, errorCodes: readonly number[], formatOptions: FormatCodeSettings, preferences: UserPreferences): Promise<readonly CodeFixAction[]>;
getCompilationSettings(): Promise<CompilerOptions>;
getCompilerOptionsDiagnostics(): Promise<Diagnostic[]>;
getCompletionEntryDetails(uri: string, position: number, name: string, formatOptions: FormatCodeOptions | FormatCodeSettings | undefined, source: string | undefined, preferences: UserPreferences | undefined): Promise<CompletionEntryDetails | undefined>;
getCompletionsAtPosition(uri: string, position: number, options: GetCompletionsAtPositionOptions | undefined): Promise<WithMetadata<CompletionInfo> | undefined>;
getCurrentDirectory(): Promise<string>;
getDefaultLibFileName(options: CompilerOptions): Promise<string>;
getDefinitionAtPosition(uri: string, position: number): Promise<ReadonlyArray<DefinitionInfo> | undefined>;
getEmitOutput(uri: string, emitOnlyDtsFiles?: boolean): Promise<EmitOutput>;
getFormattingEditsAfterKeystroke(uri: string, position: number, key: string, options: FormatCodeOptions | FormatCodeSettings): Promise<TextChange[]>;
getFormattingEditsForDocument(uri: string, options: FormatCodeOptions | FormatCodeSettings): Promise<TextChange[]>;
getFormattingEditsForRange(uri: string, start: number, end: number, options: FormatCodeOptions | FormatCodeSettings): Promise<TextChange[]>;
getNavigationBarItems(uri: string): Promise<NavigationBarItem[]>;
getOccurrencesAtPosition(uri: string, position: number): Promise<ReadonlyArray<ReferenceEntry> | undefined>;
getQuickInfoAtPosition(uri: string, position: number): Promise<QuickInfo | undefined>;
getReferencesAtPosition(uri: string, position: number): Promise<ReferenceEntry[] | undefined>;
getRenameInfo(uri: string, position: number, options?: RenameInfoOptions): Promise<RenameInfo>;
getScriptFileNames(): Promise<string[]>;
getScriptKind(uri: string): Promise<ScriptKind>;
getScriptSnapshot(uri: string): Promise<IScriptSnapshot | undefined>;
getScriptVersion(uri: string): Promise<string>;
getSemanticDiagnostics(uri: string): Promise<Diagnostic[]>;
getSignatureHelpItems(uri: string, position: number, options: SignatureHelpItemsOptions | undefined): Promise<SignatureHelpItems | undefined>;
getSuggestionDiagnostics(uri: string): Promise<DiagnosticWithLocation[]>;
getSyntacticDiagnostics(uri: string): Promise<DiagnosticWithLocation[]>;
isDefaultLibFileName(uri: string): Promise<boolean>;
}
}它的用法如下：
var editor = monaco.editor.create(...etc...);
var tsProxy: ts.IMonacoTypeScriptServiceProxy;
monaco.languages.typescript.getTypeScriptWorker()
.then(function(worker: (v: monaco.Uri) => Promise<ts.IMonacoTypeScriptServiceProxy>) {
worker(editor.getModel().uri)
.then(function(proxy) {
tsProxy = proxy;
});
});现在，代理函数被称为getEmitOutput(uri: string, emitOnlyDtsFiles?: boolean)。uri是文件名，它是一个转换为字符串的monaco.Uri (在monaco术语中，model是编辑器中的单个文件)，因此：
tsProxy.getEmitOutput(editor.getModel().uri.toString())
.then((r) => { console.log(r.outputFiles[0].text); });返回已转换的JavaScript，以及所有其他文件(如果可用)！不用谢。:)
Stack Overflow用户
发布于 2020-06-23 17:09:24
在0.20.0版本中，情况发生了变化。方法getTypeScriptWorker和getJavaScriptWorker现在返回一个有效的类型：
export const getTypeScriptWorker: () => Promise<(...uris: Uri[]) => Promise<TypeScriptWorker>>;
export const getJavaScriptWorker: () => Promise<(...uris: Uri[]) => Promise<TypeScriptWorker>>;此外，promise参数也已更改。
通过此更改，不再需要维护自己的worker (代理)类型。
Stack Overflow用户
发布于 2020-12-24 17:59:11
到目前为止，讨论的重点是获得JS/TS worker代理，但对于如何获得已转换代码的原始问题，有一个简单得多的解决方案：
import ts from "typescript";
this.worker.postMessage({ code: ts.transpile(context.code) });这就是我将TS代码从编辑器发送到web worker以进行独立执行的方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55132485
复制相关文章
相似问题