Typescript对象内属性引用问题：如何复用environment构建URL

你遇到的问题本质是：对象字面量在初始化阶段，自身还未完成创建，无法直接引用内部属性。你尝试的几种写法都无效的原因：

• environment：当前作用域没有这个独立变量，自然找不到
• this.environment：对象字面量中的this指向外层上下文（比如全局对象或当前函数的this），并非正在创建的对象
• properties.environment：此时properties还未完成赋值，值为undefined，无法访问其属性

下面是几种可行的解决方法：

方法1：提前提取复用变量 #

把需要复用的environment先单独定义，再在对象中引用，同时用模板字符串简化拼接：

const environment = 'test1';
export const properties = {
  username: 'admin',
  password: 'pass',
  environment, // 等价于 environment: environment
  url: `http://${environment}.com`
};

方法2：分两步构建对象 #

先创建不含url的对象，等对象初始化完成后，再添加url属性：

export const properties = {
  username: 'admin',
  password: 'pass',
  environment: 'test1'
};
// 此时对象已创建完成，可正常访问自身属性
properties.url = `http://${properties.environment}.com`;

方法3：使用getter动态计算 #

通过get定义url，每次访问url时都会基于当前的environment值计算，好处是如果后续修改environment，url会自动更新：

export const properties = {
  username: 'admin',
  password: 'pass',
  environment: 'test1',
  get url() {
    return `http://${this.environment}.com`;
  }
};

// 示例：修改environment后，url会自动变化
properties.environment = 'prod';
console.log(properties.url); // 输出 http://prod.com

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