如何在 es 项目中使用 TS 声明文件 + JSDoc 提供智能提示？

在 JavaScript 项目中使用 TypeScript 声明文件和 JSDoc 可以帮助我们提高代码的质量和可维护性。TypeScript 声明文件可以为 JavaScript 代码提供类型信息，而 JSDoc 可以为函数、类和变量添加注释，以帮助我们理解代码。

下面，我们就来看看如何在 es 项目中使用 TS 声明文件和 JSDoc 来提供智能提示。

首先，我们需要安装 TypeScript 和 JSDoc。我们可以使用以下命令来安装它们：

npm install -g typescript
npm install -g jsdoc

安装好之后，我们就可以开始创建 TS 声明文件和 JSDoc 注释了。

TS 声明文件

TS 声明文件是 JavaScript 代码的类型定义文件。它可以帮助 TypeScript 编译器理解 JavaScript 代码的类型，并提供智能提示。

要创建 TS 声明文件，我们可以使用以下命令：

tsc --declaration --outDir ./lib src/index.js

这条命令会将 src/index.js 文件编译成 lib/index.d.ts 文件。index.d.ts 文件就是 TS 声明文件。

JSDoc 注释

JSDoc 注释是 JavaScript 代码的注释。它可以为函数、类和变量添加注释，以帮助我们理解代码。

要添加 JSDoc 注释，我们可以使用以下格式：

/**
 * 函数
 *
 * @param {string} name 姓名
 * @returns {string} 问候语
 */
function greet(name) {
  return `Hello, ${name}!`;
}

VSCode 配置

为了让 VSCode 能够使用 TS 声明文件和 JSDoc 注释提供智能提示，我们需要在 VSCode 中进行一些配置。

首先，我们需要在 VSCode 中安装 TypeScript 插件。我们可以通过以下步骤安装 TypeScript 插件：

1. 打开 VSCode，点击左下角的扩展图标。
2. 在搜索框中输入 "TypeScript"。
3. 点击 "TypeScript - JavaScript with Language Features" 插件，然后点击 "Install" 按钮。

安装好 TypeScript 插件之后，我们需要在 VSCode 中启用 JSDoc 支持。我们可以通过以下步骤启用 JSDoc 支持：

1. 打开 VSCode，点击左下角的设置图标。
2. 在搜索框中输入 "jsdoc.enable"。
3. 将 "jsdoc.enable" 的值设置为 true。

完整的例子

下面，我们就来看看一个完整的例子。

我们创建一个名为 index.js 的 JavaScript 文件，内容如下：

/**
 * 函数
 *
 * @param {string} name 姓名
 * @returns {string} 问候语
 */
function greet(name) {
  return `Hello, ${name}!`;
}

然后，我们创建一个名为 index.d.ts 的 TS 声明文件，内容如下：

declare function greet(name: string): string;

最后，我们在 VSCode 中打开 index.js 文件，就可以看到 VSCode 提供的智能提示了。

总结

通过使用 TS 声明文件和 JSDoc 注释，我们可以提高 JavaScript 代码的质量和可维护性。同时，我们也可以通过 VSCode 的智能提示功能来提高我们的开发效率。