时间戳

首页 > 解决方案 > 在 JavaScript 的类型文件中声明接口

javascript - 在 JavaScript 的类型文件中声明接口

问题描述

项目信息

我正在开发一个利用.d.ts文件的 JavaScript 项目。这是我之前提出的问题的后续问题，因此您可以在此处查看有关该项目的更多信息。

问题

虽然我通常可以从类型文件中提取函数，但我无法提取为空或纯粹由接口组成的接口或命名空间。我通过const为每个接口创建一个实现并@typeof ConstantImplementation在评论中使用暂时解决了这个问题。请参见下面的示例：

// Typings File
export namespace test {
    export interface ITest {
        foo: string;
        bar: number;
    }
    export const Test: ITest;
}

// JS File
if (undefined) var {Test: ITest} = require("globals.d.ts").test; 
// Above line shows `unused var error`

/* @type {typeof ITest} */
var x = {};
x.foo = "hello";
x.bar = 3;
// if I do `x.` intellisense should suggest `foo` and `bar`

我想知道是否有更好的方法来解决这个问题，最好是一种不会引发错误的方法（使用eslint ignore line不是修复方法）。

澄清

这个问题不是关于从类型文件中获取功能。这纯粹是为了让 VSCode 智能感知与类型接口一起工作。这是一张图片来解释我想要的是什么（圆圈内的两条线）：

在此处输入图像描述

标签： javascriptinterfacevisual-studio-codeintellisense.d.ts

解决方案

所以我能够使用 JSDoc 解决这个问题

测试.d.ts

export namespace test {
    export interface ITest {
        foo: string;
        bar: number;
    }
}

测试.js

/**
 * @type {import("./test").test.ITest}
 */

let x;

x.

智能感知现在有效

工作智能

我还发现一件事是，如果您jsconfig.json添加

jsconfig.json

{
    "compilerOptions": {
        "checkJs": true
    }
}

你的智能进一步提高

更好的智能感知

更新 1

正如@nickzoum 所指出的，如果您定义test.d.ts如下

export interface ITest {
    foo: string;
    bar: number;
}

export as namespace test;

然后你也可以在 JS 中使用下面的表单进行智能感知

/** @typedef {import("./test").ITest} ITest */

/** @type {ITest} */
var x = {};
x.

推荐阅读