Angular中实现C# [JsonPropertyName]属性映射功能的方案问询

一、等价于C# [JsonPropertyName]的字段映射实现 #

在Angular中，有两种常用方式实现字段名的映射转换，对应C#的[JsonPropertyName]特性功能。

1. 使用class-transformer库（推荐） #

这是最贴近C#特性写法的方案，借助第三方库提供的装饰器完成映射：
首先安装依赖：

npm install class-transformer

定义ChatHubInfo类，通过@Expose装饰器指定JSON中的下划线字段名：

import { Expose } from 'class-transformer';

export class ChatHubInfo {
  @Expose({ name: 'hub_url' })
  hubUrl: string;

  @Expose({ name: 'access_token' })
  accessToken: string;
}

反序列化时，用plainToClass方法将JSON对象转为类实例：

import { plainToClass } from 'class-transformer';
import { HttpClient } from '@angular/common/http';

this.http.get('/api/chat-hub-info').subscribe((apiResponse) => {
  const chatHubInfo = plainToClass(ChatHubInfo, apiResponse);
  // 此时chatHubInfo的hubUrl、accessToken已正确映射赋值
});

2. 手动映射（无额外依赖） #

如果不想引入第三方库，可以在类中编写静态转换方法，手动完成字段映射：

export class ChatHubInfo {
  hubUrl: string;
  accessToken: string;

  static fromJson(json: { hub_url: string; access_token: string }): ChatHubInfo {
    const info = new ChatHubInfo();
    info.hubUrl = json.hub_url;
    info.accessToken = json.access_token;
    return info;
  }
}

// 使用示例
this.http.get('/api/chat-hub-info').subscribe((apiResponse) => {
  const chatHubInfo = ChatHubInfo.fromJson(apiResponse);
});

二、是否可以直接使用下划线命名类属性？ #

完全可以。直接将类属性定义为下划线命名，就能和后端返回的JSON字段直接对应，无需任何映射逻辑：

export class ChatHubInfo {
  hub_url: string;
  access_token: string;
}

// 使用示例
this.http.get<ChatHubInfo>('/api/chat-hub-info').subscribe((chatHubInfo) => {
  // chatHubInfo的hub_url、access_token已直接对应JSON字段
});

两种写法的取舍 #

• 驼峰属性+映射：符合TypeScript/JavaScript主流编码规范，代码风格统一，但需要额外的映射逻辑或依赖。
• 下划线属性：实现简单无额外成本，但可能和项目编码规范冲突，需要团队提前统一约定。

内容的提问来源于stack exchange，提问作者Szyszka947