在前端开发中，我们经常需要处理从后端返回的动态或匿名对象。这些对象的属性通常是动态的，因此我们无法将它们直接赋值给强类型声明的变量。但幸运的是，JavaScript 提供了一些方法可以将这些动态对象转换为强类型声明对象。
1. 使用类型断言
类型断言是指通过告诉编译器一个变量的实际类型来绕过编译器类型检查的方式。在 TypeScript 中，可以使用尖括号语法或 as 关键字来进行类型断言。
以下是一个使用 as 关键字进行类型断言的示例：
-- -------------------- ---- ------- --------- ---- - ----- ------- ---- ------- - ----- -------- --- - - ----- -------- ---- -- -- ----- ---- - ------- -- ----- -- ------ ----------------------- -- ----- ---------------------- -- --
在上面的代码中，我们先定义了一个接口 User 来表示用户对象的类型。然后创建了一个任意类型的 userObj 对象，并通过 as 关键字将其转换为 User 类型的对象。这样就可以直接访问 User 类型的属性了。
2. 使用 Object.assign 方法
Object.assign 方法是用于将所有可枚举属性的值从一个或多个源对象复制到目标对象的方法。利用这个方法，我们可以将动态对象的属性复制到一个强类型声明的对象中。
以下是一个使用 Object.assign 方法进行类型转换的示例：
-- -------------------- ---- ------- --------- ---- - ----- ------- ---- ------- - ----- -------- --- - - ----- -------- ---- -- -- ----- ---- - ----------------- -------- -- ----- -- ------ ----------------------- -- ----- ---------------------- -- --
在上面的代码中，我们创建了一个空的目标对象，并通过 Object.assign 方法将 userObj 对象的属性复制到目标对象中。然后再通过类型断言将其转换为 User 类型。
3. 使用 JSON.parse 和 JSON.stringify 方法
如果动态对象可以表示为 JSON 字符串，我们还可以使用 JSON.parse 和 JSON.stringify 方法将其转换为强类型声明对象。
以下是一个使用 JSON.parse 和 JSON.stringify 方法进行类型转换的示例：
-- -------------------- ---- ------- --------- ---- - ----- ------- ---- ------- - ----- -------- - -- ------- -------- ------ -- --- ----- ---- - -------------------- -- ----- -- ------ ----------------------- -- ----- ---------------------- -- --
在上面的代码中，我们创建了一个表示用户对象的 JSON 字符串，并通过 JSON.parse 方法将其转换为 JavaScript 对象。然后再通过类型断言将其转换为 User 类型。
总结
在前端开发中，我们经常需要处理从后端返回的动态或匿名对象。本文介绍了三种方法可以将这些动态对象转换为强类型声明对象，包括使用类型断言、Object.assign 方法和 JSON.parse 和 JSON.stringify 方法。这些方法都可以帮助我们更好地管理代码并减少潜在的错误。
示例代码：https://codepen.io/chatgpt/pen/vYyMpyK
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/606f22182d2a29a3c12035c8