在JavaScript VSCode项目中添加自定义类型文件 [英] Add custom typings file in a JavaScript VSCode project

问题描述

我正在使用VSCode进行JavaScript项目.我正在使用UMD设计模式，vscode intellisense无法识别另一个文件中模块的导出.我将所有声明添加到名为globals.d.ts的文件中.不幸的是，我找不到从JavaScript文件加载globals.d.ts声明的方法.

I am working on JavaScript project using VSCode. I am using the UMD design pattern and vscode intellisense cannot recognize the exports of a module from another file. I added all the declarations in a file called globals.d.ts. Unfortunately I couldn't find a way to load the globals.d.ts declarations from my JavaScript files.

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 install "globals.d.ts"创建了typings文件夹，typings.json等.这仅在VSCode中打开打字文件然后关闭并重新打开应用程序后才有效.这只有在我保持typings文件打开的情况下才有效.这不是添加接口声明的非常方便的方法.

What I tried

I tried using typings install "globals.d.ts" which created the typings folder, typings.json etc. This was only working after opening the typings file in VSCode then closing and reopening the app. That only worked while I kept the typings file open. This is not a very convenient way to add my interface declarations.

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

行为没有变化.

推荐答案

致谢

此答案主要是受 Vitalii的答案，但是由于必须对其进行一些修改才能与我的项目一起使用，因此我还要添加此答案.

Acknowledgment

This answer was mostly copied/inspired by Vitalii's answer, but since it had to be modified a bit, to work with my project, I am also adding this answer.

在使用外部代码的每个文件的顶部，我添加了:

On top of each file where I use external code, I added:

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

未定义是具有恒定假值而不触发eslint或jshint的最短，最简单的方法(我想到了).这样可以确保在仍然"需要jsdoc的情况下，永远不会运行代码.

Undefined is the shortest and simplest way (that I thought of) of having a constant false value without triggering eslint or jshint. This ensures that the code will never be run, while still "requiring" the jsdoc.

我使用了var而不是let或const，因为它不会停留在if范围内，而是停留在全局文件范围内.

I used var instead of let or const since it will not stay in the if scope, but rather the global file scope.

这实际上将在{}中声明变量(如undefined)，但是typeof undeclared和typeof undefined都是"undefined"，因此代码没有区别.

This will actually declare the variables inside the {} (as undefined), but typeof undeclared and typeof undefined are both "undefined", thus there is no difference in the code.

通过在一个文件中包含所有声明，我可以通过在一行中解构一个require语句来获取所有名称空间. 但是请记住，要使其正常工作，您需要在打字文件中使用export而不是declare.

By having all the declarations in one file, I can get all the namespaces by destructuring one require statement in one line. But keep in mind, that in order for this to work, you need to be using export and not declare in your typings file.

我无法从JavaScript文件查看globals.d.ts中的接口.

I cannot view the interfaces in globals.d.ts from JavaScript files.

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

我已经通过将名称空间的接口重命名为Interfaces来临时解决了这个问题(还修复了globals.d.ts中的所有引用)，并使用实现接口的常量创建了另一个命名空间，如下所示:

I have temporarily fixed this problem by renaming the namespace with the interfaces to Interfaces (also fixed all the references in globals.d.ts) and created another Namespace with constants that implement the interfaces, like so:

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} */

I also had trouble using the namespaces from globals.d.ts in JavaScript comments. To solve this problem I added typeof infront of the type, like so: /** @param {typeof Namespace.Interface} */

我现在找到了一种将接口从.d.ts文件导出到.js文件的方法，您可以找到答案

I have now found a way to export interfaces from .d.ts files to .js files, you can find the answer here.

这篇关于在JavaScript VSCode项目中添加自定义类型文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！