TypeScript解构含undefined的属性并设默认值，如何获取Partial<Foo>？

先看场景代码：

interface Foo {
  x: number;
  y: number;
}

interface Bar {
  foo: Foo | undefined;
}

declare const useBar: () => Bar;

const f = () => {
  const { foo } = useBar();

  // 目前只能用 foo?.x、foo?.y 访问属性，属性多的时候很繁琐
}

尝试用JS里的默认值写法const { foo = {} } = useBar();时，TypeScript会报错：Property 'x' does not exist on type '{}'——这是因为TS把默认值{}推断为空对象类型，而非Partial<Foo>，所以不认可foo.x这类属性访问。嵌套解构的方式（const { foo: { x, y } = {} } = useBar();）虽然能绕开错误，但需要逐个重命名属性，属性多的时候完全不实用。

下面提供几种可行的解决办法：

方法1：类型断言直接标注 #

给默认值{}加上Partial<Foo>的类型断言，直接告诉TS这个默认值符合Partial<Foo>的结构：

const { foo = {} as Partial<Foo> } = useBar();

// 现在可以直接访问 foo.x、foo.y，类型自动推断为 number | undefined
foo.x; // 无类型报错

方法2：工具函数封装（适合复用场景） #

如果需要多次处理类似的解构逻辑，可以写一个通用工具函数来返回带类型的空对象：

function emptyPartial<T>(): Partial<T> {
  return {};
}

// 使用时直接调用工具函数作为默认值
const { foo = emptyPartial<Foo>() } = useBar();

这种方式不需要手动写断言，TS会自动推断foo的类型为Partial<Foo>，代码更干净。

方法3：先解构再合并默认值 #

如果不想在解构语句里做类型处理，可以先拿到完整的bar对象，再用空值合并运算符??给foo设置默认值并标注类型：

const bar = useBar();
const foo = bar.foo ?? {} as Partial<Foo>;

这种写法逻辑更直白，同样能让foo的类型变为Partial<Foo>。

本质上，这几种方法都是通过TypeScript的类型系统明确默认值的结构，让TS认可foo的属性访问是安全的，从而避免频繁使用可选链操作符。

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