Type 'AppOneType | AppSecondType' is not assignable to type 'AppOneType'

Question

This is my current code structure:

interface AppOneType {
    ...
}

interface AppSecondType {
    ...
}

interface HomeType {
    data: AppOneType;
}

interface DashboardType {
    data: AppSecondType;
}

interface AppType {
   data: AppOneType | AppSecondType
}

const Home = (props: HomeType) => {
     return (
          <h1>{props.data.name}</h1>
     )
}

const Dashboard = (props: DashboardType) => {
     return (
          <h1>{props.data.name}</h1>
     )
}

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

Problem Statement: Type 'AppOneType | AppSecondType' is not assignable to type 'AppOneType'. Type 'AppSecondType' is missing the following properties from type 'AppOneType'

Can't use AppSecondType type in OR condition for data of HomeType, because of some dependencies. Please suggest any alternate solution for this problem?

Thanks in Advance.

Answer 1

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

Solved my problem by using Type Assertions with the data object.