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

Posted 2023-03-13

【中文标题】vscode 在 JavaScript 文件中使用类型化定义

【英文标题】：vscode Using Typed Definitions in JavaScript Files

【发布时间】：2018-07-19 12:26:36

【问题描述】：

VSCode 版本：1.20.0

首先，我认为我对 Visual Studios Code IntelliSense 的了解：

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

鉴于这些先入之见，我无法让 vscode 按预期工作。请参阅下面的简单示例项目。目标是能够在test.js JavaScript 文件中使用test.d.ts 类型化定义TypeScript 文件中定义的Person 类定义。但是，IntelliSense 抱怨它不知道 Person 类：

请注意，IntelliSense 可与 npm install-ed 的软件包一起使用。

假设 #1，只需包含 tsconfig.json 文件就应该是我所需要的。即便如此，我也尝试在includes 中明确列出typings/test.d.ts 和test.js。我还尝试在compilerOptions.typeRoots 中列出typings。

假设 #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;

【问题讨论】：

将 export class 更改为 declare class

@Alex 成功了！但为什么有必要？查看其他类型的定义，我看到 exports 但不是 declares。 Here 就是一个例子。

好吧，你可以使用export class 并在需要的地方导入它：import Person from "./typings/test";

嗯。如果你使用 CommonJS (require()) 怎么办？不能require() TypeScript 文件。

不知道。简短的评论

【参考方案1】：

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

VSCode May 2018 (v1.24) release notes TypeScript v2.9 announcement

这意味着我们也可以像这样在 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() 的文件没有导出任何东西，智能感知就会中断。

【讨论】：

太糟糕了，import() 完全破坏了 jsdoc，即无法再解析/编译文档。

什么意思？我刚刚在最新的 vscode (1.50.1) 中测试了上面的内容，它仍然可以正常工作。

我的意思是 jsdoc 无法解析 import() 名称路径。什么在 vscode 中起作用是无关紧要的，因为它使用 typecrpt tsc 而不是 jsdoc。 IE。您不能从源代码生成文档。

啊，我明白你的意思了。