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

问题描述

我正在使用 VSCode 开发 JavaScript 项目.我正在使用 UMD 设计模式，而 vscode 智能感知无法识别来自另一个文件的模块的导出.我在名为 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");

Undefined 是在不触发 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屋！