Multiple types in a single PageData object not being passed through DataHandler

[Uncle798]

I create an object via combining multiple types and when I do each $rows as row only the last type is passed through, from my +page.server.ts:

export const load:PageServerLoad = (async () => {
   const form = await superValidate(zod(availableUnitsSchema));
   const unitPricing = await prisma.unitPricing.findMany({
      orderBy: {
         unitNum: 'asc'
      }
   });
   const units = await prisma.unit.findMany({
      orderBy: {
         num:'asc'
      }
   })
   const leases = await prisma.lease.findMany({
      where:{
         leaseEnded: null,
      },
      orderBy:{
         unitNum: 'asc'
      }
   })
   const availableUnits:UnitPricing[] & Unit[] & {sizeDescription:string}[] =[];
   unitPricing.forEach((unitPrice)=> {
      const unitLease = leases.find((lease) => lease.unitNum === unitPrice.unitNum);  
      const unitInfo = units.find((u)=> u.num === unitPrice.unitNum);
      if(!unitLease){
         const availableUnit = { ... unitInfo, ...unitPrice};
            availableUnits.push(availableUnit);
      }
   })
   return { form, availableUnits };
})

From my +page.svelte:

   export let data:PageData;
   const handler = new DataHandler(data.availableUnits, { rowsPerPage: 50})
   const rows = handler.getRows(); 
...
      {#each $rows as row}
         <tr>
            <td>{row.unitNum.replace(/^0+/gm,'')}</td>
            <td>{row.size.replace(/^0+/gm,'')}</td>
            <td>${row.price}</td>
         </tr>
      {/each}

I'm getting an error in VSCode that the only Property that exists on row is sizeDescription. The properties are displaying in the table but VSCode is mad.