[英]vscode Using Typed Definitions in JavaScript Files
VSCode Version: 1.20.0 VSCode 版本:1.20.0
First, what I think I know about Visual Studios Code IntelliSense:首先,我认为我对 Visual Studios Code IntelliSense 的了解:
tsconfig.json
/ jsconfig.json
should indicate to vscode that the directory is a TypeScript/JavaScript project ( docs ). tsconfig.json
/ jsconfig.json
的存在应该向 vscode 表明该目录是一个 TypeScript/JavaScript 项目( docs )。 This means that IntelliSense should be aware of all .js
and .ts
files in the directory (respecting the include
and exclude
config properties), and all classes/definitions exported by those files without having to explicitly reference them..js
和.ts
文件(尊重include
和exclude
配置属性),以及这些文件导出的所有类/定义,而不必显式引用它们。require()
, import
, or /// <reference path="..." />
.require()
、 import
或/// <reference path="..." />
。 Given these preconceptions, I can not get vscode to work as expected.鉴于这些先入之见,我无法让 vscode 按预期工作。 See the simple example project below.
请参阅下面的简单示例项目。 The objective is to be able to use the
Person
class definition defined in test.d.ts
typed definition TypeScript file in the test.js
JavaScript file.目标是能够在
test.js
JavaScript 文件中使用test.d.ts
类型化定义 TypeScript 文件中定义的Person
类定义。 However, IntelliSense complains that it is unaware of the Person
class:但是,IntelliSense 抱怨它不知道
Person
类:
Note that IntelliSense works with packages that have been npm install
-ed.请注意,IntelliSense 可与
npm install
-ed 的包一起使用。
Given assumption #1, simply including the tsconfig.json
file should be all I need.鉴于假设 #1,我只需要包含
tsconfig.json
文件即可。 Even so, I also tried explicitly listing typings/test.d.ts
and test.js
in includes
.即便如此,我也尝试在
includes
明确列出typings/test.d.ts
和test.js
。 I also tried listing typings
in compilerOptions.typeRoots
.我也试着列出
typings
中compilerOptions.typeRoots
。
Given assumption #2, including a triple-slash reference directive in test.js
to ./typings/test.d.ts
should work.鉴于假设 #2,在
test.js
包含一个三斜杠引用指令到./typings/test.d.ts
应该可以工作。
There is a lot of outdated information out there because vscode has changed the way it handles configurations, typings, etc. I have read everything I could find but I can't get it to work.那里有很多过时的信息,因为 vscode 已经改变了它处理配置、类型等的方式。我已经阅读了我能找到的所有内容,但我无法让它工作。
Any ideas?有什么想法吗? What am I missing here?
我在这里缺少什么?
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;
}
As of the May 2018 (v1.24) release of VSCode, the TypeScript version was updated to 2.9 which includes the ability to import()
types.截至 2018 年 5 月 (v1.24) 版本的 VSCode,TypeScript 版本已更新至 2.9,其中包括
import()
类型的功能。
This means we can also use import()
in JSDocs like so:这意味着我们也可以像这样在 JSDocs 中使用
import()
:
/** @type {import('./typings/test').Person} */
const p = {};
and/or和/或
/** @typedef {import('./typings/test').Person} Person */
/** @type {Person} */
const p = {};
This also allows us to reference types defined in other JavaScript files even if they are not exported.这也允许我们引用其他 JavaScript 文件中定义的类型,即使它们没有被导出。 No
tsconfig.json
or any other configuration file required and no need to use TypeScript files.不需要
tsconfig.json
或任何其他配置文件,也不需要使用 TypeScript 文件。 Full example:完整示例:
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
}
You can also reference types from node modules:您还可以从节点模块引用类型:
/** @type {import('async').AsyncCargo} */
Note: I did find a possible bug.注意:我确实发现了一个可能的错误。 If the file you
import()
does not export anything, intellisense breaks.如果您
import()
的文件没有导出任何内容,intellisense 就会中断。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.