web-dev-qa-db-ja.com

JavaScript VSCodeプロジェクトにカスタムタイピングファイルを追加する

問題

私はVSCodeを使用してJavaScriptプロジェクトに取り組んでいます。 UMDデザインパターンを使用していますが、vscode intellisenseは別のファイルからのモジュールのエクスポートを認識できません。すべての宣言をglobals.d.tsというファイルに追加しました。残念ながら、JavaScriptファイルからglobals.d.ts宣言をロードする方法が見つかりませんでした。

モジュール宣言の例

export namespace ModuleName {
    export interface Item {
        toString(): string;
        property: string;
        name: string;
    }
}

JavaScriptファイルの例

(function (global, factory) {
    "use strict";
    if (typeof ModuleName === "undefined" && typeof require === "function") global.ModuleName = require("./mymodule.js");
    if (typeof exports !== "undefined" && typeof module !== "undefined") factory(exports);
    else factory(global.OtherModule = global.OtherModule || {});
})(this, (function (exports) {
    "use strict";

    function myMethod() {

    }

    exports.myMethod = myMethod;
    return exports;
}));

私が試したもの

typingsフォルダー、typings install "globals.d.ts"などを作成するtypings.jsonを使用してみました。これは、VSCodeで入力ファイルを開き、アプリを閉じて再度開いた後にのみ機能しました。これは、typingsファイルを開いたままにしたときにのみ機能しました。これは、インターフェイス宣言を追加するのにあまり便利な方法ではありません。

VSCodeについて（8か月前）

Version: 1.17.0
Shell: 1.7.7
Node: 7.9.0
Architecture: x64

VSCodeについて（現在）

Version: 1.24.1
Shell: 1.7.12
Node: 7.9.0
Architecture: x64

動作に変化はありません。

javascriptvisual-studio-codetypescript-typings.d.ts
26
nick zoum

了承

この回答は主に Vitaliiの回答 によってコピー/インスピレーションを得ましたが、少し変更する必要があったため、プロジェクトで作業するために、この回答も追加しています。

解決

私が外部コードを使用する各ファイルの上に、私は追加しました：

if (undefined) var { -List of Namespaces used- } = require("./globals");

未定義は、eslintまたはjshintをトリガーせずに一定のfalse値を保持する（私が考えた）最短かつ最も単純な方法です。これにより、jsdocを「要求」しながら、コードが実行されることがなくなります。

varまたはletの代わりにconstを使用しました。これは、ifスコープではなく、グローバルファイルスコープに留まるためです。

これは実際には{}内の変数を（undefinedとして）宣言しますが、typeof undeclaredとtypeof undefinedはどちらも"undefined"であるため、違いはありませんコード。

1つのファイルにすべての宣言を含めることにより、1つのrequireステートメントを1行で分解することにより、すべての名前空間を取得できます。ただし、これが機能するためには、タイピングファイルでexportではなくdeclareを使用する必要があることに注意してください。

ソリューションの問題

JavaScriptファイルからglobals.d.tsのインターフェースを表示できません。

export namespace Namespace {
    export interface Interface {
        property: string;
    }
}

Interfacesへのインターフェースで名前空間の名前を変更することによりこの問題を一時的に修正し（globals.d.tsのすべての参照も修正）、インターフェースを実装する定数で別の名前空間を作成しました。

export namespace Interfaces {
    export interface Interface {
        property: string;
    }
}

export namespace Namespace {
    export const Interface: Interfaces.Interface;
}

また、JavaScriptコメントでglobals.d.tsの名前空間を使用する際に問題が発生しました。この問題を解決するために、型の前に次のようにtypeofを追加しました：/** @param {typeof Namespace.Interface} */

更新

.d.tsファイルから.jsファイルにインターフェースをエクスポートする方法を見つけました。答えは here です。

4
nick zoum

プレーンなNode.JSソリューション

次のファイルを作成します（名前は同じである必要があります）：

lib.js 
lib.d.ts

Lib.js内にコードを記述します。これを次のように言います。

function whenDo(params) {
    return params;
}

module.exports = whenDo;

Lib.d.ts内でこれを書きます：

declare function wd(params: wd.Params): wd.Params;

declare namespace wd {
    interface Params {
        name: string;
    }
}

export = wd;

次に、どこかにファイルを作成して、新しく作成した関数を使用し、次のコードを記述します。

const wd = require('./lib/lib');

const opt = wd({name:'drag13'});
console.log(opt.name);

そして魔法はここにあり、すべてうまくいきました。 enter image description here

ここからコードが盗まれた https://github.com/Drag13/WhenDo/blob/master/src/index.d.ts

9
Drag13

babelを使用している人のためのES6インポート構文ソリューション

次のファイルを作成します（名前は同じである必要があります）：

lib.js 
lib.d.ts

Lib.js内にコードを記述します。これを次のように言います。

export const testMethod = (name, params) => params && params.age ? `hello ${name} with age: ${params.age}` : `hello ${name}`;
export const myConst = {
     name: 'test',
     age: 5
 };

Lib.d.ts内でこれを書きます：

declare namespace MyModule {
    interface IParams { age: number; }

    function testMethod(name: string, params: IParams): string;

    const myConst: {
        name: string,
        age: number
    }
}
export = MyModule;

次に、どこかにファイルを作成して、新しく作成した関数を使用し、次のコードを記述します。

import { testMethod } from "./lib/lib";

const name = 'drag13';
const r = testMethod(name, { age: 5 });
console.log(r);

これで、intellisenseはparamsとresultに対して正常に機能するはずです。

enter image description here

しかし。このアプローチでは、node.jsとインポートをフレンドにバベルを使用する必要があります。コードをインポートスタイルから必須スタイルに変更しようとすると、型と引数は表示されますが、インテリジェンスは失敗します。

簡単なバベルチェック：

npm i babel-preset-env babel-cli
./node_modules/.bin/babel-node index.js --presets env

私のVsCodeバージョンは1.24.1です

4
Drag13