将 JSON 对象转换为特定类型

Question

我有一个 JSON 对象，其中包含一堆字符串...

{
    id: "1",
    amount: "57,000",
    title: "I am a test"
}

我怎样才能把它转换成这样的界面：

interface MyObj {
   id: number;
   amount: number;
   title: string;
}

我是否需要映射每个对象属性并尝试转换为必要的类型，或者我可以简单地尝试将 JSON 对象强制转换为类型？

为清楚起见，这里有一些附加信息。

我有一个上面示例对象的数组，JSON 所以...

[
{
    id: "1",
    amount: "57,000",
    title: "I am a test"
},
{
    id: "2",
    amount: "2347,000",
    title: "I am a test as well"
}
]

此 JSON 对象中的所有值都是字符串。每次我们在 TS 中使用对象时，我们都希望它们的类型是正确的。比如 id 和 amount 应该是数字，它们可以在存储到我们的 state 之前进行转换。

所以我想将上面数组中的JSON对象转换成特定的接口或类型。因为类型不匹配我不能只使用接口，我需要在实际与接口对齐之前进行一些转换或尝试转换为类型。这是一个问题，我如何映射数组中的 JSON 对象并将一些键从字符串转换为数字（可能？）。

Answer 1

我认为您正在尝试做的是通过解析 JSON 对象将 JSON 对象转换为 JavaScript 对象。

您可以如何执行此操作的示例如下：

const json = '{"result": true, "count": 42}';
const obj = JSON.parse(json);

然后您可以像访问常规对象一样访问新的 JavaScript 对象 obj。它将包含与 json 对象中完全相同的信息。

有关此方法的更多信息，请访问：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse https://www.w3schools.com/js/js_json_parse.asp

Answer 2

JSON.parse reviver

JSON.parse 可以采用可选的第二个参数，reviver 函数 -

如果指定了reviver，则解析计算的值在返回之前进行转换。具体来说，计算值及其所有属性（从最嵌套的属性开始并继续到原始值本身）分别通过reviver 运行。然后它被调用，包含正在处理的属性的对象作为 this，属性名称作为字符串，属性值作为参数。如果reviver 函数返回undefined（或不返回任何值，例如，如果执行落在函数末尾），则从对象中删除该属性。否则，该属性被重新定义为返回值。

function MyObject({ id, amount, title }) {
  this.id = id
  this.amount = amount
  this.title = title
}

function reviver(key, value) {
  if (value?.id && value?.amount && value?.title)
    return new MyObject(value)
  else
    return value
}

const json =
  `[{"id":"1","amount":"57,000","title":"I am a test"},{"id":"2","amount":"13,000","title":"I am also test"},{"id":"3","amount":"1,000","title":"I am a third test"},{"id":"4","amount":"200","something":"else"},1,"foo"]`

const data =
  JSON.parse(json, reviver)

for (const value of data)
  console.log(value)

MyObject { id: '1', amount: '57,000', title: 'I am a test' }
MyObject { id: '2', amount: '13,000', title: 'I am also test' }
MyObject { id: '3', amount: '1,000', title: 'I am a third test' }
{ id: '4', amount: '200', something: 'else' }
1
foo

做得更好

revive 以上是一个有点脆弱的函数。因此，建议您的 JSON.stringify'd 数据包含 type 字段或类似字段 -

[ { type: "MyObject", ... }, { type: "Another", ... }, "foo", 1, ... ]

现在我们可以用一种简单的方式写reviver -

function reviver(key, value) {
  switch (value?.type) {
    case "MyObject": return MyObject(value)
    case "OtherThing": return OtherThing(value)
    case "Another": return Another(value)
    default: return value                   // revive without modification
  }
}

Answer 3

TypeScript 只是一个开发/构建时工具；这意味着强制转换（例如使用as）在运行时没有任何效果，例如将字符串转换为数字。强制转换或使用 as 只是告诉 TypeScript 明确地将值视为特定类型的一种方式。如果你试过这个：

interface MyObj {
   id: number;
   amount: number;
   title: string;
}

const data = {
    id: "1",
    amount: "57,000",
    title: "I am a test"
};

const ofType = data as MyObj;

...TypeScript 将无法编译，因为data 与您的界面不兼容，因为类型不对齐。即使你强迫它：

const ofType = data as unknown as MyObj;

...id 和 amount 仍将是字符串，现在您已在应用程序中强加了一个错误。

TypeScript 可作为确保代码健全性的质量保证工具；它没有为数据转换带来任何好处。因此，就像纯 JavaScript 一样，如果您需要将事物从一种类型转换为另一种类型，则必须编写自定义代码。例如，如果您发布了一个已解析的 JSON 数组：

const converted: Array<MyObj> = data.map(item => ({
  id: parseInt(item.id),
  amount: parseInt(item.replace(/,/g, '')),
  title: item.title
}));

Answer 4

一个简单的演员就可以了。

看这里

var test = {
  name: ""
};

// umnown type will be 

console.log(test.name) // this is simple like test["name"].

// Now if you want it to a specific type then

interface Itest {
  name: string;
}

var myobj = test as Itest;
// or 

var myobj = < Itest > test;

// then the property will be a known property

console.log(myobj.name);

Answer 5

您所需要的是一个parseInt() 函数。

如下使用：

const obj = {
    id: "1",
    amount: "57,000",
    title: "I am a test"
};

print(parseInt(obj.amount))         <-    Number and not string

如果要确认变量的类型，可以使用typeof操作符，如下：

print(typeof parseInt(obj.amount))         

Answer 6

已编辑

我注意到给定的对象与interface MyObj不同

因此你不能做type assertion（不能使用as）。您必须将给定对象转换为您的类型！

那么你需要做什么 - 如果你知道给定的对象看起来像这样：

const data: any = {
    id: "1",
    amount: "57,000",
    title: "I am a test"
}

你应该这样做：

const myObj: MyObj = {
   id: parseInt(data['id']),
   amount: parseInt(data['amount'].replaceAll(',','')),
   title: data['title']
}

如果您不确定它看起来像 data，请考虑添加更多验证/默认值

例如，如果 data['id'] 未定义，则 Id 将为 NaN 如果 data['title'] 未定义，也许你应该添加默认值