Typescript。 在嵌套的 object 中動態添加屬性

Question

是否可以將屬性動態添加到 Typescript 中的嵌套 object？ 因為我的 object 是動態的。 在一種情況下，我有 obj。

[
  {someObject},
  {
    prop1:1,
    columns: [
      components: [
        columns: [
          components:[
            {
              type: number,
              key: 'key1'
            },
            {
              type: textfield,
              key: 'key2'
            }
          ]
        ]
      ]
    ]
  }
]

例如，對於帶有鍵 key2 的 object，我需要添加一些標志。 在另一種情況下，我得到的 object 嵌套更少。 是否存在任何例如 lodash function 用於此操作，或者我必須通過遞歸迭代此 object？

Answer 1

您將不得不遞歸搜索。 值得慶幸的是，這並不難實現：

const findAndUpdate = ($obj, $key, $val) => {
  Object.keys($obj).includes($key) ? 
    $obj[$key] = $val
    : Object.values($obj).forEach($nestedObj => findAndUpdate($nestedObj, $key, $val));
  
  return $obj;
}

我使用Object.<method>而不是 lodash 方法，以便可以輕松地跨環境復制。 這個 function 將采用初始 object、您要更新的鍵和您要更新的值。

用法：

const foo = {
   b: {
      c: {
        d: 5
      }
   }
}

findAndUpdate(foo, "d", 56);
console.log(foo) // -> { b: { c: { d: 56 } } } }

它檢查密鑰是否存在於 object 的當前層中。 如果不是，那么我們為當前層中的每個 object 再次調用 function - 傳入原始 object 作為參考。 如果它確實在當前層中找到了一個鍵，那么它將更新參考指向的 object。 最終在堆棧被清除之后，我們返回我們原來更新的 object。 顯然，如果沒有找到與最初傳入的目標密鑰匹配的密鑰，那么 object 將保持不變。

如果您想要更多自定義，您可以更改 $val 以采用 function $func 代替：

const findAndUpdate = ($obj, $key, $func) => {
  Object.keys($obj).includes($key) ? 
    $obj[$key] = $func($obj[$key])
    : Object.values($obj).forEach($nestedObj => findAndUpdate($nestedObj, $key, $val));
  
  return $obj;
}

然后你現在可以做這樣的事情：

findAndUpdate(foo, "d", old => old+1 );
console.log(foo) // -> { b: { c: { d: 6 } } } }