次の方法で共有


Visual Studio で JavaScript IntelliSense を利用できるようにする

Visual Studio 2019 以降を使用して Office アドインを開発する場合は、JSDoc を使用して、JavaScript 変数、オブジェクト、パラメーター、および戻り値に対して IntelliSense を有効にすることができます。 この記事では、JSDoc の概要と、JSDoc を使用して Visual Studio の IntellSense を作成する方法について説明します。 詳細については、「JavaScript IntelliSense」および「JSDoc support in JavaScript」を参照してください。

Office.js の型定義

Visual Studio に Office.js の型の定義を提供する必要があります。 そのために、次の操作を実行します。

  • \Office\1\ という名前のソリューションのフォルダーに Office.js ファイルのローカル コピーを用意します。 アドイン プロジェクトの作成時に、Visual Studio の Office アドイン プロジェクト テンプレートにより、このローカル コピーが追加されます。

  • アドイン ソリューションの Web アプリケーション プロジェクトのルートに、tsconfig.json ファイルを追加することで、Office.js のオンライン バージョンを使用します。 ファイルには、次のコンテンツが含まれている必要があります。

        {
            "compilerOptions": {
                "allowJs": true,            // These settings apply to JavaScript files also.
                "noEmit":  true             // Do not compile the JS (or TS) files in this project.
            },
            "exclude": [
                "node_modules",             // Don't include any JavaScript found under "node_modules".
                "Scripts/Office/1"          // Suppress loading all the JavaScript files from the Office NuGet package.
            ],
            "typeAcquisition": {
                "enable": true,             // Enable automatic fetching of type definitions for detected JavaScript libraries.
                "include": [ "office-js" ]  // Ensure that the "Office-js" type definition is fetched.
            }
        }
    

JSDoc 構文

基本的な手法として、変数 (またはパラメーターなど) の前に、データ型を識別するコメントを付けます。 これにより、Visual Studio の IntelliSense は、そのメンバーを推測できるようになります。 次に例を示します。

変数

/** @type {Excel.Range} */
let subsetRange;

subsetRange 変数の IntelliSense の抜粋。

パラメーター

/** @param {Word.ParagraphCollection} paragraphs */
function myFunc(paragraphs){

}

IntelliSense for paras パラメーター (JavaScript の paragraphs パラメーターの例) の抜粋。

戻り値

/** @returns {Word.Range} */
function myFunc() {

}

myFunc() 戻り値の IntelliSense の抜粋。

複合型

/** @typedef {{range: Word.Range, paragraphs: Word.ParagraphCollection}} MyType

/** @returns {MyType} */
function myFunc() {

}

let myVar の複合型宣言の IntelliSense。例えば。

関連項目