在现代的前端开发中，数据的格式化和处理是必不可少的。而 TypeScript 的类型安全 能力更加强大。因此，若能将 TypeScript 的强大功能与数据处理结合，就可以实现更高效、更精确的数据处理。npm 包 typescript-deserializer 就是这样一款将 TypeScript 的类型系统应用到数据处理中的工具。
什么是 typescript-deserializer
typescript-deserializer 是一个 JS 包，它提供了一个通用的反序列化函数，将 JSON 数据转化为 TypeScript 类的实例。 TypeScript 类充分利用了其类型系统，因此类型安全更高、可维护性更好。
typescript-deserializer 基本使用
在使用 typescript-deserializer 时，我们需要定义一个 TypeScript 类来表示数据，该类需要继承 JsonDeserialization 枚举类并实现 fromJSON 方法。
假定我们有以下代码：
-- -------------------- ---- -------
---- -------- -
----- - --------
------ - --------
-
----- ---- -
---- -------
------ -------
------- -------
---------- ---------
------ -------------- ----- ---- -
----- --- - --- -------
------ - --------
-------- - ----------
--------- - -----------
------------ - ------------- -- ---------
------ ----
-
-
----- ------- -
---- -------
-------- -------
--------- -------
------ -----
------ -------------- ----- ------- -
----- --- - --- ----------
------ - --------
---------- - ------------
----------- - -------------
-------- - -------------------------
------ ----
-
-我们可以使用 typescript-deserializer 将 JSON 数据转化为 TypeScript 实例。假如我们有以下 JSON 数据：
-- -------------------- ---- -------
-
----- --
--------- --
---------- ------
------- -
----- --
------- -----
-------- -----------------------
----------- -------
-
-我们可以使用以下代码将其转化为 TypeScript 类实例：
-- -------------------- ---- -------
------ - ----------- - ---- --------------------------
----- ----------- - -
----- --
--------- --
---------- ------
------- -
----- --
------- -----
-------- -----------------------
----------- -------
-
--
----- -------- ------- - ------------------------ ---------
------------------ -------- ---------输出的结果为：
-- -------------------- ---- -------
------ ------- -
-------- ------
--- --
----- ------ ---- -
------ -----------------------
--- --
----- -----
--------- -------
--
------- -
-深度使用 typescript-deserializer
在使用 typescript-deserializer 时，我们也可以使用各种数据类型。
数组
在处理数组时，我们需要使用方法 Array.from 来实例化数组。
-- -------------------- ---- -------
----- ----------- -
---------- ----------
--------------------- ---------- -
------------- - ---------
-
------ -------------- ----- ----------- -
----- -------- - ------------------------- ------------------
------ --- ----------------------
-
-
----- --------------- - -
--------- -
-
----- --
--------- --
---------- ------
------- -
----- --
------- -----
-------- -----------------------
----------- -------
-
-
-
--
----- ------------ ----------- - ---------------------------- -------------
------------------ ------------ -------------输出结果为：
-- -------------------- ---- -------
------ ----------- -
--------- -
------ ------- -
-------- ------
--- --
----- ------ ---- -
------ -----------------------
--- --
----- -----
--------- -------
--
------- -
-
-
-Set 和 Map
在处理 Set 和 Map 时，我们需要使用方法 Array.from 来转换其中的值。
-- -------------------- ---- -------
----- ---------- -
---------- -------------
--------------------- ------------- -
------------- - ---------
-
------ -------------- ----- ---------- -
----- -------- - --- ----------------------------- -------------------
------ --- ---------------------
-
-
----- -------------- - -
--------- -
-
----- --
--------- --
---------- ------
------- -
----- --
------- -----
-------- -----------------------
----------- -------
-
-
-
-
----- ----------- ---------- - --------------------------- ------------
------------------ ----------- ------------输出结果为：
-- -------------------- ---- -------
------ ---------- -
--------- --- -
------ ------- -
-------- ------
--- --
----- ------ ---- -
------ -----------------------
--- --
----- -----
--------- -------
--
------- -
-
-
-复杂类型
在处理复杂类型时，我们可以使用以下示例代码。
-- -------------------- ---- -------
---- ---------- -
----- - --------
------ - --------
-
----- ------ -
---- -------
------ -------
------- -------
---------- -----------
------ -------------- ----- ------ -
----- --- - --- ---------
------ - --------
-------- - ----------
--------- - -----------
------------ - ------------- -- -----------
------ ----
-
-
----- ------- -
---- -------
------- -------
--------- -------
-------- -------
------ ---------
---------- ----------
------ -------------- ----- ------- -
----- --- - --- ----------
------ - --------
--------- - -----------
----------- - -------------
---------- - -----------------------------
-------- - ----------
------------ - ------------------------- ------------------
------ ----
-
-
----- ---------- -
---------- ----------- ---------
--------------------- ----------- --------- -
------------- - ---------
-
------ -------------- ----- ---------- -
----- -------- - --- ----
---------------------------- -- - ---- -------- --- -------------- -- -
----- ---- ------------ - ------
------ ---- -------------------------------
--
--
------ --- ---------------------
-
-
----- -------------- - -
--------- -
---- -
----- --
-------- ------
---------- --------
--------- -
----- --
------- -----
-------- -----------------------
----------- -------
--
------- ------- -------
----------- -
-
----- --
--------- --
---------- ------
------- -
----- --
------- -----
-------- -----------------------
----------- -------
--
-
-
-
-
--
----- ----------- ---------- - --------------------------- ------------
------------------ ----------- ------------输出结果为：
-- -------------------- ---- -------
------ ---------- -
--------- --- -
--- -- ------ ------- -
------- ------ ------ -
------ -----------------------
--- --
----- -----
--------- -------
--
--------- -
------ ------- -
-------- ------
--- --
----- ------ ---- -
------ -----------------------
--- --
----- -----
--------- -------
--
------- -
-
--
-------- --------
--- --
----- - ------ ----- --
------ -----
-
-
-结论
typescript-deserializer 是一个非常有用的数据类型处理工具，它充分利用了 TypeScript 强大的类型系统，提高了数据处理的类型安全性、可维护性和性能。希望本篇文章能够帮助读者更好地理解和使用 typescript-deserializer。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac669f7