Typescript 接口属性由 camel Case 改为 Pascal Case

Posted 2023-03-13

【中文标题】Typescript 接口属性由 camel Case 改为 Pascal Case

【英文标题】：Typescript interface properties are changed to Pascal Case from camel Case

【发布时间】：2016-04-29 17:03:48

【问题描述】：

我在 ASP.NET 5 应用程序中使用带有类型脚本的 Angular 1.4 和 RXJS。我有一个非常奇怪的问题。在运行时，我所有的界面属性都从骆驼套管转换为 Pascal 套管。为什么会发生这种情况以及如何避免这种情况？

请注意，我正在使用 Promise 从 web api 获取数据，像这样调用

public GetDataFromAPI(request: Messages.IRequest): Observable<Messages.IResponse> 
    let result: IPromise<Messages.IResponse>;
    result = this.$http.post("http://api.domain.com/GetData", request).then(
        (response: ng.IHttpPromiseCallbackArg<Messages.IResponse>) => 
            return response.data;
        
    ); 
 return Observable.fromPromise(result).retry(3);

这是我定义接口的方式

export interface IResponse

     firstName : string;
     lastName : string;
     age : number

当我取回数据时，它的属性具有像这样的 CamelCasing 使它们可以访问。

response.data.FirstName
response.data.LastName
response.data.Age

【问题讨论】：

后端必须返回带有这种情况的字段的对象。检查您在开发工具的网络选项卡中获得的内容。

它返回一个带有字段的对象，但所有字段名称都是驼峰式，这意味着如果我尝试在代码中的任何地方访问 data.firstName 它将是未定义的，但如果我写 data.FirstName 它有效（我不想这样做，因为在这种情况下打字稿编译器会抛出错误）

好吧，如果您的后端返回的对象带有一个名为 FirstName 的字段，那么没有什么能神奇地将这个字段转换为 firstName。在后端和前端采用并遵守约定。

【参考方案1】：

如果您的后端是 WebApi，默认情况下，正常的 Json 序列化会将字段保留在您的 c# 或 vb.net 外壳中。

看这篇文章配置格式化器返回驼峰大小写。

http://richarddingwall.name/2012/03/10/returning-camelcase-json-from-asp-net-web-api/

【参考方案2】：

很可能服务器使用 PascalCasing，而您定义的接口与服务器返回的数据不匹配。 TypeScript 不会将成员名称从 PascalCase 转换为 camelCase，您必须编写自己的逻辑。它也不会在运行时抛出错误，因为接口会被删除。我建议你打破 TypeScript 部分的命名约定，使用 PascalCase 字段，这样接口将完全匹配数据传输对象。所以像这样定义接口：

export interface IResponse 
    FirstName : string;
    LastName : string;
    Age : number;

并访问像data.FirstName这样的字段名称

另一种方法是按照 Cleverguy25 的建议更改服务器实现。

【讨论】：

您当然可以进行此更改，但其他 javascript 程序员会想知道您为什么违反约定 :-(

@Cleverguy25 这总是一个艰难的决定。在某些情况下，您甚至不允许更改服务器代码，因此您会遇到这种情况。在其他情况下，这只是口味问题。

【参考方案3】：

这里是需要配置的东西

HttpConfiguration config = new HttpConfiguration();
var jsonFormatter = config.Formatters.OfType<JsonMediaTypeFormatter>().First();
jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
jsonFormatter.SerializerSettings.Formatting = Formatting.Indented;