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

Mik*_*ike 4 intellisense jsdoc typescript visual-studio-code

VSCode版本:1.20.0

首先,我对Visual Studios Code IntelliSense的了解:

  1. 一的存在tsconfig.json/ jsconfig.json应说明vscode该目录是打字稿/ JavaScript的项目(文档)。这意味着IntelliSense应该知道目录中的所有.js.ts文件(尊重includeand excludeconfig属性),以及这些文件导出的所有类/定义,而不必明确引用它们。
  2. 在任何情况下,您都可以通过显式引用文件来使IntelliSense意识到文件导出的类/定义。这可以通过来完成require()import或者/// <reference path="..." />
  3. 您可以混合使用TypeScript和JavaScript文件。

鉴于这些先入之见,我无法使vscode正常工作。请参见下面的简单示例项目。目的是能够使用JavaScript文件Persontest.d.ts类型化定义TypeScript文件中定义的类定义test.js。但是,IntelliSense抱怨它不知道Person该类:

vscode屏幕截图

请注意,IntelliSense与已被npm install-ed的软件包一起使用。

给定假设1,仅需要包含tsconfig.json文件就足够了。即使这样,我也尝试显式列出typings/test.d.tstest.jsincludes。我也尝试typings在中列出compilerOptions.typeRoots

鉴于假设#2,包括三斜杠参考指令test.js./typings/test.d.ts应该工作。

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

有任何想法吗?我在这里想念什么?


tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "lib": ["es6"],
    "allowJs": true,
    "checkJs": true
  },
  "exclude": [
    "node_modules"
  ]
}
Run Code Online (Sandbox Code Playgroud)

test.js

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

/** @type {Person} */
const p = {};
Run Code Online (Sandbox Code Playgroud)

typings/test.d.ts

export class Person {
  name: string;
  age: number;
}
Run Code Online (Sandbox Code Playgroud)

Mik*_*ike 7

从VSCode 2018年5月(v1.24)版本开始,TypeScript版本已更新为2.9,其中包括import()键入功能。

这意味着我们也可以import()像这样在JSDocs中使用:

/** @type {import('./typings/test').Person} */
const p = {};
Run Code Online (Sandbox Code Playgroud)

和/或

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

/** @type {Person} */
const p = {};
Run Code Online (Sandbox Code Playgroud)

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


func1.js

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

module.exports = function func1() {
  // ...
}
Run Code Online (Sandbox Code Playgroud)

func2.js

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

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

/** @type {import('async').AsyncCargo} */
Run Code Online (Sandbox Code Playgroud)

注意:我确实发现了可能的错误。如果您import()没有导出任何文件,则Intellisense会中断。