モナコエディタにタイプヒントを提供

Question

モナコエディタを使用して、JavaScriptのエディタにインテリセンス/コード補完を提供しようとしています。コードはtypescriptではなく、有効なjavascriptである必要があります。私はのt.dsを持っており、実行時に推測することができますtypescriptですクラスでイベントパラメータ、上のコード補完を提供したい

function onMyEvent(event) 
{ 
    event.someProperty 
} 

：

は、このようないくつかのユーザが入力したスクリプトを考えます。

理想的には、eventのタイプがSomeEventClassであることをモナコに伝えておき、残りのことをさせてください。 これは、スクリプトにタイプヒントを追加することを意味していました。しかし、私はそれを行う方法を見ることができません。 ザッツはFTB参照ブロックされたように私はJSDocの構文と、ユーザースクリプト内の様々な組み合わせを使用してみましたが、それはなります https://github.com/Microsoft/monaco-editor/issues/203 、私はまたごとに、ダイナミックd.tsを注入しようとしたAdding JavaScript type hints for VSCode/Monaco Intellisence

https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-configure-javascript-defaults

しかし、この関数を宣言しても、エディタには何も意味がないようです。確かに新しいクラスを宣言すると、その機能の中でeventが特定のタイプであることをモナコに伝える方法を考えることができません。

私はregisterCompletionItemProvider APIを見ることができますが、それはアイテムがどこに宣言されたかなどのコンテキストを提供しませんし、私が望むd.tsファイルを自動的に使用させません。

Answer 1

これは、我々がmagikcraft.ioのためにそれを行う方法です：ストレート遊び場で、左ペインにこのコードをドロップし、[実行ヒット：今すぐ

monaco.editor.create(document.getElementById("container"), { 
    value: "function hello() {\n\talert('Hello world!');\n}", 
    language: "typescript" 
}); 

const fact = `declare namespace custom { export function onMyEvent(event: customClass): void; 

export class customClass { 
    customProperty: string; 
}`; 
const factFilename = 'myCustomNamespace'; 
this.monaco.languages.typescript.typescriptDefaults.addExtraLib(fact, factFilename); 

を、右側のペインで、次のように入力します。custom.をし、カスタムファクトのオートコンプリートを取得します。

Answer 2

モナコのバージョン0.90では、https://github.com/Microsoft/monaco-editor/issues/203が修正されているため、編集コードでJSDocを使用すると、これを部分的に追加することができます。モナコplaygoundの左側で、このコードの場合

：

// validation settings 
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({ 
    noSemanticValidation: true, 
    noSyntaxValidation: false 
}); 

// compiler options 
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ 
    target: monaco.languages.typescript.ScriptTarget.ES6, 
    allowNonTsExtensions: true, 
    allowJs: true 
}); 

// extra libraries 
monaco.languages.typescript.javascriptDefaults.addExtraLib([ 
    'declare class SomeEventType {', 
    ' /**', 
    '  * Heres the doco for someProperty', 
    '  */', 
    ' someProperty: string', 
    '}', 
].join('\n'), 'filename/facts.d.ts'); 

var jsCode = [ 
    '"use strict";', 
    '', 
    "/**", 
    " * @param {SomeEventType} event", 
    " */", 
    "function onMyEvent(event) {", 
    "", 
    "}" 
].join('\n'); 

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

は、エディタが今SomeEventTypeなどのイベントパラメータを解釈できることを意味します

Answer 3

でこれを入れてモナコ遊び場の編集者：

monaco.editor.create(document.getElementById("container"), { 
    value: "function hello() {\n\talert('Hello world!');\n}", 
    language: "typescript" 
}); 

const fact = `declare function onMyEvent(event: string): void; 
`; 
const factFilename = 'myCustomNamespace1'; 
this.monaco.languages.typescript.typescriptDefaults.addExtraLib(fact, factFilename); 

右ペインにonMyEventと入力すると、