在前端开发中，经常需要跟后端做接口交互。而在 Microsoft 的团队协作平台 VSTS (Visual Studio Team Services) 中，提供了 REST API 接口和 TypeScript 类型定义，方便前端对后端的数据进行获取和管理。为了更方便地进行这样的操作，社区中出现了一个 npm 包 vsts-rest-ts，它将 VSTS 的 REST API 封装成了 TypeScript 接口形式，方便前端在使用时直接获取到接口数据和类型信息，从而减少了开发过程中的繁琐细节，提高了开发效率。
安装
在项目中使用 npm 安装 vsts-rest-ts 包：
--- ------- ------------
使用
使用前需要申请 VSTS 的 Personal Access Token (PAT)。详细申请步骤可见 官方文档，这里不再赘述。
安装完包之后，我们可以直接使用 TypeScript 中定义的接口和方法来完成 VSTS 相关操作。示例代码如下：
------ - ----------- ---------- - ---- ---------------
------ - -------- - ---- --------------------------------------------
----- -------- ------ -
----- ----- - ---------------------- -- --- ---
----- ---------- - --- ------------
-------- ----------------------------------- -- ---- --
------
---
----- ------- - ----- -----------------------
----- -------- - ----- ----------------------
----------------------
-
-------上述代码中，我们先引入了 Connection 和 getCoreApi。然后通过 Connection 创建了一个连接，并使用 getCoreApi 方法获取到 coreApi 对象。coreApi 对象就是对 VSTS REST API 进行了封装之后的一个对象，它拥有所有 API 的调用方法。在最后一步中，我们使用 coreApi.getProjects() 方法获取了所有项目的信息，并打印出来。示例代码中共分为四步，每一步的 API 调用方法在 vsts-rest-ts 包中都有相应的 TypeScript 定义，可以直接使用。
深度解析
在示例中我们使用了 coreApi.getProjects() 方法，它对应了 VSTS REST API 的 /projects?api-version=1.0 接口，返回一个 Project[] 数组。让我们来深入看一下 getProjects 方法的源码定义：
------ ----- -------- ------------
----- --------
------ -------
----- -------
------------------- -------
-- ------------------ -
----- -------- - ----- --------------------------------------------------------------------------- ----- ----- -
-------- -----
------- ----
-------------------- ------------------
---
------ ---------------
-在这个方法中，我们可以看到 get 方法的使用：await this.connection.get<WrappedArray<Project>>(...)。这个方法就是通过 axios 库发送 HTTP GET 请求的，而 axios 是一个常用的 AJAX 库，详细使用与介绍可在它的 GitHub 仓库 上找到。接口调用的形式在包中已经被封装起来了，看起来非常清晰明了。
同时我们在定义方法时，强制了返回值类型为 Promise<Project[]>，也就是要求方法的返 回值必须为一个 Project 类型的数组对象，这里的 Project 类型就是 VSTS REST API 中的 Project 对象。我们也能在 vsts-rest-ts 包中找到这个定义：
------ --------- ------- -
--- -- -------
---- -------
------ ----
--------- -------
----------- ----
--------------- -----
------------ -------
------------- -
----- -------- ----
--
------------ -
--- -------
----- -------
---- -------
--
------- ----
--- -------
----- -------
-------------- -------
-这样，我们就可以通过调用方法获取到 REST API 中的接口数据，并对它进行验证或者操作。因为使用 TypeScript 进行开发，所以我们可以在开发的过程中得到非常完善的类型检查和错误提示，极大地方便我们开发中的调试工作。
指导意义
对于前端来说，通过 REST API 来获取后端数据往往是非常核心的开发工作，因为这直接影响着前端的数据显示与交互。使用 npm 包 vsts-rest-ts，在前端获取 VSTS 后端数据的过程中，通过 TypeScript 对接口进行封装，简化了数据调用的流程，同时通过类型检查，降低了代码耦合度和错误率，从而提高开发效率和代码可维护性。
当然，在使用 npm 包 vsts-rest-ts 的过程中，需要注意以下几点：
验证 Personal Access Token 的有效性。因为 PAT 可以访问 VSTS 的所有资源，因此必须保证其安全可靠。使用 npm 包 vsts-rest-ts 时，我们需要先申请自己专门的 PAT，并且检查它的有效性。
阅读官方文档。VSTS 提供了非常详细的 REST API 接口文档和 TypeScript 类型定义，我们在使用时可以多看官方文档，以便更深入地了解后端的数据结构和接口调用方式。
注意接口变更。VSTS REST API 可能会随着后端更新而进行调整，我们在使用 vsts-rest-ts 包时，需要注意检查相应的接口是否发生了变更，并及时做出相应的调整和升级。
总结
vsts-rest-ts 是一个非常方便的 npm 包，它将 VSTS 的 REST API 封装成了 TypeScript 类型，方便前端可以通过代码中的 TypeScript 类型定义，直接使用封装好的 REST API 接口。通过 npm 包 vsts-rest-ts，前端工程师可以在开发 VSTS 相关项目时，在获取后端数据的过程中变得更加方便和高效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600566be81e8991b448e30c2