React+TypeScript：如何简洁定义带扩展类型的useState对象

方案1：简化箭头函数，移除冗余中间变量 #

直接在useState的初始化逻辑里展开子状态并补充属性，借助TypeScript的自动类型推断省去不必要的类型声明，代码更紧凑：

const [state, setState] = useState<IStateType>(() => ({
  ...getEmptyStateSubType(),
  foo: bar
}));

用括号包裹返回的对象是为了避免箭头函数语法歧义，TypeScript会自动识别getEmptyStateSubType()返回的IStateSubType与补充的foo属性组合后完全符合IStateType结构，无需额外声明变量类型和返回值类型。

方案2：封装IStateType专属初始化函数（适合多场景复用） #

如果IStateType的初始化逻辑需要在多个组件中使用，直接抽离成顶层初始化函数，把复用逻辑集中维护：

// 封装初始化函数
function getEmptyStateType(foo: typeof bar): IStateType {
  return {
    ...getEmptyStateSubType(),
    foo
  };
}

// 组件内调用
const [state, setState] = useState<IStateType>(() => getEmptyStateType(bar));

这种方式让组件内的调用代码极度简洁，后续修改IStateType结构时，只需调整这个初始化函数即可，避免多处修改的冗余。

方案3：类型断言兜底（仅类型推断失效时使用） #

如果遇到复杂场景导致TypeScript无法自动推断类型，可以用类型断言快速解决，但不推荐作为常规方案，会削弱类型检查的安全性：

const [state, setState] = useState<IStateType>(() => 
  ({ ...getEmptyStateSubType(), foo: bar } as IStateType)
);

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