Javascript 在angular 5中获得结果后,如何确保typescript接口属性为大写?
我有一个web api,它返回以下结果Javascript 在angular 5中获得结果后,如何确保typescript接口属性为大写?,javascript,angular,typescript,Javascript,Angular,Typescript,我有一个web api,它返回以下结果 { "customerContactID": 1, "customerID": 1, "firstName": "james", "lastName": "smithman", "primaryEmail": "james@gmail.comm", "primaryPhone": "8788494677", "isPrimaryContact": true } 我有一个angular 5应用程序,它将界面定义为 int
{
"customerContactID": 1,
"customerID": 1,
"firstName": "james",
"lastName": "smithman",
"primaryEmail": "james@gmail.comm",
"primaryPhone": "8788494677",
"isPrimaryContact": true
}
我有一个angular 5应用程序,它将界面定义为
interface CustomerContact {
CustomerContactID: number;
CustomerID: number;
FirstName: string;
LastName: string;
PrimaryEmail: string;
PrimaryPhone: string;
IsPrimaryContact: boolean;
}
并使用
this.http.get<CustomerContact>(url).subscribe(result => {
console.log("CustomerContact obtained");
console.log(result); // prints lowercase properties
this.customerContact = result;
}, error => console.error(error));
因为它会导致未定义。但是,我需要能够将变量值设置为从api结果获得的值,特别是result.CustomerID。
Typescript不允许我这样做
this.currentCustomer = result.customerID;
因为它会导致
TS2551: Property 'customerID' does not exist on type 'CustomerContact'. Did you mean 'CustomerID'?
如何在编译器[at loader]出错的情况下将变量的值设置为result.customerID的值
我根本无法更改API协定,而且,我的typescript接口的属性名必须为大写 更新1 正如下面提到的@pArth savadiya,看起来我可以做到这一点 虽然,我不确定是否有影响,如果有的话 我不相信这是一个复制品 因为这个问题有一个结果模型,它有大写的属性,这不是我在这里讨论的 更新2
经过仔细观察,我意识到这里的大问题是api响应属性大小写与angular/typescript大小写不匹配之间的不匹配。如果它们不一样,就会产生问题并迫使采取奇怪的解决办法。解决方案只是将接口外壳与响应外壳匹配,以满足此特定请求。就这么简单。谢谢大家 在您的界面中更改
CustomerID: number;
到
它将如您所期望的那样工作。在您的代码中,您将HTTP响应结果与您的typescript接口(CustomerContact)紧密耦合,而不是使用它
this.http.get(url).subscribe(结果=>{
console.log(“已获取CustomerContact”);
console.log(result);//打印小写属性
this.customerContact=结果;
},error=>console.error(error))代码>与JavaScript相比,TypeScript有助于明确选择类型,即代码的设计。您的问题实际上是角度应用程序的设计决策问题
考虑体系结构中的层有助于进行推理:WebApi、获取其数据的服务和UI组件不在同一层中
您可以决定为“CustomerContact”设置:
所有层中的类型相同:
- 此类型由WebApi定义,因此所有字段都是camelCase:
接口CustomerContact{customerContactID:number…}
,您可以执行http.get(url)
- 短期内价格便宜,但长期来看价格昂贵,因为WebApi签名中的任何更改都可能导致所有层中的多个文件发生大量更改李>
不同类型:
- WebApi方法返回一个:
接口CustomerContactDto{customerContactID:number…}
和http.get(url)
。如果要保持TypeScript提供的类型安全,请不要使用类型any
- 域层处理
CustomerContact
与您喜欢的任何字段,在您想要的任何情况下(camelCase,PascalCase,…),即使PascalCase
更像是一种C#约定而不是一种类型脚本约定
- 包含
http.get(url)
的服务将在这两种类型之间进行映射,以返回CustomerContact
,作为。此映射可以简单地逐字段完成:const customerContact=new customerContact();customerContact.CustomerContactID=result.CustomerContactID代码>
如上所述,我的typescript接口的属性名必须为大写。我不能改变惯例。还有什么?如果您记录了logresult.customerID,您得到的是什么?[TS2551:类型“CustomerContact”上不存在属性“customerID”。您的意思是“customerID”?]是错误,那么除了更改接口外,没有其他方法。如果你真的想确保类型安全。“我的typescript接口的属性名必须大写。”-为什么?Typescript是为了帮助您,您需要将其与您得到的结果相匹配。hi@zivweisman,我感谢您的提问。简单的回答是,如果我更改1属性只是为了克服这一情况,那么它将打破命名约定。属性名称的命名约定为大写。我能换一下吗?当然可以,但我还有什么其他选择呢?有一个约定可以让事情保持可预测性。如果你必须这样使用它,并且你想使用接口,那么我建议你构建一个接受和param1:any的帮助器通用函数,使用一些PascalCase转换器并输出你的接口对象。你可以这样尝试:this.currentCustomer=result[“customerID”];在开发过程中有很多相互冲突的约定,将那些仅仅是因为的约定与那些具有功能目的的约定分开是很重要的。在您的情况下,服务以大写形式输出字段,但出于某种原因,您希望javascript打破它自己的约定,使接口不区分大小写,以便您可以使用小写成员变量。我建议您遵循服务绑定,否则您最终会为所有内容编写一个转换器,并从一开始就破坏了框架的目的。尽管我不得不问,在这里使用的缺点是什么?我的理解是,耦合对于避免angularJS中出现的问题是一件好事,这就是打字脚本的目的,对吗?键入safety.updated我的问题包括这个,谢谢。我想在这种情况下,我将不得不放弃型号安全?
CustomerID: number;
customerID: number;