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

时间:2018-02-08 20:04:35

标签: typescript visual-studio-code intellisense jsdoc

VSCode版本:1.20.0

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

  1. tsconfig.json / jsconfig.json的存在应指示vscode该目录是TypeScript / JavaScript项目(docs)。这意味着IntelliSense应该知道目录中的所有.js.ts文件(尊重includeexclude配置属性),以及这些文件导出的所有类/定义文件,而不必明确引用它们。
  2. 在任何情况下,您都可以通过显式引用所述文件,使IntelliSense了解文件导出的类/定义。这可以通过require()import/// <reference path="..." />
  3. 完成
  4. 您可以混合使用TypeScript和JavaScript文件。
  5. 鉴于这些先入之见,我无法让vscode按预期工作。请参阅下面的简单示例项目。目标是能够使用Person JavaScript文件中test.d.ts类型定义TypeScript文件中定义的test.js类定义。但是,IntelliSense抱怨它不知道Person类:

    vscode screenshot

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

    的软件包

    假设#1,只需要包含tsconfig.json文件就应该是我需要的。即便如此,我还尝试在typings/test.d.ts中明确列出test.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"
      ]
    }
    

    test.js

    /// <reference path="./typings/index.d.ts" />
    
    /** @type {Person} */
    const p = {};
    

    typings/test.d.ts

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

1 个答案:

答案 0 :(得分:5)

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

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

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

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