Javascript 是否可能有一个不同于API返回的类型脚本接口?

Javascript 是否可能有一个不同于API返回的类型脚本接口?,javascript,typescript,api,model,Javascript,Typescript,Api,Model,我想这是一个一般的编程问题,但对于AJAX类型的东西,我基本上还是一个初学者 假设我正在使用一个API,在这个API中,创建者并不关心如何很好地命名东西(或者至少不关心我的命名方式),因此响应如下所示: { data: [{ sdt: '2018-10-12', firstnm: 'Stevo', pos: 'Assistant to the Manager' }] } 但我希望我的界面使用camelCase约定有更清晰的名称,如下所示: export inte

我想这是一个一般的编程问题,但对于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接口的好方法是什么?

一个解决方案是简单地将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
}))

一种解决方案是简单地将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
}))

另一种解决方案是使用将某些键重新映射到更好的名称:

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
,并不保证映射与接口实际匹配。您需要编写一个完整的反序列化程序,在意外或丢失的数据上抛出错误,以达到该安全级别。

另一种解决方案是使用将某些键重新映射到更好的名称:

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
,并不保证映射与接口实际匹配。您需要编写一个完整的反序列化程序,在意外或丢失的数据上抛出错误,以达到该安全级别。

这似乎更规范,但Revivier函数显然不容易(对我来说)推理或理解它的作用,但它看起来确实像它的用途,也许只是需要一些糖。这似乎更符合规范,但复活器的功能当然不容易(对我来说)解释出来或理解它在做什么,但它确实看起来像是为什么而做的,也许只是需要一些糖。很好,很简单,我喜欢它。谢谢为什么不选择它作为最佳答案呢?很好,很简单,我喜欢。谢谢为什么不选择它作为最佳答案呢?