TypeScript标识符无法以数字开头，Angular2项目API字段访问求助

嘿，作为刚接触TS/JS的开发者，碰到这种字段名的问题确实容易懵，我来给你几个实用的解决办法：

方法1：直接使用方括号访问属性 #

这是最直接的解决方案，因为当属性名不符合JS/TS标识符规则（比如以数字开头、包含特殊字符）时，方括号语法可以完美处理。你只需要把属性名作为字符串放在方括号里就行：

// 假设你已经通过HTTP请求获取到了ticker数组
const tickers = await this.http.get('https://api.coinmarketcap.com/v1/ticker/').toPromise();

tickers.forEach(ticker => {
  // 用方括号访问以数字开头的字段
  const dailyVolume = ticker["24h_volume_usd"];
  console.log(`${ticker.name} 24小时交易量：${dailyVolume} USD`);
});

方法2：定义带字符串字面量的TypeScript接口 #

如果你想获得TypeScript的类型提示和类型检查，可以给返回的数据定义一个接口，把特殊字段名用引号包裹起来：

// 定义符合API返回结构的接口
interface CryptoTicker {
  id: string;
  name: string;
  symbol: string;
  rank: string;
  price_usd: string;
  "24h_volume_usd": string; // 用引号包裹特殊属性名
  price_btc: string;
  // 其他需要的属性...
}

// 在请求时指定接口类型
this.http.get<CryptoTicker[]>('https://api.coinmarketcap.com/v1/ticker/')
  .subscribe(tickers => {
    tickers.forEach(ticker => {
      // 依然用方括号访问，但此时TS会提供类型提示
      const volume = ticker["24h_volume_usd"];
      // 这里volume会被TS识别为string类型，避免类型错误
    });
  });

方法3：映射字段为合法标识符 #

如果觉得每次写方括号麻烦，你可以在获取数据后，把特殊字段映射成一个符合标识符规则的别名，这样后续就能用更直观的点语法访问：

this.http.get<any[]>('https://api.coinmarketcap.com/v1/ticker/')
  .subscribe(rawTickers => {
    // 映射原数据，给特殊字段起别名
    const formattedTickers = rawTickers.map(ticker => ({
      ...ticker, // 保留原有的所有属性
      volume24hUsd: ticker["24h_volume_usd"] // 新增合法的别名属性
    }));

    // 现在可以用点语法访问啦
    console.log(formattedTickers[0].name + "的24h交易量：" + formattedTickers[0].volume24hUsd);
  });

为什么会出现这个问题？ #

简单来说，JS/TS的标识符（比如变量名、属性名）不能以数字开头，所以obj.24h_volume_usd这种写法会直接触发语法错误。而方括号语法允许传入任意字符串作为属性名，不受标识符规则限制，因此能正常访问这类特殊字段。

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