可能具有不同於API返回值的Typescript接口？

Question

我想這是一個通用的編程問題，但是對於AJAX類型的東西，我基本上還是一個初學者。

假設我正在使用一個API，在這些API中，創建者並不在乎好好命名（或者至少不是我的方式命名），這樣響應看起來像這樣：

{
  data: [{
    sdt: '2018-10-12',
    firstnm: 'Stevo',
    pos: 'Assistant to the Manager'
  }]
}

但我希望我的界面使用camelCase約定具有更清晰的名稱，如下所示：

export interface IHiringData {
  startDate: string,
  firstName: string,
  position: string
}

這可能嗎？ 還是我堅持定義一個模仿API返回值的接口？ 如果可以使用所需的接口，將返回的數據映射到Typescript接口的一種好方法是什么？

Answer 1

一種解決方案是簡單地將JSON數據映射到與您的接口匹配的新對象。

export interface IHiringData {
  startDate: string
  firstName: string
  position: string
}

const json = {
  data: [{
    sdt: '2018-10-12',
    firstnm: 'Stevo',
    pos: 'Assistant to the Manager'
  }]
}

const hiringData: IHiringData[] = json.data.map(x => ({
  startDate: x.sdt,
  firstName: x.firstnm,
  position: x.pos
}))

Answer 2

另一個解決方案是使用JSON Reviver函數將某些鍵重新映射為更好的名稱：

interface Employees {
  data: Employee[];
}

interface Employee {
  startDate: string;
  firstName: string;
  position: string;
}

const json = `{
  "data": [{
    "sdt": "2018-10-12",
    "firstnm": "Stevo",
    "pos": "Assistant to the Manager"
  }]
}`

const remapKeys = {
  "sdt": "startDate",
  "firstnm": "firstName",
  "pos": "position"
}

function reviver(this: any, key: string, val: any) {
  if (key in remapKeys)
    this[remapKeys[key as keyof typeof remapKeys]] = val;
  else
    return val;
}

const obj: Employees  = JSON.parse(json, reviver);

結果：

{
  data: [
    {
      startDate: "2018-10-12",
      firstName: "Stevo",
      position: "Assistant to the Manager"
    }
  ]
}

示例： 游樂場鏈接

這種方法的一個可能優勢是，您可以解析一棵大的JSON數據樹，並且無論在何處找到鍵，鍵都將被重新映射。

對於任何解決方案，請注意JSON.parse()返回any並且不能保證您的映射實際上與您的接口匹配。 為了達到該安全級別，您需要編寫一個完整的反序列化程序，對意外或丟失的數據引發錯誤。