TypeScript联合类型报错：AppOneType|AppSecondType无法赋值给AppOneType求解决方案

以下是3种不修改原有HomeType、DashboardType类型定义的可行方案： #

方案1：使用类型断言（快速实现） #

如果可确保运行时传入Home的data一定是AppOneType类型、传入Dashboard的data一定是AppSecondType类型，可直接使用类型断言绕过类型校验：

const App = () => {
    return (
         <>
         <Home data={data as AppOneType} />
         <Dashboard data={data as AppSecondType} />
         </>
    );    
}

注意：该方案为强制类型转换，若运行时数据结构不符合预期会触发运行时报错，仅建议明确数据符合对应类型时使用。 #

方案2：类型守卫收窄类型（类型安全最优） #

先定义类型谓词函数做类型判断，再根据判断结果渲染对应组件，完全符合TypeScript类型规范，无额外运行时风险：

// 类型守卫：判断是否为AppOneType类型
function isAppOneType(data: AppOneType | AppSecondType): data is AppOneType {
  // 替换为AppOneType独有属性的判断逻辑
  return 'appOneUniqueProp' in data;
}
// 类型守卫：判断是否为AppSecondType类型
function isAppSecondType(data: AppOneType | AppSecondType): data is AppSecondType {
  // 替换为AppSecondType独有属性的判断逻辑
  return 'appSecondUniqueProp' in data;
}
const App = () => {
    return (
         <>
         {isAppOneType(data) && <Home data={data} />}
         {isAppSecondType(data) && <Dashboard data={data} />}
         </>
    );    
}

如果业务要求两个组件必须同时渲染，可结合类型断言使用，类型守卫可提前拦截类型不符的异常场景。 #

方案3：封装适配层组件（复用性最优） #

如果有多处场景需要做类似类型兼容，可封装适配层高阶组件，不需要改动原有组件的内部逻辑和类型定义：

// Home组件适配层
const HomeAdapter = (props: { data: AppOneType | AppSecondType }) => {
  return <Home data={props.data as AppOneType} />
}
// Dashboard组件适配层
const DashboardAdapter = (props: { data: AppOneType | AppSecondType }) => {
  return <Dashboard data={props.data as AppSecondType} />
}
const App = () => {
    return (
         <>
         <HomeAdapter data={data} />
         <DashboardAdapter data={data} />
         </>
    );    
}

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