重构Logger类后出现Property does not exist on type String报错且接口403

问题根因 #

1. 类型错误直接原因：你初始化metadata时将settings属性赋值为空字符串''，字符串类型不存在pivotal_token属性，因此编辑器抛出对应提示。
2. 静态方法误用：logInfo是类的静态方法，仅属于类本身，无法访问实例构造函数中存储的this.settings属性，你传入构造函数的配置完全没有被用到。
3. 传参不匹配：logInfo定义时仅接收1个data参数，调用时你传入了2个参数（配置、bug信息），第二个bugInfo参数未被接收，请求体数据异常。
4. 配置赋值时机错误：你在metadata.settings还未被赋值为包含pivotal_token的对象时，就提前将其传入构造函数、或者在静态方法中读取，导致最终请求头的token为空/无效，触发403。

修复方案 #

方案1：保留静态方法（无需实例化Logger） #

// 修正Logger类
class Logger {
  // 静态方法接收配置、上报数据两个参数
  static async logInfo(settings, data = {}) {
    console.log('Hello!')
    const url = 'https://sampleUrl'
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        "X-TrackerToken": `${settings.pivotal_token}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });
    return response.json();
  }
}

// 初始化metadata时，确保settings是对象类型，后续实际token赋值后覆盖即可
const metadata = {
  settings: {
    pivotal_token: '' // 这里不要初始化为空字符串，保持对象结构
  }
}

调用逻辑修正：

// 确保metadata.settings.pivotal_token已经赋值完成后再调用
Logger.logInfo(metadata.settings, bugInfo).then(res => console.log('print', res))

方案2：改为实例方法（复用全局Logger实例） #

// 修正Logger类
class Logger {
  constructor(settings) {
    this.settings = settings;
  }
  // 去掉static关键字改为实例方法，可访问this上存储的配置
  async logInfo(data = {}) {
    console.log('Hello!')
    const url = 'https://sampleUrl'
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        "X-TrackerToken": `${this.settings.pivotal_token}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });
    return response.json();
  }
}

const metadata = {
  settings: {
    pivotal_token: ''
  }
}
// 确保metadata.settings赋值完成后再实例化
const logger = new Logger(metadata.settings);

调用逻辑修正：

logger.logInfo(bugInfo).then(res => console.log('print', res))

排查验证步骤 #

• 修复后可在请求头配置前添加console.log打印token值，确认token不为空且格式正确
• 确认metadata.settings的赋值时机早于Logger实例化/logInfo调用时机
• 检查接口返回403时的请求头，确认X-TrackerToken字段值符合预期

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