CODEWITHSUNDEEP
reactjstypescript
Errand
Errand

Reputation: 129

convert props from javascript to typescript in react

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 ?

Upvotes: 0

Views: 324

Answers (1)

emartini
emartini

Reputation: 173

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;

Upvotes: 1

Related Questions