TypeScript 中如何使用 any 类型处理动态 API 返回的数据
在前端开发中，我们常常需要与后端 API 交互，从后端获取数据进行展示。但是，在实际开发中，不同的 API 接口返回的数据类型可能是不同的，甚至同一接口返回的数据类型也可能会随着接口数据的变化而变化。对于这种动态类型的数据，使用 TypeScript 的 any 类型可以提高代码的灵活性和可维护性。
- any 类型介绍
any 是 TypeScript 中的一个特殊数据类型，表示任何类型的值。当我们将一个变量的类型设置为 any 时，该变量可以存储任何类型的值，包括字符串、数字、对象、函数等，甚至可以调用任何方法和属性。
例如，如下代码中的变量 foo 的类型被设置为 any：
let foo: any = "hello world";
foo = 42;
foo = {
greeting: "hello"
};
foo = function() {
console.log("hello");
};上述代码中，变量 foo 先被赋值为字符串 "hello world"，后又被重新赋值为数字 42、对象 { greeting: "hello" } 和函数 function() { console.log("hello"); }，并均未报错。
虽然 any 可以存储任何类型的值，但也由此带来了一些问题。由于变量 foo 可以存储任何类型的值，TypeScript 编译器无法对 foo 的类型进行推断，也无法检测使用 foo 变量时是否存在类型错误，这给代码的可维护性带来了风险。
因此，任何时间使用 any 类型时，要尽可能少地使用它，并且要明确知道其用处及风险。
- 在动态 API 中使用 any 类型
当我们从动态 API 中获取数据时，数据类型可能会发生变化，我们无法预知 API 返回的数据类型是什么。例如，我们从一个电商网站的 API 获取订单数据，返回的数据可能是以下两种不同的格式之一：
-- -------------------- ---- -------
-
---------- ---------
------------- ------
----------- -
-
----- --
------- -------- ---
-------- -----
----------- -
--
-
----- --
------- -------- ---
-------- -----
----------- -
-
-
-或者
-- -------------------- ---- -------
-
---------- -------
------------- --------
----------- -
-
----- ----
------- -------- ---
-------- -----
----------- ---
--
-
----- ----
------- -------- ---
-------- -------
----------- -
-
-
-由于上述两种数据格式的差异，我们无法直接使用固定的类型来定义 API 返回的数据类型。若使用特定的类型来定义 API 返回的数据类型，则有可能会因为数据类型不匹配而导致运行时的错误。
因此，我们可以使用 any 类型来定义变量，以存储 API 返回的数据。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
--------- --------- -
-------- ------ - -------
----------- ------ - -------
--------- --------------
-
--------- ----------- -
--- ------ - -------
----- -------
------ ------ - -------
--------- ------ - -------
-
----- -------------- - ----- --------- ------- -- -
--- -
----- -------- - ----- --------------------------------
----- ---------- --------- - --------------
-- - --------- ----
- ----- ------- -
---------------------
-
--在上述代码中，我们使用了 any 类型来定义从 API 返回的数据。并且，我们还定义了 OrderData 和 ProductData 两个接口来表示 API 返回的数据类型的结构，以方便开发过程中的操作。
接下来，我们可以根据 API 返回的数据类型结构，使用类型断言（Type Assertion）将 any 类型转换为实际的类型。例如，我们可以使用 OrderData 接口中定义的字段和类型，对 any 类型的 orderData 进行类型断言，示例如下：
const handleOrderData = (orderData: any) => {
const _orderData = orderData as OrderData;
console.log(_orderData.orderId);
console.log(_orderData.totalPrice);
console.log(_orderData.products);
};利用类型断言，我们可以快速地对 API 返回的数据类型进行处理，并能够在运行时检测类型错误，使代码更加健壮和可维护。
- 总结
在动态 API 中使用 any 类型能够有效地处理不同数据类型的返回数据，提高了代码的灵活性和可维护性。但同时，使用 any 类型也带来了一些潜在的风险。在实际开发中，我们应该尽可能少地使用 any 类型，明确知道其用处及风险，以提高代码的健壮性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471c9b4968c7c53b0fa67f7