Typescript 接口属性从驼峰大小写更改为 Pascal 大小写

Question

我在 Angular 1.4 中使用类型脚本，在 ASP.NET 5 应用程序中使用 RXJS。我有 extremly wiered 问题。在运行时，我所有的接口属性都从驼峰式外壳变成了 Pascal 外壳。为什么会发生这种情况以及如何避免这种情况？

请注意我正在使用 promises 从网络获取数据 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

Answer 1

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

查看这篇文章，将格式化程序配置为 return 驼峰式大小写。

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

Answer 2

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

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

并访问像 data.FirstName

这样的字段名称

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

Answer 3

这里是需要配置的地方

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

Typescript 接口属性从驼峰大小写更改为 Pascal 大小写

Typescript interface properties are changed to Pascal Case from camel Case

rxjs

angularjs

typescript