toMerged

sourceが持つ値をtargetオブジェクトにマージします。

この関数は深いマージを実行し、ネストされたオブジェクトや配列も再帰的にマージされます。

• sourceとtargetのプロパティが両方ともオブジェクトまたは配列の場合、2つのオブジェクトと配列はマージされます。
• sourceのプロパティがundefinedの場合、targetのプロパティは上書きされません。

mergeとは異なり、この関数はtargetオブジェクトを変更しません。

インターフェース

function toMerged<T extends Record<PropertyKey, any>, S extends Record<PropertyKey, any>>(target: T, source: S): T & S;

パラメータ

• target (T): sourceオブジェクトのプロパティをマージする対象のオブジェクト。
• source (S): targetオブジェクトにプロパティをマージするオブジェクト。

戻り値

(T & S): sourceとtargetオブジェクトのプロパティがマージされた新しいオブジェクト

例

const target = { a: 1, b: { x: 1, y: 2 } };
const source = { b: { y: 3, z: 4 }, c: 5 };
const result = toMerged(target, source);
console.log(result);
// 戻り値: { a: 1, b: { x: 1, y: 3, z: 4 }, c: 5 }

const target = { a: [1, 2], b: { x: 1 } };
const source = { a: [3], b: { y: 2 } };
const result = toMerged(target, source);
console.log(result);
// 戻り値: { a: [3, 2], b: { x: 1, y: 2 } }

const target = { a: null };
const source = { a: [1, 2, 3] };
const result = toMerged(target, source);
console.log(result);
// 戻り値: { a: [1, 2, 3] }

デモ

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox