用vue3+ts 写一个修改树形结构数据属性名

好的，下面是一个使用 Vue 3 和 TypeScript 编写的修改树形结构数据属性名的示例：

<template>
  <div>
    <pre>{{ JSON.stringify(renamedTreeData, null, 2) }}</pre>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

interface TreeData {
  id: number;
  name: string;
  children?: TreeData[];
}

interface KeyMap {
  [key: string]: string;
}

export default defineComponent({
  name: "RenameKeysDemo",
  setup() {
    const treeData: TreeData = {
      id: 1,
      name: "root",
      children: [
        {
          id: 2,
          name: "child1",
          children: [
            { id: 3, name: "grandchild1" },
            { id: 4, name: "grandchild2" },
          ],
        },
        {
          id: 5,
          name: "child2",
          children: [{ id: 6, name: "grandchild3" }],
        },
      ],
    };

    const keyMap: KeyMap = {
      id: "nodeId",
      name: "nodeName",
    };

    const renamedTreeData = reactive(renameKeys(treeData, keyMap));

    function renameKeys(treeData: TreeData, keyMap: KeyMap): TreeData {
      if (!treeData || typeof treeData !== "object") {
        return treeData;
      }
      if (Array.isArray(treeData)) {
        return treeData.map((item) => renameKeys(item, keyMap));
      }
      const result = {} as TreeData;
      Object.keys(treeData).forEach((key) => {
        const newKey = keyMap[key] || key;
        result[newKey] = renameKeys(treeData[key], keyMap);
      });
      return result;
    }

    return {
      renamedTreeData,
    };
  },
});
</script>

使用 `interface` 定义了 `TreeData` 和 `KeyMap` 类型。在 `setup` 函数中定义了 `treeData` 和 `keyMap` 变量，使用 `reactive` 将 `renamedTreeData` 变量变成响应式的对象。

然后定义了 `renameKeys` 函数，该函数与之前的示例代码基本一致，只是加入了 TypeScript 类型定义，可以更好地保证类型安全。

最后，在模板中使用 `JSON.stringify` 将 `renamedTreeData` 输出到页面上，方便查看修改后的结果。

注意：这个示例代码使用了 Vue 3 的 Composition API，如果你使用的是 Vue 2，可以将 `defineComponent` 换成 `Vue.extend`，将 `setup` 函数替换为 `data` 和 `methods`。同时需要安装 `@vue/composition-api` 包来使用 Composition API。