Incorrect work with Unions Types #23

Activity

1. SiarheiLazakovich

   added

   bugSomething isn't workingSomething isn't working

   on Jan 5, 2021
2. kripod commented on Jan 5, 2021

   

   kripod

   on Jan 5, 2021

   Owner

   More actions

   Thank you for your report!

   Please try specifying the union as follows and get back to me whether it works or not:

   interface ITestA {
     value: 'a';
     extra?: never; // Inspired by https://github.com/vercel/next.js/blob/51f2a530d623f4b50e71ce849e4276d2fea28211/packages/next/client/image.tsx#L63-L74
   }
   
   interface ITestB {
     value: 'b';
     extra: string;
   }
   
   type Test = ITestA | ITestB;
3. SiarheiLazakovich commented on Jan 6, 2021

   

   SiarheiLazakovich

   on Jan 6, 2021

   Last edited by SiarheiLazakovich

   Author

   More actions

   Thank you for your fast response)

   this workaround is not perfect:

   import React from 'react';
   import { Box } from 'react-polymorphic-box';
   
   interface ITestA {
     value: 'a';
     extra?: string;
   }
   
   interface ITestB {
     value: 'b';
     extra: string;
   }
   
   type Test = ITestA | ITestB;
   
   const Test: React.FC<Test> = (props) => {
     return <></>;
   };
   
   function App() {
     return (
       <>
         <Test value="b" />
         <Box as={Test} value="b" />
       </>
     );
   }

   

   I expect that "Box" has the same error.

   error:

   Type '{ value: "b"; }' is not assignable to type '(IntrinsicAttributes & ITestA & { children?: ReactNode; }) | (IntrinsicAttributes & ITestB & { children?: ReactNode; })'. Property 'extra' is missing in type '{ value: "b"; }' but required in type 'ITestB'.ts(2322)