Typescript 模块导入对象文字

Question

编辑：我对这个问题的第一次迭代过于简化，导致我只允许导入整个对象，但不能访问任何属性。 我已经更新了这个以更准确地展示我的问题。 我还添加了我将在实际程序中使用的实际异步/等待。

我还在 json 中引入了错误来模拟我正在使用的容易出错的数据，以及一个 try/catch 块来跳过错误迭代，尽管这不应该改变我所期望的功能。

我想将 JSON 数据导入一个打字稿模块，执行一些操作，返回一个带有结果的对象文字，然后将该对象文字导入另一个文件以进行进一步的操作，并使用点表示法引用它，但是我只能访问导入后的对象 - 每次访问属性的尝试都以“未定义”结尾

我已经尽可能简化了操作以隔离问题，但找不到：

JSON数据：

{
    "THINGS":[
        {
            "name":"thing1",
            "color":"blue"
        },
        {
            "name":"thing2",
            "color":"red"
        },
        {
            "name":"thing3",
            "color":"orange"
        },
        {
            "name":"thing4",
            "color":"purple"
        },
        {
            "error": "error",
            "error2": "error"
        }
    ]
}

测试导入 JSON：

import rawdata from './rawdata.json' assert { type: "json" };

export async function test(){
    const data = rawdata.THINGS.map(async(Data)=>{
        let name = Data.name;
        let color = Data.color;
        let obj = {
            "name": name,
            "color": color
        }
        return obj
    });
    return(data)
};

// pass it to another function and do some stuff to it:

async function testImport(){
    let d = await test();
    let q = d.map((e) => {
        let p = (d.name + " wuz here")
        return p
    });
    console.log(q)
}
testImport();

/*
returns:
[
  'undefined wuz here',
  'undefined wuz here',
  'undefined wuz here',
  'undefined wuz here',
  'undefined wuz here'
]
*/

我不敢相信我在这么简单的过程中遇到了这么多麻烦，所以我不得不在 StackOverflow 上提问，因为我显然错过了模块和对象的一些关键基础知识。

Answer 1

这一行：

const data = rawdata.THINGS.map(async (Data) => {

创建一个 Promise 对象数组。 要解决该数组中的所有承诺，您需要使用：

return Promise.all(data)

现在，该函数返回一个解析为对象数组的单个 Promise，而不是每个解析为单个对象的 Promise 数组。

---

第二个问题在这里：

    let d = await test();
    let q = d.map((e) => {
        let p = (d.name + " wuz here")
        return p
    });

在map回调中，您访问d.name但d是数组，而不是项目。 您选择将每个项目分配给e但不在函数中使用该变量。 如果将其更改为e.name ，它将按预期工作：

["thing1 wuz here", "thing2 wuz here", "thing3 wuz here", "thing4 wuz here"]

这就是为什么，即使对于人为的示例代码，单字母变量名也不受欢迎。

如果您的代码是这样的：

let items = await test()
let mappedItems = items.map(item => {
  let description = items.name + " wuz here"
})

然后更容易告诉items.name正在访问数组上的name属性，这没有多大意义。

请参阅此处的工作示例。 只需展开右下角的“控制台”，您就会看到正确的输出。

---

原始答案

这一行：

const data = rawdata.THINGS.forEach((Data)=>{

将始终将data保留为undefined 。 这是因为array.forEach()返回undefined 。 所以我不确定你为什么认为这是返回值。

您可能想要使用array.map()返回一个填充了返回值的新数组。

export function test() {
  const data = rawdata.THINGS.map((Data) => {
    let name = Data.name;
    let color = Data.color;
    let info = {
      name: name,
      color: color
    };
    return info;
  });
  return data;
}

有关工作示例，请参阅此代码框：