高级 React Typescript 功能组件声明

Question

I'm relatively new to Typescript with React: I've built a few smaller apps in preparation for starting a new job but I'm a bit stuck on the following code. Can someone please explain what's happening in the FunctionComponent declaration please?

import * as React from 'react';
import {createStructuredSelector} from 'reselect';

const makeMapStateToProps = () =>
    createStructuredSelector({
        selectedLinkUrl:'someURL',
        selectedLinkComponentId: 'someID'
    });


interface DemoProps {
  name?: string;
}

const SomeComponent: React.FunctionComponent<DemoProps &
    ReturnType<ReturnType<typeof makeMapStateToProps>>> = ({
    prop1, prop2
}) => <div prop1={prop1} prop2={prop2} />

Answer 1

Okay let's dig into it:

const SomeComponent: React.FC<DemoProps &
    ReturnType<ReturnType<typeof makeMapStateToProps>>> = ({
    prop1, prop2
}) => <div prop1={prop1} prop2={prop2} />

1. DemoProps is the interface for your props and makeMapStateToProps is that for the state.
2. The props received by the state are destrutured out as props1 and props2
3. Those props are then passed on to the in render method.