是否可能有一个与API返回的内容不同的Typescript接口？
是否可能有一个与API返回的内容不同的Typescript接口？
提问于 2018-10-13 00:18:55
我猜这是一种通用的编程问题，但是当涉及到AJAX类型的东西时，我基本上还是一个初学者。
因此，假设我正在使用一个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接口的好方法是什么？
回答 2
Stack Overflow用户
发布于 2018-10-13 01:05:19
一种解决方案是简单地将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
}))Stack Overflow用户
发布于 2018-10-13 03:33:35
另一种解决方案是使用JSON reviver function将某些键重新映射为更好的名称：
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"
}
]
}示例：Playground link
这种方法的一个可能的优点是，您可以解析一个大型的JSON数据树，并且无论键位于何处，都将被重新映射。
对于任何解决方案，请注意，JSON.parse()返回any，并且不能保证您的映射确实与您的接口匹配。您需要编写一个完整的反序列化程序，它会在意外或丢失的数据上抛出错误，以达到该级别的安全性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52783463
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号