如何避免初始化嵌套对象，直接在运行时创建对象属性？

我有一个可选参数的场景，想在运行时给对象动态创建属性，不想先执行data.assets = {}再给name赋值。请问当data.assets未定义时，有没有更简便的方式实现data.assets.name = 'John';？

对应的代码示例：

// Typescript
export interface Data {
  assets?: {
    name: string
  }
}

const data = {foo: 'bar'};
data.assets.name = 'John'; // TypeScript会提示assets可能为undefined，编译后JS运行报错

// 编译后的Javascript代码
const data = {foo: 'bar'};
data.assets.name = 'John'; // 报错：Cannot set properties of undefined (setting 'name')
console.log(data);

可行解决方案 #

方法1：逻辑或赋值（||=）直接初始化 #

通过||=运算符，当data.assets为undefined或假值时，自动初始化一个空对象，随后直接给name赋值：

const data = {foo: 'bar'};
(data.assets ||= {}).name = 'John';
console.log(data); // 输出：{ foo: 'bar', assets: { name: 'John' } }

在TypeScript中，该写法完全兼容Data接口的类型定义：

const data: Data = {foo: 'bar'};
(data.assets ||= {}).name = 'John';

方法2：空值合并运算符（??）提前确保属性存在 #

如果需要后续给assets添加多个属性，这种写法更直观，先判断并初始化assets，再进行属性赋值：

const data = {foo: 'bar'};
data.assets = data.assets ?? {};
data.assets.name = 'John';
// 后续还可以继续添加其他属性，比如 data.assets.age = 25;

方法3：非空断言（谨慎使用） #

仅当你能绝对保证data.assets会在运行时被初始化时，才用非空断言!跳过TypeScript的类型检查。注意：这只是类型层面的处理，运行时assets未定义的话依然会报错，不推荐在不确定场景使用：

const data: Data = {foo: 'bar'};
data.assets!.name = 'John'; // 编译通过，但运行时无assets仍会报错

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