代码之家 › 专栏 › 技术社区 › Mike

在JavaScript文件中使用类型化定义的vscode

jsdoc intellisense visual-studio-code typescript

Mike · 技术社区 · 6 年前

VSCode版本:1.20.0

首先,我对Visual Studio代码IntelliSense的了解:

存在 tsconfig.json / jsconfig.json 应该向vscode指示目录是一个TypeScript/JavaScript项目( docs ). 这意味着IntelliSense应该了解所有 .js 和 .ts 目录中的文件(关于 include 和 exclude 配置属性),以及这些文件导出的所有类/定义,而无需显式引用它们。
在任何情况下,您都可以通过显式引用所述文件,使IntelliSense了解文件导出的类/定义。这可以通过 require() , import 或 /// <reference path="..." /> .
您可以混合使用TypeScript和JavaScript文件。

鉴于这些先入为主的观念,我无法让vscode按预期工作。请参见下面的简单示例项目。目标是能够使用 Person 中定义的类定义 test.d.ts 中键入的定义TypeScript文件 test.js JavaScript文件。然而,IntelliSense抱怨说,它不知道 人 类别:

请注意,IntelliSense适用于 npm install -ed。

假设#1,仅包括 t配置。json 文件应该是我所需要的全部。即便如此,我也尝试显式列出 typings/test.d.ts 和 测验js公司 在里面 includes . 我也试着列出 typings 在里面 compilerOptions.typeRoots .

给定假设#2,包括中的三斜杠引用指令 测验js公司 到 ./typings/test.d.ts 应该有用。

有很多过时的信息,因为vscode改变了它处理配置、键入等的方式。我已经阅读了我能找到的所有内容,但我无法让它工作。

有什么想法吗?我错过了什么?

t配置。json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "lib": ["es6"],
    "allowJs": true,
    "checkJs": true
  },
  "exclude": [
    "node_modules"
  ]
}

测验js公司

/// <reference path="./typings/index.d.ts" />

/** @type {Person} */
const p = {};

打字/测试。d、 ts

export class Person {
  name: string;
  age: number;
}

1 回复 | 直到 6 年前

Mike 6 年前

截至2018年5月(v1.24)版本的VSCode,TypeScript版本已更新至2.9,其中包括 import() 类型。

这意味着我们也可以使用 导入() 在JSDocs中,例如:

/** @type {import('./typings/test').Person} */
const p = {};

和/或

/** @typedef {import('./typings/test').Person} Person */

/** @type {Person} */
const p = {};

这还允许我们引用其他JavaScript文件中定义的类型,即使它们没有导出。不 tsconfig.json 或任何其他需要的配置文件,无需使用TypeScript文件。完整示例:

func1.js

/**
 * @typedef MyStruct
 * @property {string} fu
 * @property {number} bar
 */

module.exports = function func1() {
  // ...
}

func2.js

/**
 * @param {import('./func1').MyStruct} options 
 */
module.exports = function func2(options) {
  // ...
  // IntelliSense definition for this function:
  // func2(options: MyStruct): void
}

您还可以引用节点模块中的类型:

/** @type {import('async').AsyncCargo} */

注: 我确实发现了一个可能的bug。如果文件 导入() 不导出任何内容,intellisense中断。