TypeScript React中如何将PostView对象合规转换为Post类型对象

你当前的写法存在两个隐患：

• 使用any绕过了TypeScript的全链路类型校验，后续字段拼写错误、类型不匹配问题无法在编译阶段被捕获
• 直接修改props传入的原PostView对象，违反React单向数据流规则，可能导致组件出现不可预期的渲染异常

不需要使用any，也不需要做类型强转，最简洁安全的写法是通过对象解构创建新的请求对象，仅手动覆盖要求替换的replies字段即可：

// 解构剔除原对象里类型不匹配的replies字段，剩余字段直接透传
const { replies: _discard, ...baseFields } = props.myPostView;
const request: Post = {
  ...baseFields,
  replies: {} // 按函数入参要求传入空对象
};
functionToBeCalled(request);

写法说明 #

• 由于Post和PostView除replies字段外其余字段类型完全一致，解构得到的baseFields类型为Omit<PostView, 'replies'>，和Omit<Post, 'replies'>完全兼容，TypeScript会自动做类型校验
• 整个过程没有修改原props对象，不会产生副作用
• 全程没有使用any或as类型断言，所有字段的类型都受TS约束：如果后续两个接口的公共字段发生类型变更，编译阶段就会抛出错误，不会把问题带到运行时

不要使用const request = props.myPostView as Post这类强转写法，这种写法不会校验replies字段的实际类型，一旦后续逻辑调整漏传空对象，TS不会给出任何提示，会直接引发运行时错误。

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