在前端开发中，我们常常需要与用户进行交互，例如获取用户输入信息、展示提示框等等。而 prompts 就是一个兼容性强、易用性高的交互式命令行工具，可以让我们更加便捷地进行交互。但在实际使用中，很多时候需要配合 TypeScript 去使用 prompts，这时候 npm 包 @types/prompts 就派上了用场。
本篇文章主要介绍 npm 包 @types/prompts 的使用方式，希望能够在日常开发中为大家提供一些参考。
1. 安装
npm 包 @types/prompts 可以通过 npm 进行安装，只需在命令行中输入以下命令：
npm install @types/prompts --save-dev
2. 初始化 prompts
在使用 prompts 前，需要先进行初始化。下面是一个简单的初始化示例：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ -- -- - ----- -------- - ----- --------- ----- ------- ----- -------- -------- ----- -- ---- -------- -------- --- ---------------------------- -----展开代码
该示例展示了一个提示用户输入喜爱的水果名称的交互式命令行工具。其中 prompts 是从 npm 包 prompts 中引入的，具体的类型也来源于这个包。
prompts 函数的参数类型为：
-- -------------------- ---- ------- --------- ------------ - ----- - ------ - ---------- - ----------- - -------- - --------- - ------ - -------- - -------- - -------------- ----- ------- --------- ------- --------- ------- ------- --------- - ----------- -------- ------- ------- -- ---- ---------- ------- ------- -- ------- - ------- --------- ------- - ------ ------- ---------- ------- -- -- ----- ----- ------- ----- ------- ------- -------- ------- ------- ----------- ------- ----------- ------ - ------- -------- ------- ---------- ------- --------- --------- ------ ------- - --------- ------ - ------ ------- ------ ---- ------------- ------- ---------- -------- ---------- -------- -展开代码
其中 type 为必要参数，表示要提示的内容的类型，有多种类型可供选择，包括 text、password、list 等。name 也是必要参数，表示该提示的名称，可以被用于后续的操作。
3. 使用 prompts 获取用户输入
在初始化后，我们就可以通过调用 prompts 函数来获取用户的输入，其函数定义如下：
function prompts<T extends Partial<Record<string, any>>>( questions: ReadonlyArray<PromptObject> ): Promise<T>;
其中，questions 可以包含多个交互式问题，如下所示：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ -- -- - ----- -------- - ----- --------- - ----- ------- ----- ------- -------- ------- ---- ------- -- - ----- --------- ----- ------ -------- ---- --- --- ------ -- --- -------------------------- -------------- -----展开代码
3.1 text 输入
type 属性设置为 text 后，可以输入字符串内容，如下所示：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ -- -- - ----- -------- - ----- --------- ----- ------- ----- -------- -------- ------- ----- ----------- --- ---------------------------- -----展开代码
3.2 password 输入
type 属性设置为 password 后，可以输入密码，如下所示：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ -- -- - ----- -------- - ----- --------- ----- ----------- ----- ----------- -------- ------- ----- ---- ---------- --- ------------------------------- -----展开代码
3.3 list 选择
type 属性设置为 list 后，可以从列表中选择，如下所示：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ -- -- - ----- -------- - ----- --------- ----- ------- ----- -------- -------- ----- -- ---- -------- -------- -------- - - ------ -------- ------ ------- -- - ------ --------- ------ -------- -- - ------ --------- ------ -------- -- -- --- ---------------------------- -----展开代码
3.4 checkbox 选择
type 属性设置为 multiselect 后，可以从多个选项中进行多选，如下所示：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ -- -- - ----- -------- - ----- --------- ----- -------------- ----- --------- -------- ------- -------- -------- - - ------ ------ ------ ----- -- - ------ -------- ------ ------- -- - ------ ------- ------ ------ -- -- --- ----------------------------- -----展开代码
4. 使用 @types/prompts 开发 TypeScript
npm 包 @types/prompts 是专门为 TypeScript 做兼容的，因此可以很方便地在 TypeScript 项目中使用。只需要通过下面的方式引入 prompts：
import prompts from "prompts";
5. 总结
npm 包 @types/prompts 提供了方便易用的命令行交互工具，可以帮助我们更加便捷地进行交互。本文从安装、初始化、使用和返回值四个方面详细介绍了 prompts 的使用方式，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/111151
