convert props from javascript to typescript in react

Question

I have converted these react components from Javascript:

    function A = ({prop1, prop2...}) => {}
A.name = "name";
    function B = ({prop1, prop2...}) => {}
B.last = "last";
    function C = ({prop1, prop2...}) => {}
C.A = A;
C.B = B;

to typescript: 

    const A: FC<AProps> = ({props1, props2...}) => {...}

    const B: FC<BProps> = ({props1, props2...}) => {...}

    const C: FC<CProps> = ({props1, props2...}) => {...}

while I have typed the props for each component, but the thing is that I didn't know how to type the A.name = name; and B.name = name; and

C.A = A;
C.B = B;

so is there any idea how to do that ?

emartini · Accepted Answer · 2020-06-16 02:42:52Z

1

I think you can do something like this, nothing fancy...

interface AProps {}

interface BProps {}

interface CProps {}

interface AFC<T> extends React.FC<T> {
  name: string;
}

interface BFC<T> extends React.FC<T> {
  last: string;
}

interface CFC<A, B, C> extends React.FC<C> {
  A: AFC<A>;
  B: BFC<B>;
}

const A: AFC<AProps> = ({ children }) => <>{children} </>;
A.name = "name";

const B: BFC<BProps> = ({ children }) => <>{children} </>;
B.last = "last";

const C: CFC<AProps, BProps, CProps> = ({ children }) => <>{children} </>;
C.A = A;
C.B = B;

answered Jun 16, 2020 at 2:42

emartini

1735 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

convert props from javascript to typescript in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related