合并对象在 Typescript 中的实现与应用_typescript 对象合并

link之家
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
1、函数实现

首先，我们来看一下深度合并（Deep Merge）函数的代码实现。
import { isObject } from '@/utils/is'
 * 深度合并
 * @param src 源对象
 * @param target 目标对象
export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
  let key: string
  for (key in target) {
    src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key])
  return src as T
 isObject 代码 
export function isObject(val: any): val is Record<any, any> {
  return val !== null && is(val, 'Object')
2、参数说明
 
src: 源对象，即要被合并到的对象。
target: 目标对象，即从中获取数据来合并到src的对象。 
3、返回值
 
函数返回一个类型为T的新对象，这个新对象是src和target对象的深度合并结果。 
三、使用示例
 
假设你有两个对象，一个是person，另一个是info： 
const person = {
  name: '张三',
  age: 30,
  address: {
    city: '北京',
    country: '中国'
const info = {
  job: '工程师',
  address: {
    street: '科技路'
使用deepMerge函数，你可以这样合并这两个对象： 
import { deepMerge } from '@/path-to-deepMerge'
const mergedPerson = deepMerge(person, info)
console.log(mergedPerson)
输出结果： 
  name: '张三',
  age: 30,
  job: '工程师',
  address: {
    city: '北京',
    country: '中国',
    street: '科技路'
四、实际应用场景
 
深度合并对象在许多场景下都非常有用： 
配置合并：当你有多个配置对象需要合并时。
状态管理：在使用如 Vuex 或者 Redux 这样的状态管理库时。
API响应合并：当你从多个API接口获取数据并需要合并到一个对象时。 
五、拓展：使用 lodash-es 的 assign 函数进行对象合并
 
lodash-es是一个提供了很多有用工具函数的JavaScript库。其中，assign函数用于将一个或多个源对象自身的可枚举属性从一个对象复制到目标对象。本文将详细介绍如何使用lodash-es中的assign函数进行对象合并。 
2、安装与导入
 
首先，你需要安装lodash-es。 
npm install lodash-es --save
然后，在你的代码中导入assign函数。 
import { assign } from 'lodash-es';
3、基础用法
 
assign函数接受一个目标对象和一个或多个源对象作为参数，并将源对象的属性复制到目标对象中。 
const object = { 'a': 1 };
const source = { 'b': 2 };
const result = assign(object, source);
console.log(result);
// 输出: { 'a': 1, 'b': 2 }
// 注意：目标对象也被改变了
console.log(object);
// 输出: { 'a': 1, 'b': 2 }
4、注意事项
 
assign仅复制对象自身的可枚举属性。
它不会进行深度合并。
如果多个源对象有相同的属性，那么后面的源对象会覆盖前面的。 
const object = { 'a': 1, 'b': 2 };
const source1 = { 'b': 3, 'c': 4 };
const source2 = { 'c': 5 };
const result = assign(object, source1, source2);
console.log(result);
// 输出: { 'a': 1, 'b': 3, 'c': 5 }
                                    thru.js
 一个不受争议的项目生成器，用于模型驱动的开发。
 只需用项目值填充JSON文件，构建代表项目模型的文件树，然后将'.thru.js'后缀添加到要动态创建的文件名中。 在这些文件（“通文件”）中，编写代码以应用项目值。
如何..？
 每个直通文件应使用一种或多种方法导出对象。 每个方法都接收解析的JSON，并且可以返回带有content属性的对象，该属性包含文件内容作为字符串。
 将树中每个文件的内容合并并写入到生成的树中的等效文件中，并删除后缀“ .thru.js”。
 返回对象上的forNext属性可用于将数据传递到同一文件中的更高版本的方法。 返回对象上的所有其他属性都放在store对象上，该store对象可用于以后的方法和以后的文件。 forNext和store对象是每个方法的第二个和第三个参数。
 在目标文件树构建之后，放置在store对象中且其关键字为
xtal-json-merge和xtal-insert-json将预定义的json与一些动态json合并。 xtal-json-merge扩展了xtal-insert-json。 它们提供与Polymer 2/3兼容的绑定支持，但也可以在非Polymer设置中使用。 在环境中使用它们似乎更为自然-服务器驱动的体系结构或面向HTML模板的组件/ Web应用程序（例如VueJS，Polymer，Aurelia，Svelte，Angular）。 如果在以代码为中心JavaScript渲染函数中发现可能会引起过敏React，例如（P）React / LitHTML / HyperHTML / SkateJS / StencilJS等中发现的那些。
 对于使用html标记作为演示特定类型组件功能的主要方式的演示页，这两个组件也很有用，我们将在下面对其进行分类。
                                    交叉类型是将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。联合类型表示一个值可以是几种类型之一。就是说这个类型的对象同时拥有了这三种类型的成员。）分隔每个类型，所以。
                                    这玩意利用了 union type 在 conditional type 中的 distributive 的特性，将 union 在第一个 condition 中 map 到多个具有单独类型参数 function，然后再 infer 到函数的参数上，就从 union 变成了 intersection。对上面这个合并的函数来说，我们要求他的参数类型一定是同时满足 union 中所有函数的参数类型的，所以一定是取交。函数中的参数，在上面的例子中，这个函数实际上是将 union 中的两个函数合在了一起。
_.assign(object, [sources])
分配来源对象的可枚举属性到目标对象上。 来源对象的应用规则是从左到右，随后的下一个对象的属性会覆盖上一个对象的属性。
_.merge(object, [sources])
该方法类似 _.assign， 除了它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在，被解析为undefined...
TypeScript中有些独特的概念可以在类型层面上描述JavaScript对象的模型。 这其中尤其独特的一个例子是“声明合并”的概念。 理解了这个概念，将有助于操作现有的JavaScript代码。 同时，也会有助于理解更多高级抽象的概念。
对本文件来讲，“声明合并”是指编译器将针对同一个名字的两个独立声明合并为单一声明。 合并后的声明同时拥有原先两个声明的特性。 任何数量的声明都可被合并；...
                                    此外，还有很多在线教程和博客文章可以帮助你更好地理解和使用交叉类型。教程： 如果你想更深入地了解交叉类型，我建议你阅读Typescript官方文档中有关交叉类型的章节，里面包含了更多详细的说明和示例。交叉类型是Typescript中一种非常有用的类型操作符，它允许我们将多个类型合并为一个新的类型。使用方式： 交叉类型使用"&"符号来表示，将两个或多个类型进行合并。，分别表示一个人和一个员工的信息。我们可以使用交叉类型将它们合并成一个新的类型。类型的属性（name和age），也有。
相信读过上篇文章TS模块后，大家对TS的模块机制有了一定的了解，那么本篇文章将给大家介绍重名模块或者类型的声明合并以及使用方式
我们第一次接触到类似的概念是来源于函数这篇文章，其中函数的重载就是声明合并
TS中的声明合并包含接口，类型别名，函数重载，命名空间，枚举，命名空间和类，类的合并。接下来我会深入介绍这几种合并方式